SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2005
    Location
    New York, NY, U.S.
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover effect (rollover) by changing background position?

    I have been trying to figure out how the folks over at dig (add another g) have done their hover effects. I have stumbled upon an image that they are using that has 3 pieces to it in a way. (the image: go to their site and then add this at the end "/img/tab-back.png") It seems they are changing the background position and thus creating a hover effect in this way. This makes it easier to use hover effects with somelike like a gradient it seems. Now i'm not sure if I can legally post the css here or not, so i've decided not to, however, if you have firefox and the developer toolbar you can find it, it's mostly under
    Code:
    #sub-nav li a, #sub-nav li a:visited, #sub-nav li span, .extra-nav li a, .extra-nav li a:visited, .extra-nav li span    (line 1039)
    and
    Code:
    #sub-nav li:hover a, .extra-nav li:hover a    (line 1072)
    Thanks for any help anyone can give, i'd really like to learn how to do this.
    Last edited by Mygly; Jul 4, 2006 at 16:47.

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one example, I'm sure there are more out there: http://www.alistapart.com/articles/slidingdoors/

    Nadia

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe you are talking about CSS sprites. Where you use one image that has various states of hover as the background and then position the background image to show the appropriate state of the hover etc.

    You can find more information about it at

    http://www.alistapart.com/articles/sprites


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
  •