Flicker Free Image Button Rollovers

Izaan's Avatar author of Flicker Free Image Button Rollovers
This is an article on Flicker Free Image Button Rollovers in Web Design, HTML And CSS Tutorials.
Rated 5.00 By 1 users

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.



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


  1. 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.
  2. 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.
Attached Files
File Type: zip btnbg.zip (45.2 KB, 12 views)
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Nominate this article for Article of the month for February 2009
LukaB's Avatar, Join Date: Mar 2009
Contributor
This is very nice.
david82's Avatar, Join Date: May 2009
Go4Expert Member
good suggestions
Breton's Avatar, Join Date: May 2010
Newbie Member
Thank you for sharing this good information with us .I know one more site through which we can get 50 absolute free prints and can design website

cheers!