By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,680 Members | 2,123 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,680 IT Pros & Developers. It's quick & easy.

Show alt text instead of image through CSS

P: n/a
On my pages, I use a couple of images (with appropriate alt texts of
course) for decoration purposes. For example:

<p>
Blablabla about some topic.<br>
<a href="foo.html">
<img src="see.gif" alt="See:">More info on bla...
</a>
</p>

where the image see.gif could be an arrow, or a pointing finger, or
whatever.

Now I'm trying to make a stylesheet for handheld media, and in this
case, I'd rather use the alt text than the image. Is there a way in CSS
to suggest showing the alt text rather than the image? You can add the
alt text after the image with:

img[alt="See:"]:after {content: attr(alt);}

(or using a class if you don't want to rely on the [alt=] selector).
But this still keeps the image itself. With "display: none" you see
nothing at all. Is there another solution?

It may perhaps be better to do it the other way around, and to use
something like Fahrner image replacement. But that has the disadvantage
of being inaccessible for screen readers, frustrating "find in page"
features, etc.

Any ideas?

--
Garmt de Vries.

Nov 2 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"Garmt de Vries" <gd*****@hotmail.com> wrote:
On my pages, I use a couple of images (with appropriate alt texts of
course) for decoration purposes.
Images are content in which case they should have alt content, or
decorative in which case they should have empty alt content (if coded in
the HTML at all).
For example:

<p>
Blablabla about some topic.<br>
<a href="foo.html">
<img src="see.gif" alt="See:">More info on bla...
</a>
</p>

where the image see.gif could be an arrow, or a pointing finger, or
whatever.
"More info on bla..." more than suffices semantically, adding the "See:"
prefix only degrades the semantics. Treat the image as decorative with
alt="".
Now I'm trying to make a stylesheet for handheld media, and in this
case, I'd rather use the alt text than the image. Is there a way in CSS
to suggest showing the alt text rather than the image? You can add the
alt text after the image with:

img[alt="See:"]:after {content: attr(alt);}

(or using a class if you don't want to rely on the [alt=] selector).
But this still keeps the image itself. With "display: none" you see
nothing at all. Is there another solution?


img{content:attr(alt)} CSS3, not widely supported.

--
Spartanicus
Nov 2 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.