August 04, 2001

Image Rollover's

Ahh, the image rollover. To clue you in on me, I just learned alot of JavaScript last night with some tutorial's, so if I can learn it, you can too.

Ok the first thing you need is 2 images.. preferably the same size, once you have that you're ready to start.

You should recognize this tag

<a href="http://randompsycho.org"><img src="bubble1.gif" name="pic1"></a>

That by itself does not make an Image Rollover, You need a little more added to it, shown below we added the onMouseOver event, this event happens when the user moves over the image with the mouse.

<a href="http://randompsycho.org" onMouseOver=""><img src="bubble1.gif" name="pic1"></a>

Now just that alone will not make it work either, the JavaScript has to know what image to change so we'll add that part now..

<a href="http://randompsycho.org" onMouseOver="document.pic1.src='bubble2.gif'"><img src="bubble1.gif" name="pic1"></a>

Ok now that will change it to the graphic, it wont change it back when the mouse moves away from it though, I'll add the OnMouseOut event, which is in the event of the user moving the mouse off the image.

<a href="http://randompsycho.org" onMouseOver="document.pic1.src='bubble2.gif'" onMouseOut="document.pic1.src='bubble1.gif'"><img src="bubble1.gif" name="pic1"></a>

Now that should work for you, if it doesnt make sure check your quotes. Anything that uses quotes inside our events (OnMouseOver,OnMouseOut) must single quotes, ' <-- like so, Well i hope I helped you into rollover heaven. Here's an example :))



Ok, after I gave Darrell the link to the tutorial's, he then said 'post it on the log too' so here ya go!

JavaScript Primers

Ok, now since I've edited this post about 9 times now, I think that's enough. hehe :))