1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Flicker Free Image Button Rollovers

Discussion in 'Web Design, HTML And CSS' started by Izaan, Feb 3, 2009.

  1. Izaan

    Izaan New Member

    Joined:
    Oct 16, 2007
    Messages:
    215
    Likes Received:
    2
    Trophy Points:
    0

    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.

    [​IMG]

    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:
    <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:
      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:
      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:
      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:
      background:url(btnbg.gif) no-repeat -130px 0px;

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

    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:

  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,292
    Likes Received:
    365
    Trophy Points:
    83
  3. LukaB

    LukaB New Member

    Joined:
    Mar 4, 2009
    Messages:
    51
    Likes Received:
    0
    Trophy Points:
    0
    This is very nice.
     
  4. david82

    david82 New Member

    Joined:
    May 7, 2009
    Messages:
    14
    Likes Received:
    1
    Trophy Points:
    0
    good suggestions
     
  5. Breton

    Breton New Member

    Joined:
    May 4, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    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!


     

Share This Page