User Tools

Site Tools


web_development:image_rollover

The following code utilises your browser's cache to pre-load images, and then rolls over when you point to it. This is probably the quickest, most nitty-gritty way to do a rollover I've come across. No need for .js includes. No huge JavaScript in your document header… just a nice and neat bit of code.

Simply change the names of the images according to your needs; there are two images for each item. You can add as many as you like, just be sure to include the rollover image in the hidden div (so it will pre-load).

image_rollover.html
<img src="NORMALBUTTON1.jpg" border="0" onmouseover="this.src='ROLLOVER1.jpg';" onmouseout="this.src='NORMALBUTTON1.jpg';">
<img src="NORMALBUTTON2.jpg" border="0" onmouseover="this.src='ROLLOVER2.jpg';" onmouseout="this.src='NORMALBUTTON2.jpg';">
 
<div style="display:none;">
  <img src="ROLLOVER1.jpg">
  <img src="ROLLOVER2.jpg">
</div>
web_development/image_rollover.txt · Last modified: 2012/01/26 07:46 by import