Script that will smoothly fade DIV background image on rollover

[madfirestorm]

Looking for help.

I want to find a script that takes your every day unordered list that has been formatted into a menu with CSS. On rollover the background image behind each menu can be swapped.

I want a script that will swap them smoothly on a:hover and when mouse moves away. Been looking for examples, can find any.

Have you got / seen one?

[BLiZZaRD]

There are a ton of cool ones out there.. Stu's pages are the best..

http://www.cssplay.co.uk/menus/enlarge.html

http://www.cssplay.co.uk/menus/flickerfree.html

or here for the whole list:

http://www.cssplay.co.uk/menus/

[boogyman]

I want a script that will swap them smoothly on a:hover and when mouse moves away. Been looking for examples, can find any.

<ul id="nav">
     <li><a href="http://www.mydomain.com">Home</a></li>
     <li id="link1"><a href="/link1">Link 1</a></li>
     <li id="link2"><a href="/link2">Link 2</a></li>
     <li id="link3"><a href="/link3">Link 3</a></li>
     <li id="link4"><a href="/link4">Link 4</a></li>
     <li id="link5"><a href="/link5">Link 5</a></li>
</ul>

<style type="text/css">
body {
     background-color: #fff;
     color: #000;
}

ul#nav li {
     display:block; /* critical for the background properties to take affect across entire length */
     list-style:none;  /* removes default bullets */
     background: #color url('/path/to/default/image') repeat attachment position;
}
ul#nav li#link1 a:hover {background: #color url('/path/to/new/image') repeat attachment position;}
ul#nav li#link2 a:hover {background: #color url('/path/to/new/image') repeat attachment position;}
ul#nav li#link3 a:hover {background: #color url('/path/to/new/image') repeat attachment position;}
ul#nav li#link4 a:hover {background: #color url('/path/to/new/image') repeat attachment position;}
ul#nav li#link5 a:hover {background: #color url('/path/to/new/image') repeat attachment position;}
</style>

background: color url('/path/to/image') repeat attachment position;
that is the format in which the background properties must be given if doing all in 1 single line, you can omit sections.

if you would like to do them separately you can use

selector {
     background-color: #color;
     background-image: url('/path/to/image');
     background-repeat: repeat;
     background-attachment: attachment;
     background-position: position;
}

hexadecimal / human-text / rgb
no-repeat / repeat-y / repeat-x
none / fixed / scroll
top / middle / bottom / left / right or combination of 2