About Me

My photo
Nadiad, Gujarat, India
Hi Friends I am Vipul Soni, an Innovative web Designer & Developer with Excellent skills who thrives on challenges and is passionate for all areas of web Design & Development.

Monday, 23 May 2011

changing images on mouseover using javascript - javascript onmouseout and onmouseover event handlers

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.

We'll now construct an image tag and give the image a name using its NAME attribute.

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 tag.

onmouseover="document.but.src='icon2.gif'" onmouseout="document.but.src='icon1.gif'">  SRC="icon1.gif" NAME="but"  WIDTH="100" HEIGHT="50" BORDER="0" ALT="...">   

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.
Thus, when the mouse cursor is brought over the image, the event is captured byonmouseover() that changes the src property, icon2.gif in our case. The opposite happens when the mouse is taken off the image. You should also note that the image is refered to by its name. If this was not so, JavaScript would be confused as to which image to change!


Post a Comment