homepage Welcome to WebmasterWorld Guest from 54.237.184.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript rollover code for images
justinen




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

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




msg:1488400
 11:52 pm on Apr 3, 2002 (gmt 0)

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




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

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




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

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

mivox




msg:1488403
 10:30 pm on Apr 4, 2002 (gmt 0)

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

tedster




msg:1488404
 10:55 pm on Apr 4, 2002 (gmt 0)

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved