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