Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   Flicker Free Image Button Rollovers (http://www.go4expert.com/articles/flicker-free-image-button-rollovers-t16046/)

Izaan 3Feb2009 18:50

Flicker Free Image Button Rollovers
 
1 Attachment(s)

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


  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.

shabbir 4Mar2009 09:56

Re: Flicker Free Image Button Rollovers
 
Nominate this article for Article of the month for February 2009

LukaB 5Mar2009 00:59

Re: Flicker Free Image Button Rollovers
 
This is very nice.

david82 8May2009 16:00

Re: Flicker Free Image Button Rollovers
 
good suggestions

Breton 4May2010 13:58

Re: Flicker Free Image Button Rollovers
 
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!




All times are GMT +5.5. The time now is 06:39.