How to make a simple image rollover


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