Rollover Menu

[Cav]

Hello I'm a newbie just learning javascript I was trying to come up with a rollover menu, I've obviously done something wrong or not the right way instead of one button being highlighted at a time the whole menu gets highlighted on the "mouseover event.Here's my code <script type="text/javascript"> function mouseOver(){ document.home.src="home1.gif"; document.prod1.src="prod1.gif"; document.prod2.src="prod2.gif"; document.prod3.src="prod3.gif"; document.about.src="about1.gif"; document.contact.src="contact1.gif"; document.faq.src="faq1.gif"; } function mouseOut(){ document.home.src="home.gif"; document.prod1.src="prod_1.gif"; document.prod2.src="prod_2.gif"; document.prod3.src="prod_3.gif"; document.about.src="about.gif"; document.contact.src="contact.gif"; document.faq.src="faq.gif"; } </script><ul id="navmenu"><li><a href="testtemplate1.html" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" alt="Home" src="home.gif" name="home" width="150" height="50"/></a></li><li><a href="testtemplate2.html"><img border="0" alt="Product 1" src="prod_1.gif" name="prod1" width="150" height="50" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></li><li><a href="testtemplate3.html"><img border="0" alt="Product 2" src="prod_2.gif" name="prod2" width="150" height="50" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></li><li><a href="testtemplate4.html"><img border="0" alt="Product 3" src="prod_3.gif" name="prod3" width="150" height="50" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></li><li><a href="testtemplate5.html"><img border="0" alt="About Us" src="about.gif" name="about" width="150" height="50" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></li><li><a href="testtemplate6.html"><img border="0" alt="Contact Us" src="contact.gif" name="contact" width="150" height="50" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></li><li><a href="testtemplate7.html"><img border="0" alt="FAQ'S" src="faq.gif" name="faq" width="150" height="50" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></li><li><a href="testtemplate8.html">Redirect Test</a></li></ul>

[jeffman]

Well, yeah. You have a generic mouseover function that changes the source of EvERY image. It doesn't know which image you want changed, because you haven't passed it that information.You need to change two things. First, call mouseOver using the 'this' keyword: onmouseover="mouseOver(this)" . Your function also will have to be declared like function mouseOver(im) {//whatever} . Now the function can act on a specific image, which it finds in the im variable.Second, name your images in a 100% systematic way so that mouseOver can simply alter an index to get the rollover image. Example. Your base image is called something_1.gif. You'll find this in im.src . So do a string replace that searches for "1" in the src and replaces it with "2" -- now change im.src to the new name. Obviously, your rollover image will have to be named something_2.gif . Use that pattern for every image, and you'll be good.---Now I know you're learning, and that's cool. There are plenty of situations where you need to know how to change an image using Javascript, so this is a good lesson. But FYI, nowadays we use CSS techniques for menus in particular.

[Cav]

Thank You very much for your help.