Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Using an <img> in an <hx>

Reply
Thread Tools

Using an <img> in an <hx>

 
 
e n | c k m a
Guest
Posts: n/a
 
      06-05-2004
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.


 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-05-2004
"e n | c k m a" <(E-Mail Removed)> wrote:

> 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
<img> element inside <h1> element?", the answer is emphatically "yes".

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


Right. When it is logically a 1st level heading, make it <h1> in markup.

> 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.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html


 
Reply With Quote
 
 
 
 
e n | c k m a
Guest
Posts: n/a
 
      06-05-2004
> - 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.


 
Reply With Quote
 
PeterMcC
Guest
Posts: n/a
 
      06-05-2004
e n | c k m a wrote in
<oxdwc.6656$(E-Mail Removed)>

>> - 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.


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

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

 
Reply With Quote
 
Nick Howes
Guest
Posts: n/a
 
      06-08-2004
"e n | c k m a" <(E-Mail Removed)> wrote in message
newsxdwc.6656$(E-Mail Removed)...
> > - search engines may treat the alt text as heading text (I'm afraid
> > they currently don't)

> 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


 
Reply With Quote
 
Nick Howes
Guest
Posts: n/a
 
      06-08-2004
"Nick Howes" <(E-Mail Removed)> wrote in message
news:ca58lg$ss4$(E-Mail Removed)...
> "e n | c k m a" <(E-Mail Removed)> wrote in message
> newsxdwc.6656$(E-Mail Removed)...
> > > - search engines may treat the alt text as heading text (I'm afraid
> > > they currently don't)

> > 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).


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


 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      06-08-2004
On Tue, 8 Jun 2004 21:50:07 +0100, Nick Howes <(E-Mail Removed)>
declared in alt.html:

> 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.

--
Mark Parnell
http://www.clarkecomputers.com.au
 
Reply With Quote
 
Magnus Haugsand
Guest
Posts: n/a
 
      06-09-2004
Mark Parnell wrote:
> On Tue, 8 Jun 2004 21:50:07 +0100, Nick Howes <(E-Mail Removed)>
> declared in alt.html:
>
>
>>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.
>


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/revis...e-replacement/

--
Mvh Magnus Haugsand
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      06-09-2004
Magnus Haugsand <(E-Mail Removed)> wrote:

>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/revis...e-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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
e n | c k m a
Guest
Posts: n/a
 
      06-09-2004
> 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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Using a Link Button to redirect to another page by using data from =?Utf-8?B?R1REcml2ZXI=?= ASP .Net 1 02-16-2005 07:04 PM
Error page using the Application_Error void dosnt work when using DIV for a please wait message s_erez@hotmail.com ASP .Net 2 12-24-2004 12:11 PM
no code in webform using vs.net, but in webform using notepad timmso ASP .Net 1 12-12-2003 04:30 PM
Using GetOleDbSchemaTable to get SQL Server Field Description - using pete ASP .Net 1 08-29-2003 10:50 AM
Re: MVP? Index error on nested element using System.xml but NOT using msxml??? William F. Robertson, Jr. ASP .Net 1 06-25-2003 08:08 PM



Advertisments