WebDevelopersNotes logo

home-icon Home / JavaScript / Changing Images on Mouseover Using JavaScript

Changing Images on Mouseover Using JavaScript

Changing Images on Mouseover Using JavaScript

On Mouse Over

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.

Sponsored Links

Here are the two images I made:

Icon 1: for mouse outicon1.gif: Image for Mouse Out

Icon 2: for mouse overicon2.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'"

<IMG 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 by onmouseover() 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 referred to by its name. If this was not so, JavaScript would be confused as to which image to change!

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

JOKE - Being a Programmer

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The popular Sudoku involves no mathematics at all. Instead of numbers, shapes, alphabet, colors, symbols etc. can be used. That's the beauty and simplicity of the puzzle! By the way, only 5,472,730,538 Sudoku are solvable. That's a big enough number in itself! Contrary to popular belief stemming probably from it's Japanese sounding name, Sudoku did not originate in Japan! It was created by an American Architect, Howard Garns, who called it Number Place - the Japanese still call it that. On a related note, the credit for popularising Sudoku goes to Wayne Gould, a Hong Kong judge. He spent several years in developing a computer program that would automatically generate these puzzles. Gould also convinced The Times in Britain to publish them. From there, Sudoku quickly reached US shores and spread around the world. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy