Welcome to WebmasterWorld Guest from 54.147.220.66

Forum Moderators: open

Message Too Old, No Replies

Javascript rollover code for images

   
11:42 pm on Apr 3, 2002 (gmt 0)

10+ Year Member



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!
11:52 pm on Apr 3, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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. :)

6:09 am on Apr 4, 2002 (gmt 0)

10+ Year Member



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>

10:03 pm on Apr 4, 2002 (gmt 0)

10+ Year Member



Hi. Thanks so much. I tried your code, and it didn't work - am I missing something?
10:30 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Moved the conversation to our HTML forum... Hopefully (as I suggested before) you'll get a bit more guidance here. :)
10:55 pm on Apr 4, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

8:18 am on Apr 5, 2002 (gmt 0)

10+ Year Member



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>