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.)
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?
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.
