Adding Text & Hotspots to Images

Adding text

The FrontPage "Picture Editor" toolbar comes with a feature that allows you to add text onto an image, or to define different areas on a picture that can be hyperlinked.

We don't recommend using the FrontPage picture editor toolbar to add text onto an image. While it's easy and convenient (and necessary, if you don't have a picture editor like Photoshop), the results are sometimes hard to manage. Behind the scenes, FrontPage is creating a bunch of extra "overlay" images with the text and then creating yet another final image that has the original image combined with the text. These behind-the-scene images sometimes do not publish correctly, and you end up with broken images on your web site. To fix this kind of problem you often have to go into each page on your server and make some changes. Not worth it in our opinion! If we want text on a picture, we'll edit the picture in a program like Photoshop, then put the new picture into our web site without any fuss.

But if you want to learn how to do it in FrontPage, please see the tutorial below! (Read on to find out about "hotspots.")

First, insert your picture into your page as usual. Go to View > Toolbars to make sure that the Pictures toolbar will show up.

Now, click on the picture to select it. The Pictures Toolbar will become active. Click on the "A" button.

If the picture is a jpeg, you may get a dialog box that says:
In order to place text on this picture, it will be converted to gif format. This may reduce the number of colors in the picture and may make the picture file larger.
(Another reason why we don't like to use the picture editor toolbar to add text!) Click OK.

A text area, defined by additional draggable "boxes" (see red arrow below) will appear. Type in your text.

You can highlight the text and change font or color if desired. Note that the text will be "jagged," (aliased) and you can't really do anything about it.

You can click on the edge of the text area and drag it to a different place on the image.

Now, one thing that is pretty cool about the FrontPage picture editor is that you can link the text you added as a "hotspot" (see below for more information about hotspots). To make the text area a link, right-click on the border and choose "Picture Hotspot Properties." The "insert hyperlink" dialog box will appear and you can define where to link it. (For more about links, see the Hyperlink tutorial.)

Picture Hotspots

What FrontPage calls "hotspots" can also be called an "image map." The basic idea behind it is that you can take a picture and define certain areas on the picture that are hyperlinks. FrontPage has a very easy way to help you do this!

Let's take our "intensity" picture (edited in Photoshop so that there is text). We want the user to be able to click on the text to go to one page, and click on the person to go to another page.

Now, click on the "Rectangular Hotspot" button on the Picture toolbar. (You can also use the circle hotspot, or the polygonal hotspot buttons.) Your cursor will turn into a pencil.

Draw a box around the person. When you let go, the Insert Hyperlink dialog box will appear. Choose where the person will link to.

Now, draw another rectangle around the text. Once again, choose where this link will go to.

Save your file. Preview in a browser and test the hotspots!

Next: Insert Hyperlinks.