Regular Expressions:

HTML:

Add a title property to images using FrontPage Find and Replace with regular expressions

Introduction

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.

1. With your website open in FrontPage, launch Find and Replace (Ctrl+H).
2. Click the HTML Tags tab. We are going to use every option it provides:
3. Find tag = img
4. Click the HTML Rules button.
5. Click "New rule..."
6. In the dropdown boxes, select With attribute > alt > Equals
7. In the box that says [any value], enter: {.*}
   This is a regular expression that also means "any value", but putting it inside braces stores its value into a variable so we can use it later. FrontPage doesn't mention that you can use regular expressions at this location; I discovered it by accident.
8. In the box at the top, again click New rule...
9. Select Without attribute > title
10. Click OK.
    Summary: we have specified that we want to find any <img> tag that has an alt property but no title property.
11. Replace action = Set attribute value.
12. Attribute = title
13. To = \1
    This is another regular expression. It means insert the value of the variable we saved earlier with {.*}. FrontPage doesn't mention that you can use regular expressions here, either. I discovered this by accident, too.
14. Find Where = All Pages (or Current page if you're just testing)
15. Direction = All
16. Check the Regular Expressions box.
17. Uncheck all the other options in the Advanced column.
18. Click Replace All (or Find Next if you're just testing in an open page)

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.

<img> tags, Internet Explorer vs. 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 something.">
<img src="images/thumbs/picturesmall.jpg"
alt="Picture of something."
title="Picture of something."></a>

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.

<a href="images/picture.jpg" title="Picture of something.">
<img src="images/thumbs/picturesmall.jpg"
alt="Picture of something."></a>

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:

<a href="images/picture.jpg" title="Picture of something.">
<img src="images/thumbs/picturesmall.jpg"></a>

Questions, comments, assistance in the Forum.