back

Changing images on hover or click

---

All over my site I have images that will change when you hover over them or click on them, like my little assistant on the bookshelf! It's very easy to do with some very simple javascript.

On hover:

<img src="image1.png" onmouseover="this.src='image2.png'" onmouseout="this.src='image1.png'">

Onmouseout makes sure that your image reverts back to the first one after the mouse is no longer hovering on it. If you want the new image to stay, get rid of it.

On click is the same, just change onmouseover to onmousedown, and onmouseout to onmouseup!

<img src="image1.png" onmousedown="this.src='image2.png'" onmouseup="this.src='image1.png'">

You can combine onmousedown and onmouseover to do something fun like this:

<img src="image1.png" onmouseover="this.src='image2.png'" onmouseout="this.src='image1.png'" onmousedown="this.src='image3.png'" onmouseup="this.src=image4.png'"> < Example, hover and click!