SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logo hover effect

    Hi,

    I want the logo on my site to be brighter when it is hovered over with the mouse. I found a method to do this by using a double-wide image, having two versions of the logo in one image side by side. (Here is the tutorial link if you want to check.)

    I have the following CSS right now.

    Code:
    #logo { height:60px; width:240px; display:block; background:url("img/logo.png") }
    #logo:hover { background-position:right }
    In this method, an image with approximately double size is loading. Since not every visitor would point their mouse over the logo or click it, this will be a partial waste of bandwidth. Do you have an idea to do the hover effect in such a way that the second image will be loaded only when someone hovers over the logo?

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Nail Yener View Post
    Do you have an idea to do the hover effect in such a way that the second image will be loaded only when someone hovers over the logo?
    What you've created is called a "sprite" image, and it's the best way to go. You could have a separate image appearing on hover, but it doesn't work as well, because there's a delay as it downloads. That's the beauty of sprites, and the extra bandwidth is usually negligible. So I'd recommend you stay with what you have.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    What you've created is called a "sprite" image, and it's the best way to go. You could have a separate image appearing on hover, but it doesn't work as well, because there's a delay as it downloads. That's the beauty of sprites, and the extra bandwidth is usually negligible. So I'd recommend you stay with what you have.
    Ralph, thank you once again. I guess I should get rid of the "optimization freak" inside me I reduced the logo size (the sprite image) to 8kb and that side of me is still thinking that I could make it 4 But, now I heard this from you, I will leave it as it is.


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
  •