Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Traditionally, image rollovers always had the problem of the first time you moved your mouse over the link, the rollover image had to load, thus creating a lag. Along came the javascript preloader which preloaded the images for you, but that created alot of clunky javascript code, much of it un-needed. Roll on CSS!

    Creating an image rollover with CSS isn't as difficult as you might think. Let's start with some simple HTML.
    HTML Code:
    <div class="rollover">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    </div>
    All it is are 2 links inside a div. The div has a class attribute called 'rollover'.

    We then need the image that we are going to use as the rollover. Attached, find the button.gif image. The way CSS rollovers work is that it will display the top part of the image as the normal link state, and display the bottom half of the image as the hover state. Now we are going to need some CSS to get this to work.
    HTML Code:
    .rollover a {
    	display:block;
    	width: 100px;
    	height: 25px;
    	padding-left: 35px;
    	padding-top: 5px;
    	background: url("button.gif") 0 0 no-repeat;
    	font: bold 13px Verdana;
    	color:#fff;
    	text-decoration: none;
    }
    .rollover a:hover { 
    	background-position: 0 -30px;
    	color: #B4DE18;
    }
    Just a couple of things to note:

    The button I used was 100px by 30px. The final image(button.gif) used is 100px by 60px. If you have alook at the button.gif, you will see that the normal state in the top half, and the hover state in the bottom half.

    As you can see I used padding for the link text. The height: 25px was the result of the image(30px) less the padding-top: 5px.

    Heres an demo of the CSS image rollover. This CSS image rollover works in both Firefox 1.5 and Internet Explorer 6.0

    Have fun!
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Ahh... good stuff! Well done. You beat me to it and I couldn't have wrote it better!
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com