Page 7: Using Image Maps to Make Hyperlinks

Image Maps

Web pages are written using a markup language called HTML (hypertext markup language). HTML files are plain text files, which makes them easy to send over the internet. GoLive insulates the web-author from having to deal directly with the HTML code, however, GoLive does provide the option of editing the HTML code directly. This is done by clicking on the Source tab located at the top of the GoLive editor window:

Selecting the Source tab reveals the HTML code for a web page and allows you to edit it:

One of the disadvantages of a markup language is that it does not contain the actual image of the file that is to be displayed by a browser, but instead contains instructions that tells a browser how to display the file's content. Not all browsers agree on how on how to interpret the HTML language. For example, If you wish to use some fancy font to display some text:

A browser may interpret this to look like this, if the fancy font is not installed on the computer on which the browser is installed:

To avert this problem you should stick to using the more common fonts, such as Times, Arial, Courier, Symbol, et. al. If you wish to use fancy fonts or wish to have a very well defined layout that won't be missinterpreted by a browser, there is a solution. You can use graphics files that have been created by a graphics program, such as Adobe PhotoShop, and saved as a gif or .jpg file. including graphics files in web pages was discussed on page 1. An example of how this might be done is shown on the home page for this site, which displays this image:

When the curser is placed over the text for each of the pages and clicked, the browser is sent to a different page. On page 1, we discussed how to create hyperlinks to either text or whole images, but not to subregions of an image. To this requres the use of Image Maps.

To create an image map:

After inserting the graphic image (either .gif or .jpg) onto a web page, select it to activate the Inspector palette for that image.
Select the More tab on the Inspector palette:
On the More page of the Inspector palette is a checkbox labeled Use Map:, clicking on the checkbox will create an clickable image map for the selected image. GoLive will suggest a default name for the image map; just go with the suggestion.
After checking the Use Map checkbox, the GoLive toolbar will change to reveal the image map tools:
Use the tools on the left create clickable areas on your image. Depending on which of the view option buttons are selected, the clickable area will look something like what is shown below. When viewed in a browser the areas will not be visable, however the cursor will change from an arrow to a fingered hand when placed over a clickable area.
When an area is selected, the Inspector palette will change to allow you to create a hyperlink to this area and to set a target for where the new web page should be displayed:

The navigation bar shown below was created using an image map: