Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: ergophobe

Message Too Old, No Replies

Alt Attribute

Display on Hover...

     
10:36 pm on Feb 14, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


Microsoft, you have it wrong! The alt attribute is not supposed to display on hover. You are the only browser that does this (I believe).

I have an image that is linked and I need to provide a title attribute so that it displays as a tool tip on hover. Because you, Microsoft, display the alt attribute on hover, my tool tips don't work. :(

11:56 pm on Feb 14, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


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.

11:59 pm on Feb 14, 2007 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2003
posts:889
votes: 58


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.

12:35 am on Feb 15, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


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

1:32 am on Feb 15, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


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.

5:05 pm on Feb 18, 2007 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2003
posts:889
votes: 58


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.

6:37 pm on Feb 18, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


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

10:17 pm on Feb 18, 2007 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2003
posts:889
votes: 58


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

10:52 pm on Feb 18, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


That's pretty much the same for me. I always use block-display anchors with background-images.
10:58 pm on Feb 18, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts: 12166
votes: 51


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

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

11:39 pm on Feb 18, 2007 (gmt 0)

Senior Member

joined:May 21, 2002
posts:762
votes: 0


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.

2:02 am on Feb 19, 2007 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2003
posts:889
votes: 58


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?

8:50 pm on Mar 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


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.