How to make a simple image rollover

Usage

This trick is nice, but can quickly be overused.  Remember that people on mobile devices will not have the same experience with image rollovers as those on a  desktop.  So if the image rollover is critical in communicating an idea and you think or know people will be visiting on a phone, choose another method.

Example




Example Code

You will need to do this in HTML mode:

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

Feedback and Knowledge Base