The onmouseover event handler is used for generating various kinds of interactivity on web pages. It's most often used for image rollovers. Image change on mouse over is actually quite simple once we understand the logic.
- To start off, we make two images, one for mouseover and the other for mouseout.
- The image that signifies mouseout is displayed in the <IMG> tag.
- The image is given a name using the NAME attribute of <IMG> tag.
- This tag is surrounded by <A> tags, which contain the onmouseover() and onmouseout() event handlers.
- When a mouse cursor is brought over an image, the event is captured by onmouseover(). This event handler changes the image to another by employing the src property of the Image object.
- When the mouse cursor is removed from the image, we utilize the pnmouseout() to capture the event. This event handler changes the image back to the original.
Here are the two images I made:
icon1.gif: Image for Mouse Out
icon2.gif: Image for Mouse Over
We'll now construct an image tag and give the image a name using its NAME attribute.
<IMG SRC="icon1.gif" NAME="but" WIDTH="100" HEIGHT="50" BORDER="0" ALT="...">
We use icon1.gif as the value for the SRC attribute since this is the image used for mouseout. The image is named but.
The two event handlers are placed inside the starting <A> tag.
<A HREF="some.html" onmouseover="document.but.src='icon2.gif'" onmouseout="document.but.src='icon1.gif'"> <IMG SRC="icon1.gif" NAME="but" WIDTH="100" HEIGHT="50" BORDER="0" ALT="..."> </A>
As you would have guessed, images are a part the document object. The src property of the image object determines the source of the image.
- Why do you require the NAME attribute of the <IMG> tag to be used for image roll-overs?
- How can you change an image? (The most important statement)
- If we use onclick() event handler instead of onmouseover() and onmouseout(), will the image change when we click on it?
Comments, questions, feedback... whatever!
Recent Blog Posts
- Hotmail Sign In page
- Create a Hotmail account - Instructions
- Create Gmail address
- Download and install Outlook Express
- Get your free Gmail address
- Outlook Express new version
- Create my own email address
- Browers for Windows list
- Get email address
- Color combinations for web sites and pages
- Create Yahoo ID