A little dab'll do ya
Code Snippets
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;
}
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