Using an <img> in an <hx>

Discussion in 'HTML' started by e n | c k m a, Jun 5, 2004.

  1. 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.
     
    e n | c k m a, Jun 5, 2004
    #1
    1. Advertising

  2. "e n | c k m a" <> 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
     
    Jukka K. Korpela, Jun 5, 2004
    #2
    1. Advertising

  3. > - 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.
     
    e n | c k m a, Jun 5, 2004
    #3
  4. e n | c k m a

    PeterMcC Guest

    e n | c k m a wrote in
    <oxdwc.6656$>

    >> - 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.
     
    PeterMcC, Jun 5, 2004
    #4
  5. e n | c k m a

    Nick Howes Guest

    "e n | c k m a" <> wrote in message
    news:eek:xdwc.6656$...
    > > - 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
     
    Nick Howes, Jun 8, 2004
    #5
  6. e n | c k m a

    Nick Howes Guest

    "Nick Howes" <> wrote in message
    news:ca58lg$ss4$...
    > "e n | c k m a" <> wrote in message
    > news:eek:xdwc.6656$...
    > > > - 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
     
    Nick Howes, Jun 8, 2004
    #6
  7. e n | c k m a

    Mark Parnell Guest

    On Tue, 8 Jun 2004 21:50:07 +0100, Nick Howes <>
    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
     
    Mark Parnell, Jun 9, 2004
    #7
  8. Mark Parnell wrote:
    > On Tue, 8 Jun 2004 21:50:07 +0100, Nick Howes <>
    > 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/revised-image-replacement/

    --
    Mvh Magnus Haugsand
     
    Magnus Haugsand, Jun 9, 2004
    #8
  9. e n | c k m a

    Steve Pugh Guest

    Magnus Haugsand <> 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/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

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

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 9, 2004
    #9
  10. > 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.
     
    e n | c k m a, Jun 9, 2004
    #10
  11. e n | c k m a

    Kris Guest

    In article <ca58p0$st9$>,
    "Nick Howes" <> wrote:

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


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

    --
    Kris
    <> (nl)
     
    Kris, Jun 13, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sklett

    using DataBinder in <img>

    sklett, Dec 20, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    462
    Hermit Dave
    Dec 20, 2003
  2. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    517
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  3. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    774
    David Håsäther
    Jul 3, 2005
  4. Jopek
    Replies:
    7
    Views:
    408
    dorayme
    Apr 26, 2009
  5. Replies:
    7
    Views:
    185
    Tad McClellan
    Jun 22, 2006
Loading...

Share This Page