How to make an Image RollOver in JavaScript
By Derek MeiresonneAs you may already know, many sites on the Internet use some sort of Mouse Over effect. Why do designers use them so much you ask? That's simple, they are easy to do, and look really cool. However, they don't just add to the ascetics of the site, they also help for navigational purposes. Think back to the last time that you saw a rollover effect on a navigation bar. There was most likely an arrow pointing to the category of your choice.
This helps the user visually confirm that this is where they want to go. Especially on business web sites, this helps reassure the buyer, and makes them feel more comfortable. OK, enough chatter, lets get coding.
Starting Your First Rollover
Start by making a link:
<A HREF="index.html" Then type, onMouseOver="imagename.src='pic-2.gif'". This is what actually makes the Rollover work, keyword onMouseOver. It's saying, when a mouse over image imagename (This name of image, more on that later). Change to pic-2.gif. .src, part just tells browser use value name.>
Now, still in the link tag type onMouseOut="imagename.src='pic.gif'". This tells the browser that when the mouse is NOT over image imagename, then display pic.gif, which is the original image.
Now add the image:<IMG SRC="pic.gif" NAME="imagename" BORDER=0>. This is just your regular image tag, which you learned in Linking an Image. The NAME=" " attribute is where you declare the name of your image.
Note - the image name is case sensitive, so make sure you use the exact same name for all of your imagenames.
End the link:Congratulations, you now you have a fully working Rollover. Take a look at the code below, and check to make sure you have everything.
<A HREF="page.html" onMouseOver="banner.src='pic-2.gif'"
onMouseOut="banner.src='pic.gif'">
<IMG SRC="pic.gif" NAME="banner" BORDER=0></A>
Note - Where page.html is, you can substitute that for a pound sign (#). This will not take anywhere, but will still enable you to use the Image Rollover.