Phoenix Network Forums

Hmm, so these past few days I've been reading about CSS. I've learned that CSS is able to make your site compatible both on text-based and graphics-based browsers. One good technique that I've been reading about is the Image Replacement. I've seen lots of authors have found a way to replace text with image. One code goes like this: (correct me if I'm wrong)

Code: Select all

html:
<h1 id="header"><span>Header</span></h1>

CSS:
#header {background: url('headerImage.gif') no-repeat; width: 200px; height: 100px}
span {display: none}


It works fine when it comes to plain text or headers but I'm having a problem on doing the same thing on links - replacing link with an image. If anyone has an idea on how to do this that also works on browsers like FF, IE, and Opera, please do help me.

Thanks in advance

I'm not sure what you mean by replacing text with images, but you can 'stack properties' somewhat like this, for example:

Code: Select all

#banner {
     background-colour: #000000;
     etc;
     etc;
}
#banner a {
     style links here;
     style only applies for inside #banner div
}


So the relevent HTML would be:

Code: Select all

<body>
<div id="banner">
<a href="this is styled" />
</div>
<a href="this is not styled" />
</body>


I do not think this can be done solely by CSS styles, If I got your question correctly, you want to replace the link text with an image, keeping the hyperlink.

If so, you'd want to look into cgi or preprocessing (php or perl to parse your files beforehand) if you are into web programming, if you pick this way, you can PM me with a more specific question or more details of what you want to do and I will be happy to help.

However if you are not interested in those, and still find an answer to your needs, it would be good if you let me know as well, extra know-hows are never bad.

Thanks for the answers. I've also found one tutorial and it exactly uses CSS. Nice eh.
Here's the link:
http://www.cssplay.co.uk/menus/flickerfree_mk3.html
Check it out if you want

arn0ld wrote:Thanks for the answers. I've also found one tutorial and it exactly uses CSS. Nice eh.
Here's the link:
http://www.cssplay.co.uk/menus/flickerfree_mk3.html
Check it out if you want

What's the purpose behind using CSS for that?

Why not simply use the alt attribut of the img tag?
It's required by W3.org's HTML 4.0 Recommendation for exactly the reason to be compatible with text based browsers.

Yeah, for some reason image replacement has been popular among CSS junkies like csszengarden.com but you should definitly not use it. It's retarded, and actually makes it worse for screen readers.

arn0ld wrote:

Code: Select all

html:
<h1 id="header"><span>Header</span></h1>

CSS:
#header {background: url('headerImage.gif') no-repeat; width: 200px; height: 100px}
span {display: none}


That is just plain stupid. Use images with alt-tags to display text to screen readers. For example:

Code: Select all

<h1><img src="bla.jpg" alt="Header" /></h1>


No CSS needed.