Welcome to WebmasterWorld Guest from 54.196.47.145
Forum Moderators: ergophobe
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. :(
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.
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.
<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. ;)
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...
joined:May 21, 2002
posts:762
votes: 0
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.
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?
<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.