Alt Attribute

Well, I'll be damned. You're right. I've never noticed this because I've always followed an implicit practice of using title text in my alt.

Now I know why.

The title attribute will normally override the alt in IE.

If only the alt is used IE will display its contents as a tooltip.
<img src="foo.jpg" alt="foo"> : tooltip=[foo]

If title is used, even empty, IE will show it instead.
<img src="foo.jpg" alt="foo" title="pic of a foo"> : tooltip=[pic of a foo]
<img src="foo.jpg" alt="foo" title=""> : no tooltip.

The title attribute will normally override the alt in IE.

If only the alt is used IE will display its contents as a tooltip.
<img src="foo.jpg" alt="foo"> : tooltip=[foo]

If title is used, even empty, IE will show it instead.
<img src="foo.jpg" alt="foo" title="pic of a foo"> : tooltip=[pic of a foo]
<img src="foo.jpg" alt="foo" title=""> : no tooltip.

The one I tested with (and, I suspect, the one p1r was talking about) was this:

<a title="surrounding anchor" href="#"><img src="images/banner.gif" alt="inner image" /></a>

IE Displays "inner image." Everything else displays "surrounding anchor."

The one I tested with (and, I suspect, the one p1r was talking about) was this:

That would be correct. It breaks an important usability feature.

P.S. It has actually been like this for as long as I can remember. I thought they might fix it in IE7, but they did not.

pageoneresults: sure wish you'd posted example code so I could have kept my foot out of my mouth. Thanks cmarshall for the clarification.

I have wandered back through my templates to see why that split title/alt situation never caught my attention before. Apparently I have never split the two.

My x-browser conflict list thanks you both for the 'new' member.

iamlost, don't worry about it. This is something that few usually delve into. Heck, my mouth is large enough to insert both feet. ;)

<a title="Description of Link Destination" href="/widgets/file.htm"><img src="/widgets/images/file.gif" alt="Description of Widget Image" /></a>

There are two functions occurring above. One describes the destination of the link (title=""). The other describes the content of the image (alt="").

When you have an image that is linked like the above, it is good practice to describe the linked destination and the image separately. They normally would not be the same which is what most will do, replicate their alt attribute in the title attribute.

One describes the image, the other describes the destination of the link.

These are both usability and accessibility features that go beyond the standard misuse of these two attributes. ;)

What surprised me and took some checking was that I haven't linked an image (or conversely added an image to a link) directly in the HTML for several years, rather only included it via CSS background. Thus that particular IE feature was not encountered in contrast with other browsers.

I had not realised how long since I made that transition. The older I get the faster time goes by. Oh how I miss those school summer vacations that seemed to last forever...

That's pretty much the same for me. I always use block-display anchors with background-images.

I always use block-display anchors with background-images.

You lose the power of the linked image and alt attribute when using background images.

7.4.3 The title attribute
Attribute definitions

title = text [CS]
This attribute offers advisory information about the element for which it is set.
Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute.

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

...some text...
Here's a photo of
<A href="http://someplace.com/neatstuff.gif" title="Me scuba diving">
me scuba diving last summer
</A>
...some more text...

The title attribute has an additional role when used with the LINK element to designate an external style sheet. Please consult the section on links and style sheets for details.

Note. To improve the quality of speech synthesis for cases handled poorly by standard techniques, future versions of HTML may include an attribute for encoding phonemic and prosodic information.

[w3.org...]

If this doesn't help... or if I screwed-up... sticky me.

I agree that there is great power in images.

However, I believe that in most (all?) anchor-link situations an image is an enhancement, not a necessity. The text must be there, an image may be there. So if I add an image it is delivered as a CSS decorative background.

If an image is an informational necessity (as in one image = 1000 words) it resides appropriately in content with a visible caption.

I prefer using a <dl> with the <dt> holding the image plus appropriate title and alt attributes and the <dd> the caption plus link (uaually with title) if required. A matter of personal preference.

I detest uncaptioned information images - tabbing or hovering to learn concealed truth is a pain. And I like my links visible and obvious - mousing about in search of concealed links is silly. Really a matter of Accessibility and Usability.

It is also a matter of ease of substition. I find it easier to program containers.
And ease of noting copyright - have you noticed how few sites do so?

Without changing your markup for those pesky linked images ...

<a title="Description of Link Destination" href="/widgets/file.htm"><img src="/widgets/images/file.gif" alt="Description of Widget Image"></a> 
<!--[if lte IE 7]> 
<script type="text/javascript"> 
  img = document.images; 
  for(i = 0; i < img.length; i++) { 
    elem = document.images[i]; 
    if(elem.title == '' && elem.parentNode.tagName == 'A') { 
      elem.title = elem.parentNode.title; 
    } 
  } 
</script> 
<![endif]-->

In IE only -- if you have an image without an explicit title attribute, it will use that of the surrounding link.