SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you create a rollover image?

    If I have a button in an OFF position and want the On position button to show on rollover is this difficult in CSS?

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    There are several methods to do this:

    One way would be to create a single image with both states (on and off state). If one button is e.g. 10px height and 20px width and you have two of those (one for off and one for on, put them both into one image which makes your image 20px (10px * 2 = 20px) height and 20px width, the following CSS rules could be:

    Code:
    a.mybutton:link,
    a.mybutton:visited
    {
    background #000 url(path/to/mybutton.gif) no-repeat; 
    height: 10px;
    width:20px;
    display:block
    }
    
    a.mybutton:hover 
    {
    background-position: 0 -10px; /* here you specify that the image should be pushed -10px to the top, hence displaying the second half of your image which is the rollover style)*/
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Non-Member Webby007's Avatar
    Join Date
    Sep 2005
    Location
    UK, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    You could use this awesome tutorial

    Very easy rollover effects for vertical navigation, only uses one image.

    Website URL: Fast and easy image rollovers in CSS

    Webby


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •