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

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

10+ Year Member



 
Msg#: 77 posted 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

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



 
Msg#: 77 posted 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

10+ Year Member



 
Msg#: 77 posted 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

10+ Year Member



 
Msg#: 77 posted 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

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



 
Msg#: 77 posted 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

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



 
Msg#: 77 posted 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

10+ Year Member



 
Msg#: 77 posted 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