Show alt text instead of image through CSS

[Garmt de Vries]

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.

[Spartanicus]

"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