I created some images for my homepage that will change if the user hovers over or clicks the images. Each image has three different states/animations. The change can be done using simple HTML onmouseover events and there is no need for CSS or JavaScript.

Example of code for changing between three images:

<img src="image1.png" onmouseover="src='image2.png';" onmousedown="src='image3.png';" onmouseup="src='image2.png';" onmouseleave="src='image1.png';">

Start by using img src=”image1.png” , just like you would add any other image. Add onmouseover=”src=’image2.png’;” to change the image when hovering over it, and onmousedown=”src=’image3.png’;” to change it when clicking it.

onmouseup=”src=’image2.png’;” is added so the image changes back when releasing the mouse button, but you can skip this if you want it to stay the way it is after the onmousedown image change.

onmouseleave=”src=’image1.png’;” is added so the image changes back to the normal state when not hovering over it. You can also skip this if you want it to remain the same after onmouseover image change.

(Note that onmouseover doesn’t work that great for mobile devices where the user is not navigating using a mouse)

Try it in action here!

And these are the images I created: