javascript - How to install a JS code for rollovers -

javascript - How to install a JS code for rollovers -

i googled rollover code , found 1 seems ought work @ address: http://www.dnolan.com/code/js/rollover/. works , but...heh heh...i don't know how "create rollover state image in document". way mr. nolan gives instruction implies more simple installing code in document header , hence needs no explanation, sadly, such not case in my...case.

i need navbar, consists of row of 8 circular images, replaced upon hovering images of same size , shape, of different color.

could of brilliant people fill in missing information? need part has no corresponding example—i've got part in tag , in header, , made appropriate changes names of images. or if real peach , give me step step whole thing, eternally grateful.

<div id="header"> <div id="home"><a href="feather.html"><img src="images/buttons/home.png" width="89" height="89" alt="home"></a></div> <div id="security"><a href="security.html"><img src="images/buttons/security_o.png" width="89" height="89" alt="security"></a></div> <div id="phase_1"><a href="phase_1.html"><img src="images/buttons/phase_1.png" width="89" height="89" alt="phase 1"></a></div> <div id="phase_2"><a href="phase_2.html"><img src="images/buttons/phase_2.png" width="89" height="89" alt="phase 2"></a></div> <div id="phase_3"><a href="phase_3.html"><img src="images/buttons/phase_3.png" width="89" height="89" alt="phase 3"></a></div> <div id="basic_package"><a href="basic_package.html"><img src="images/buttons/basic_package.png" width="89" height="89" alt="basic package"></a></div> #header { background-image: url(images/complete_header.jpg); background-repeat: no-repeat; height: 391px; width: 900px; position: relative; } #home { width: 89px; height: 89px; position: absolute; top: 199px; left: 91px; }

the css other 7 buttons same except left positioning.

just read link little futher:

for image in document need create rollover state it, requirements image is named same original image, needs _o on end of name.

so if have image foo.jpg, expects have foo_o.jpg replace in rollover.

of course, much improve done css , using sprites. google search should bring lots of results that. here's first example came me.

javascript rollover installation