Image rollover is a very common design method on websites but many people use different methods in how they code their image rollover. The following method will show the best way to utilize the image rollover effect.
This will be a CSS class designated for a specified <a> tag.
.image1 { background-image: url("path/to/image/normal.gif"); height: 100px; width: 100px; display: block; } .image1:hover { background-image: url("path/to/image/hover.gif"); height: 100px; width: 100px; display: block; }
After writing up the CSS, create the code in the HTML side
<a class="image1" href="#">Test</a>
The following will result in a 100 x 100 pixel rollover image link that can be used over and over, cross-browser.
Now the main issue with this is the loading aspect of the rollover image. When you declare it in the css, it not executed until the proper conditions are met (mouse hover). Meaning the hover.gif will not load until the user positions the mouse over the designated link. This will result in a quick blink in the image because its still loading when you put your mouse over it. To fix this you need to preload in javascript.
var test = new Image(); test.src = 'path/to/image/roll.gif';
Every rollover image is loaded along with the page and the “blink load” is no longer there. A clean transition from image to image on hover is established.
If your site is all custom coding, try making a PHP class that does all this for you. Create a public function that has the parameters of normal and rollover (and any other feature you want to add). Have it output the individual CSS class per image, a preload variable in the javascript, and the actual <a> tags within the html. A total of 3 output functions, 1 input functions, and unlimited processing functions in the class. This will save you a lot of time in coding and it will produce valid w3c coding. This will also eliminate the use of built-in methods that are in programs such as Adobe Dreamweaver and Microsoft FrontPage.
