Basic Link Rollover as CSS Sprite
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image, revealing a different area of the graphic.
Might be worth it to add
a {text-indent: -9000px;}Yep, that’s necessary if you are intending to hide the text and just show image. Just because it’s a sprite doesn’t automatically mean that’s the intention though.
a {
display: block;
text-indent: -10000px;
background: url(sprite.png) no-repeat;
background-position: center top;
}
a:hover {
background-position: center bottom;
}
Vlad, the [background-position] attribute is not needed, you can just append the position “center top” to the already declared background attribute.
Aint this just a plethora of nifty resources!!!
//* this is code of vlad*//
a {
display: block;
text-indent: -10000px;
background: url(sprite.png) no-repeat;
background-position: center top;
}
a:hover {
background-position: center bottom;
}
//*i add some:*//
a:active {
background-position: center center
}
soo: 3 status of bg image
When designing dynamic text links for many CMS Software packages (like WordPress or Joomla), you can use this if the background image of the link changes on hover, but you would not use the “text-indent” attribute.
What about using
spantags and setting them to havedisplay: none;in the CSS instead of setting an indent?This would work Benjamin, but would thwart screen readers I believe. Something to that effect I know. ;)
This might be a stupid question, but what if you have a horizontal list of nav buttons? Would you make a different image for each button? If so, would you have to give each button a class name?
I’m pretty sure I don’t know what I’m talking about. :-)
Thanks,
M
maybe you have to make sure your questien clearer…
I have used the same trick in my client website for icon links in http://www.toolshandles.com
I need more explanations ? :(
????
Not sure if I can explain it properly, as English is not my native language, but I will try to be clear:
1- In an image editor program(photoshop) you line up the images, icons, etc.. It is better to calculate to have same distance between images.. Icons should be the same dimensions.
2- You load the image in an anchor -> you define it as a block and define the size (width/height) of the image(icon) -> you can also add here the background-position (for mouse out state)
3- on mouse over you define a new background-position, so the image will change state. In our example, on hover, we have defined the position(coordinate) of the image in the sprite.png.
Why we use this?
- Like this, we load one picture(that contain our icons with all states) only one time per page and we use it several times. The image will be cached and reused.
- We don’t have to save and use a lot of images, with 2-3 states.
I hope I was clear enough.
Cheers.
Its really nice explanation brother …
thankx a lot
I’ve been trying to figure sprites out for a while. It would be helpful to see what the tip does.
great….!!
This web is so amazing… helpful… and nice view…
I’m confused, with all of these examples, I only see one image in each of them.
I thought a sprite always had two images? What would be the complete code for a sprite with both images (hover and static– or hover, static and used link)?
Thanks in advance
Ian
u r not seen the big picture here, the idea in css sprite is that u r using 1 image file havin 2 pics side to side or top to bottom doesn’t matter is up to u, usin css to add bkgrd to ur container then usin pseudo ‘hover’ to reposition that graphic to have an illusion of two graphics inside that container
How can this work in line? I have a line of text that needs to be followed with a button that when clicked downloads a pdf.
Perhaps it is easier to use two images rather than a sprite?
If the visible portion of your sprite has a dimension that would fit in a sidebar for example, would the entire sprite work if it is actually wider than the displayed image?
Thanks, this worked really well once I understood the background-position values.
Hi will this work on responsive websites
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
because of the fixed width and height, will it be possible to make it responsive..?
Thank you,
chadtulio
There has to be some way of using “%” vs “px” to make it work. As long as your background image scaled well.
Would be better if i could see an example right away!
Sprite images can be as large as you want….So if the image is 50px x 50px your image canvas can be 1000px x 1000px if you like…So if you want loads of white space around the image area that is OK…I often separate each image by 100px blocks purely for maths purposes and to avoid any unforeseen chances that the other images on that png file may show…
For example if I have a menu and each item is 250px wide x 40px high, then i make sure that each image in the sprite are not within 300px of each other if they are side by side…
You all can see an example of a sprite right away. It’s called “Google”. Just sayin.