Using an <img> in an <hx>

[e n | c k m a]

Is it okay to use the alt text of an image for the text of an <hx>?
Like so:

<h1><img src="images/blah.gif" width="200" height="45" alt="This is a
heading!"></h1>

Will this even work? Or is it a bad idea? If it's a bad idea, why is it a
bad idea?

Thanks in advance,
Nick.

 

[Jukka K. Korpela]

Is it okay to use the alt text of an image for the text of an <hx>?

I'm not sure I understand the question correctly, but if it means
"if I use an image as a first level heading, is it appropriate to put the

<h1><img src="images/blah.gif" width="200" height="45" alt="This is a
heading!"></h1>

Will this even work?

There is no specified behavior that it _should_ cause but it _may_
have various effects, such as
- search engines may treat the alt text as heading text (I'm afraid
they currently don't)
- graphic browsers, when not rendering the image for some reason (e.g.
image loading disabled in settings), may render the alt text the
same way the render normal <h1> text (e.g., Mozilla does so)
- similarly, text browsers may render it in heading style.

Note that although <h1> does not affect the image rendering when the
image is shown, it still (typically) causes margins above and below, so
to achieve the same visual effect in that case as without <h1>, use
h1 { margin: 0; }
in a stylesheet. Unfortunately there is no way saying "apply this CSS
rule if and only if you render this image (and not the alt text)", but
this isn't usually a big problem here in practice.

 

[e n | c k m a]

- search engines may treat the alt text as heading text (I'm afraid

they currently don't)

Damn, that's the effect what I was hoping for. I don't like using those
Image Replacement methods because of all the issues that come with it. I
don't quite know what else to do and I was hoping that this would work.

Maybe I can add a <span> element or something and change it's z-index so
that it's not visible...

thanks for your help,

Nick.

 

[PeterMcC]

e n | c k m a wrote in

Damn, that's the effect what I was hoping for.

And, unless the image is a link, the SEs don't appear to index the alt text
at all.

 

[Nick Howes]

Maybe I can add a <span> element or something and change it's z-index so
that it's not visible...

thanks for your help,

Nick.

The Fahrner Image Replacement (FIR) technique was thought up specifically
for this (displaying an image for a title, which would degrade to text.
However it messes up in screen readers, so don't use that. One way to
reliably do it is to have your <h1> with the text in, and then in the CSS
options for h1, set the text-indent to something like -500% to shift the
text way off the screen, and then set the background of the h1 element to
the image you want (setting width and height accordingly). Works well and
non-css browsers see the regular text (I tried it in Lynx).

Nick

 

[Nick Howes]

The Fahrner Image Replacement (FIR) technique was thought up specifically
for this (displaying an image for a title, which would degrade to text.
However it messes up in screen readers, so don't use that. One way to
reliably do it is to have your <h1> with the text in, and then in the CSS
options for h1, set the text-indent to something like -500% to shift the
text way off the screen, and then set the background of the h1 element to
the image you want (setting width and height accordingly). Works well and
non-css browsers see the regular text (I tried it in Lynx).

Note this still has the disadvantage that in the (unlikely) event that the
browser has CSS but the user has disabled images, he won't see the
background and the text will be shifted off so there won't be anything. Ah
well! I think there's another technique that involves the image floating
over the text, so that if the image isn't loaded, the text can be seen.

nick

 

[Mark Parnell]

Note this still has the disadvantage that in the (unlikely) event that the
browser has CSS but the user has disabled images, he won't see the

Not so unlikely - I browse like that all the time at home. We are on
dialup, and it's amazing how much difference it makes to page loading
times. Have broadband at work, so get really frustrated with dialup, but
broadband isn't available at home.

background and the text will be shifted off so there won't be anything. Ah
well! I think there's another technique that involves the image floating
over the text, so that if the image isn't loaded, the text can be seen.

Alt text is the best way to go, but as mentioned previously, the search
engines don't seem to index it.

 

[Magnus Haugsand]

Not so unlikely - I browse like that all the time at home. We are on
dialup, and it's amazing how much difference it makes to page loading
times. Have broadband at work, so get really frustrated with dialup, but
broadband isn't available at home.




Alt text is the best way to go, but as mentioned previously, the search
engines don't seem to index it.

The Gilder/Levin-method (with Shea Enhancement) seems to work fine
without CSS and pictures, but is not prefered if the image is transparent.

URI: http://www.mezzoblue.com/tests/revised-image-replacement/

 

[Steve Pugh]

The Gilder/Levin-method (with Shea Enhancement) seems to work fine
without CSS and pictures, but is not prefered if the image is transparent.

URI: http://www.mezzoblue.com/tests/revised-image-replacement/

Whilst it solves some of the problems (images off / css on) it
introduces new ones. Try it with a larger than default font size. If
overflow: hidden is set then the text can't all be seen when images
are disabled. If overflow: hidden isn't set then the text spills out
from underneath the image.

Steve

 

[e n | c k m a]

Whilst it solves some of the problems (images off / css on) it

introduces new ones. Try it with a larger than default font size. If
overflow: hidden is set then the text can't all be seen when images
are disabled. If overflow: hidden isn't set then the text spills out
from underneath the image.

That's why I didn't wanna use that either. Basically, what I've done is:

<h2><span>This is a test</span></h2>
<p title="This is a test">Yadda yadda yadda yadda yadda yadda</p>

h2 span{position:absolute;top:0;left:0;z-index:-1}

I don't mind that. That means that if someone has CSS enabled but images
off, if they hover over the visible paragraph, they will see a tooltip with
the same text as the <hX>

And I'm happy with that for the moment. There doesn't seem to be many
feasible options for satisfying _all_ scenarios.

Nick.

 

[Kris]

The Fahrner Image Replacement (FIR) technique[...]

[/QUOTE]

Note this still has the disadvantage that in the (unlikely) event that the
browser has CSS but the user has disabled images, he won't see the
background and the text will be shifted off so there won't be anything.

Howcome this is an unlikely event?