Archive for August, 2002

Friday, August 16th, 2002

Styling alt text

I saw this post today on the <a href="http://www.webaim.org/">webaim</a> discussion list:

"Can you change the size of the text in which that the alt-text appears?" i.e. if you assign alt text to an IMG, and you hover over the image and view the text, is there ANY other way to increase the size of this text!? i.e. style sheets, etc."

Now that got me thinking. As far as I know, there’s no way of changing the display of the tooltip text when you hover over the image, other than directly within Windows (can’t vouch for Mac) - and that would apply to all tooltips, not specific images.

You could, of course, devise some kind of DHTML solution whereby you could call a function that displays the text in a new absolutely positioned floating div, but that’s a bit kludgy.

My argument, though is that if the image is present, there’s no need for the tooltip. Netscape 6 and Mozilla agree - no tooltip appears if the image is present. After all, why describe the image if the image describes itself? Also, assuming that the person browsing is visually imparied, they are more likely to have set Windows to display bigger tooltips anyway.

Nevertheless, there is a solution to the problem raised, or at least similar. You can change the attributes of the alt text for missing images. So, for Netscape 6/Mozilla 1 you can use a CSS level 2 property to affect the appearance of the font when images are either disabled or missing.

Here’s the code:

&lt;style&gt;
img[alt]
{
font-size:large;
color:#000066;
}
&lt;/style&gt;

Now try dropping that in to a web page, then break the image src path to give a broken image in Netscape 6/Mozilla 1. You’ll see big navy text where normally you’d expect small black text. Alternatively, if you’re running either of those browsers now, you should see the effect here:

Image deliberately missing to show alt attribute behaviour in Netscape 6 and Mozilla 1

Although the majority of browsers don’t support it now, they surely will at some point - so put it in your CSS and wait for it to magically switch on!

Thursday, August 15th, 2002

Friday, August 2nd, 2002