« Office Decor | Main | The Return of the King leaks »
January 08, 2003
For Dave, listed by the Michelin guide as three stars
I said:
The answer to the little text box question is... the TITLE attribute.And Dave says:
[IMG SRC="filename.jpg" ALT="Text for browsers without inline graphics" TITLE="Displays in a text box when mouse hovers over image"]
That's not altogether correct. The IMG ALT tag will, in fact, create a tool tip style window with its text (as well as text when there's no in-line graphic). Certainly it does with IE of various Windows flavors. I can't find a source that identifies an IMG TITLE tag.There *is* an A TITLE tag, which is what you use when coding text links. Thus:
[A HREF="blah.html" TITLE="The Great Blah File"]click here for blah[/a]
Creates a link "click here for blah" that will put up a little window with "The Great Blah File" over it when you hover.
However ...
... doing a little experimenting, I find that IMG TITLE does indeed work, and it overrides a IMG ALT. However, if you don't have an IMG TITLE, then IMG ALT will work, too. In other words:
[IMG SRC="blah.jpg" ALT="alt text" TITLE="title text"]
will produce a little window "title text" when you hover over the image. But ...
[IMG SRC="blah.jpg" ALT="alt text"]
will produce a little window "alt text" when you hover over the image.
Maybe that's an WinIE specific implementation ("I'm shocked!"), but that's what works on this end.
Since the ALT tag is valuable for cases where an image doesn't load for some reason, or while waiting for it to load, *my* suggestion would be to go ahead and just use that, rather than duplicating the info in a TITLE tag.
Now, if only you had your comments working, I could put this there ... :-)
*** Dave
Here you go, Dave, complaint about my comments code and all. Now for the response:
I started with ALTs in a lot of graphics on the page I was working on, but none of them would show up in any of the browsers that I had on my Mac. Unfortunately, all of my desktop PCs are packed up and I don't really intend to unpack them in the near future, so I couldn't check it in a Windows environment. The TITLEs do work on a Mac, though, so perhaps running both is the most complete solution.
As for the comments... I'm working on converting over to MovableType, but I'm having trouble with getting the page layout to do what I want it to do consistently across browsers when using DIV tags and CSS. Right now, I have something that looks about right in IE, but they all wrap incorrectly in Opera or Chimera (Navigator). Try out http://www.cthb.org/dev/ with different browsers to see what I mean.
Updated 2003.01.08 22:33 - Added further comments on the subject from Mike.
The following comes from Mike, who has worked extensively on browser development at a programming level:
ALT is to be used for descriptive text that takes the place of the image when it's not available. For decorative graphics like bullets or separators, that may be a single character ("*") or nothing at all.TITLE is to be used for more information about the element over which you're hovering, such as details about the link you'll follow if you click, or the image that the thumbnail will bring up. Standards-conformant browsers will almost universally display tooltips for TITLE, rather than ALT, because ALT and the image should be equivalent -- no need to display both, then -- and because TITLE applies to more than just IMG tags.
You shouldn't use the same thing in an ALT attribute that you'd use in a TITLE. TITLE complements the element, ALT is an alternative for images (and a very small number of other, similar elements).
Some rather old browsers (IE4, perhaps, and NS4 for sure) won't display a tooltip for TITLE, because they suck.
The TITLE attribute is specified as part of HTML4, though there are better descriptions of the ALT-vs-TITLE issues around.
Posted by KinCross at January 8, 2003 04:20 PM