25 Years of Programming
An open source source for C, C++, OWL, BASIC, MDB, XLS, DOT, and more...
How to use a FrontPage HTML tags Find and Replace with regular expressions to add a title property to images that already have an alt property
Introduction - Internet Explorer and Firefox handle image properties differently
When the mouse pointer hovers over an image on a web page, Internet Explorer and Firefox both try to show popup (tooltip) text containing information about the image.
If the image has an HTML title property, both browsers display that in the popup. Since that is the intended purpose of the title tag, both browsers handle it correctly.
If the title property is missing, Firefox usually doesn't display a popup at all. However, in an attempt to display something useful as a tooltip, IE borrows the alt property (if there is one) and displays that instead. At the end of this article are examples of how IE and Firefox interpret image tags under more complicated circumstances.
The way to make the tooltip / rollover text work properly in both browsers and provide a text alternative when the image itself isn't displayed (the intended function of the alt property) is to give all your images both an alt and a title property.
What can you do if you have hundreds or thousands of existing images that have alt properties but no titles?
A single FrontPage "HTML Tags" Find and Replace operation using regular expressions can add the title property to every image.
Step by step to add a title property to all images
The following instructions are for the final run, when you want to do the replacement on every image tag in your site.
Before doing that, though, test the method on a single open page to make sure it does what you expect.
Before doing the final run, make a backup copy of your entire site, in case something goes wrong.
Watch in amazement as every one of your images gets a new title property that is the same as its existing alt property!
If you found this use of regular expressions entertaining, there is an example in a previous article that gives a more detailed walkthrough of a regex Find and Replace, with explanations of some common regex terms.
Handling of <img> alt and title tags in Internet Explorer and Firefox
For our example, here is some HTML code for a thumbnail image that is used as a hyperlink to a full sized image. Note that in addition to the image's title property, the anchor <a> hyperlink tag can, but usually doesn't, contain its own title property:
1) If the image itself has a title, IE and Firefox both display the title as rollover text, regardless of whether any other properties are also set. The other properties are ignored:
<a href="images/picture.jpg" title="Picture of
2) If the image has an alt but no title, IE displays the alt as a substitute for the title, but Firefox displays the title of the <a> tag as its substitute. However, in this situation the <a> tag rarely has a title, so Firefox usually winds up displaying nothing.
title="Picture of something.">
3) If the image has no alt and no title, both browsers display the <a> tag's title as a last resort. However, the lack of an alt tag for the image makes the code invalid HTML:
title="Picture of something.">
Questions, comments, assistance in the Forum.
Copyright ©2012 Steven Whitney. Last modified Sun 07/29/2012 10:53:08 -0700.