Hotspots

We had already seen how to create a link for a picture.

But we can also distribute this image in different links.

These are called hotspots.

Each hotspot has its own link.

For example, in the image below I have a photograph with a map of the Benelux in the index page.
Each country has its own page in the sitemap.
For each country in Benelux, I want a link to their page

To do this select the first image in the index page.
When this is selected, three character tools and a pointer tool appear in the Properties window.
The first drawing tool is the “Rectangular Hotspot”.
The second drawing tool is the “Oval hotspot”.
And the third drawing tool is the “Polygon hotspot”.

Select the Rectangular Hotspot drawing tool and click and drag over the image in the document. To link this to a page, select the hotspot, click and drag with the “Point to file” button to the document you want to link to this hotspot.

 

Do the same when you want to draw an oval hotspot.

or a polygonal hotspot, select the drawing tool and click the various points in the image. Each time you click, a selection handle (block) is added.

We use the black arrow to move the hotspot or by clicking and dragging the selection handles on the edge of the hotspot.
A second way to move your hotspot to select it and click on the arrow keys on your keyboard.

To add the second hotspot, you need to de-select the first hotspot. Otherwise, Dreamweaver thinks that you’re still busy with the first.

In the “Map”, you give a name to the hotspot.
In the “Alt” you give a description of that portion of the image.

 

Click the F12 button to view your page in Browser.

 

Insert named anchor

A named anchor is a link to a specific location on a page.

For example, this link

“go back to top”

is a named anchor link.

We can add named anchors at any place in the page, even in another page.

A named anchor link consists of two parts.

The first part is the place in your page where you want to insert the named anchor to link and the second is a link to this named anchor.

To add a named anchor you first place the cursor in the document where you want the named anchor.

Click the “Named Anchor” button in the “General” tab of the “Insert” toolbar.

This opens a dialog window where we give this named anchor a name.
Click the OK button.
The first part is already done.

Now the second part.

 

Select the text or image in your document where you want to make the link.

Click and drag the “Point to file” to the newly installed named anchor.
When this anchor is in a location in the document that is not visible, hold the cursor down with the “Point to file” and move almost to the edge of the document.

The page will automatically begin scrolling.

When you’ve come to the named anchor release the mouse button.

The notation of a named anchor link is still the anchor name preceded by a pound sign (#)

If you do not want to use the “Point to file”, you can simply type a pound plus the name of the anchor in the “Link”. This name must be typed correctly, otherwise the browser can not find it.

If you wish to link to a named anchor on another page, type the page, followed by the pound sign and the name of the named anchor. for instance TV.html#LCD

A second way to create a link to an anchor is the “Hyperlink” button in the “General” tab of the “Insert” toolbar.
This opens a dialog where you can, by click the downward pointing arrow next to the “link” box, link all anchors used in this page.

 

E-mail Link

The last link I am going to discuss is an E-mail link.

 

If any of you do not know what an E-mail link is, when the link is clicked, the default email program installed on the computer of your visitor is invoked.

We can add an e-mail link in a number of different ways.

whichever way you do it, I mean add the e-mail link, the first thing you should do is to select the image or text in your document where you want to add the link.

One way is to select the “E-mail link” on the “General” tab in the “Insert” toolbar.
This opens the dialog box, E-mail link. What did you think?
In the top box, the text that was selected in the document has already been completed.Type the email address in the bottom box.
Click the Ok button.
That is all.

Now, when you open the code view you can see that a link to an email address is placed in a tag. And that the e-mail address is preceded by “mailto:”.
Remember this, if you want to enter your e-mail link in a third way in the future.

A second way of adding an e-mail link is, as always, first selecting the text and clicking on the “Insert” button in the menu bar and selecting E-mail link in the drop-down menu. This opens the same dialog box as in the first way.

The third and final way is through the text mailto: followed by typing the email address in the “link” of the Properties window.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats