AWM Creative

Prevent Rollover Image Flicker the Proper Way

Published in CSS, HTML/XHTML by Aaron

It’s annoying when you’ve got a beautiful button designed and find out it flickers when the mouse rolls over. Fortunately, there’s an easy way to fix this issue with a little bit of code.

What is an image flicker?

For those who don’t know what an image flicker is it’s basically caused when the button is rolled over by the cursor for the first time causing the second image to load. For a split second, while the second image is loading, there is a little flicker which basically looks like a blank spot filled with nothing. This issue is a common occurrence in all browsers.

Solving the problem

It’s simple, we’ll use one image defined as a CSS background.

Here’s the image:

Here’s the code:


ul li {
   list-style: none;
}


This one is pretty self-explanatory. The list-style hides the bullet styling.


ul li a {
   display: block;
   width: 122px;
   height: 41px;
   background: url(‘btn_flicker.gif‘) no-repeat 0 -41px;
}


This code basically does all the major work for the button style. Setting the display to block allows the width and height properties to define the clickable area of the button. The background property is also set and this is where the one image is used. Be sure to add no-repeat in the background tag so that the image is not repeated. You’ll also want to set the position of the image within the background tag.


ul li a:hover {
   background-position: 0 0;
}


The code above is the fun part. The background-position makes the image switch to the rollover state.


span {
   display: none;
}


This hides the text link.

And we can’t forget about the HTML. Here’s the short snippet:


<ul>
   <li><a href="#clickme"><span>Button</span></a></li>
</ul>


That’s it?! No more HTML or use of Javascript? Yep, that’s it. Keeping it simple is pretty easy.

Now, you’ll probably notice that some text was placed between the list element. The text needs to be there for accessibility reasons even though the text is hidden from the user. The link text allows search engines to pick up the name of the URL. Adding text to the button also allows users to view the link on a browser/mobile phone that may not support CSS.

Here’s what the button looks like when the CSS is disabled:

Pretty cool, huh? Check out the demo or download the source code to see the button in action or to experiment on your own.

View Demo and Source Code

• Demo
• Source Code