Javascript rollover code for images

[justinen]

Hi. I have image rollover code on my site, but error codes keep popping up. I am looking for good code somewhere. Can anyone direct me? Thank you so much!

[mivox]

A site like javascript.com will usually have a script download area, where you can look at various scripts, read the code, and test them with different browsers (as long as you have multiple browsers on your computer) before choosing which one to download and use.

Try a web search for "javascript rollover script download" or something similar to see what resources are available.

Failing that, our HTML Forum [webmasterworld.com] would be the best place to get javascript help around here. :)

[mikegram]

I'm guessing the rollovers have links.

<a href="http://WWW.WHATEVER.COM/RANDOM.HTM" onmouseover="top.src='RANDOM_OVER.GIF" onmouseout="top.src='RANDOM.GIF">
<img name="NAME" src="RANDOM.GIF" width="50" height="50" border="0" alt="YOUR MESSAGE HERE"></a>

[justinen]

Hi. Thanks so much. I tried your code, and it didn't work - am I missing something?

[mivox]

Moved the conversation to our HTML forum... Hopefully (as I suggested before) you'll get a bit more guidance here. :)

[tedster]

No, don't leave! We've got good rollover resources right here. Try this thread: Bare Bones Rollover Code [webmasterworld.com]. Rollover code is pretty simple, at it's core. You need to:

1. Load the rollover images into the browser's cache
2. Name the spot where all graphics appear by using the "name=" attribute in the <img> tag
3. Detect onMouseOver and onMouseOut events in the anchor tag, NOT the <img> tag
4. Change the source file for the named image with each mouse position change

The BASICS, to rollover from image1.gif to image2.gif and back again, in the screen position I named "spot":

In the HEAD

over=new Image(ww,hh)
over.src="image2.gif"

In the BODY

<a href="url.html" onMouseOver="spot.src=over.src" onMouseOut="spot.src='image1.gif'"><img src="image1.gif" name="spot" width="ww" height="hh"></a>

On the thread I linked to above, our members add nice refinements to the basic idea. We've got some world-class javascript jockeys here.

[Rhys]

Hi Justinen

<Hi. Thanks so much. I tried your code, and it didn't work - am I missing something?>

The reason it didn't work is the name is wrong in the image tag.
It should be the same as in the mouseover call - i.e. top.
The following code will work if you have images called RANDOM_OVER.GIF and RANDOM.GIF in thew same folder.

<a href="http://WWW.WHATEVER.COM/RANDOM.HTM" onmouseover="top.src='RANDOM_OVER.GIF" onmouseout="top.src='RANDOM.GIF">
<img name="top" src="RANDOM.GIF" width="50" height="50" border="0" alt="YOUR MESSAGE HERE"></a>