Share this Page URL
Help

Chapter 18. More JavaScript Fun > A Script for Mouseovers - Pg. 207

More JavaScript Fun For the example I'm using, I have two images: · mouseout.gif--This is the regular image that appears without the mouse pointer over it. · mouseovr.gif--This is the image that appears when the user puts the mouse pointer over mouseout.gif. Here's the <IMG> tag (each attribute is on a separate line for easier reading): <IMG SRC="mouseout.gif" WIDTH="157" HEIGHT="39" BORDER="0" NAME="mypicture"> 207 As you can see, I've used mouseout.gif to start, and I've given the name "mypicture" to the <IMG> tag. Now you construct an <A> tag (mouseovers work only with images that are set up as links): <A HREF="jsmouse1.html" onMouseover="mypicture.src='mouseovr.gif'" onMouseout="mypicture.src='mouseout.gif'"> There are two extra JavaScript attributes here: onMouseover and onMouseout. The onMouse- over attribute says, essentially, "When the user moves the mouse pointer over the image named mypicture, change its SRC attribute to mouseovr.gif." Similarly, the onMouseout attribute says, essentially, "When the user moves the mouse pointer off (out of) the image named mypicture, change its SRC attribute to mouseout.gif." Here's how the whole thing looks (see jsmouse.htm on the CD in this book): <A HREF="jsmouse1.html"