Go4Expert - Flicker Free Image Button Rollovers

Flickering scenarios

Its quite some time now I had the problem that whenever we use Image buttons for some of the graphic oriented sites the biggest problem we used to face is when ever we specify different image for the hover effect the first hover used to take very long ( unless you had servers as fast as Google ).

The solution to the above problem was done in a very tricky way of loading the images when the body load's and this use to save us from such delayed hover problem but when you have quite a few buttons the solution slows down the page load and so it was not a good alternative to the first hover flicker.

Solution

I have manged to get a permanent solution to this problem and I would like to share them with you here. The same solution is used on many sites including YouTube.

First you have to create and Image which has all the button states like Normal / Hover / Visited.

http://www.go4expert.com/images/arti...over/btnbg.gif

Also I prefer to have all my buttons into one image so that it reduces the loading time of small images.

Now you have to create CSS using the above Image. The dimension of the buttons is 130x40 and I have attached the well sliced PSD for your reference.

The code

Code: CSS

<style type="text/css">
.NavigationMenu ul li{
    margin:0px;
    padding:2px;
    float:left;
    list-style:none;
    text-indent:-9999px;
}
.NavigationMenu ul li a#g4ef{
    position:relative;
    display:block;
    width:130px;
    line-height:40px;
    background:url(btnbg.gif) no-repeat 0px -40px;
}
.NavigationMenu ul li a#g4ef:hover{
    background:url(btnbg.gif) no-repeat 0px 0px;
}
.NavigationMenu ul li a#home{
    position:relative;
    display:block;
    width:130px;
    line-height:40px;
    background:url(btnbg.gif) no-repeat -130px -40px;
}
.NavigationMenu ul li a#home:hover{
    background:url(btnbg.gif) no-repeat -130px 0px;
}
</style>

The CSS code is self explanatory but still I would prefer to describe the use of each of the styles.

NavigationMenu ul li

We would make the list in the NavigationMenu class change with content not getting displayed as we would use text in the images.
NavigationMenu ul li a#g4ef

This is one of the id of our navigation menu where for link we specify the location of the background, width and height.
Code: CSS
```
width:130px;
line-height:40px;
background:url(btnbg.gif) no-repeat 0px -40px;
```
NavigationMenu ul li a#g4ef:hover

When anybody hovers we change the position of the background.
Code: CSS
```
background:url(btnbg.gif) no-repeat 0px 0px;
```
NavigationMenu ul li a#home

This would be the second menu item for our menu and here also we specify the same things but just changing the position of the background with respect to our image.
Code: CSS
```
width:130px;
line-height:40px;
background:url(btnbg.gif) no-repeat -130px -40px;
```
NavigationMenu ul li a#home:hover

Repeat the same for hover of our home menu.
Code: CSS
```
background:url(btnbg.gif) no-repeat -130px 0px;
```

Now all you have to do is put the following into the HTML File

Code: HTML

<div class="NavigationMenu">
    <ul>
        <li><a href="http://www.go4expert.com/" id="home">Home</a></li>
        <li><a href="http://www.g4ef.com/" id="g4ef">g4ef</a></li>
    </ul>
</div>

and you are done.

Points to Note

If we want to have text on the Images we need to move the content of the actual li to place where its not visible.
We need to have the HREF tag as the content as thats the only tag in CSS which allows hover effect.

Working Example

Flicker Free Button Rollovers Sample

Thanks to Shabbir for allowing my code to be uploaded on the go4expert.com servers.