CSS Image replacement for links
kenyabob (303 points) | Sun, 2005-07-17 01:56I have read a number of articles talking about how to have an image replace a piece of text, usually by just hiding the text, text which might be in a span that is inside a visible div. But what about links? Shouldn't the link be visible in order for the user to click it and advance to the next page?
Commenting on this Forum topic is closed.
i don't konw if i understood what you was talkin about..
but i guess the image will be like a replacer for the text-link.
//Static
I think think think this i kinda what you wanna do. The key is to move the text way the hell left (via a negative text-indent [although now that I think of it, I don't know why a positive one couldn't be used]), and hides said text because it would render outside the box (overflow).
a#replaced{
background: url(background.png);
height: 50px;
text-indent: -999em;
overflow: hidden;
width: 100px;
}
Problem: if CSS is on and images are off, the user will see nothing. You might wanna check out alistapart.com for the latest-and-greatest way of doing it. I'm not sure what the kids are doin' these days.
But if the text indent is moved, then there would be nothing to click on.
Not so. The user will click within the box of the A element. Just because you can't see the text (it doesn't fall within the box) doesn't mean the A element (the box itself) isn't clickable. The user will just see the background image instead of the text.
The site you pointed do does the same thing as I've outlined above, but without any text at all, which makes it a bit less accessible. They've also set the display to block, which might be necessary for the purposes of setting the height and the width.
EDIT: My mistake, that's your site. :D
You guys can see what I am working with at the following site here
Well, it looks like all you have to do is take out the text from the html. Problem solved. I think.