Adding Text & Hotspots to Images
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
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.
a browser and test the hotspots!
Next: Insert Hyperlinks.