8.3. Image mapping
What image maps are
An image map is an electronic image that has been divided into different sections using hotspots. Hotspots are normally used as hyperlinks. So if you click on an area that has been marked as a hotspot, this will, for example, open another document.
Each image map has got a name, which is noted in the html source of the web page. It is possible that a web page contains more than one image map. In this case it is necessary that each image map has got its own unique name.
How to create an image map
In the following example we shall create an image map. The image we will be using is a screen shot of Dreamweaver's Site menu. We will link options within the Site menu to relevant explanations within this material. It you follow the links, please note that they will open in a separate Window.
To create the image, you will need Fireworks or any other graphics program. We have already produced the image. If you would like to use it to create an image map, you can download our image by following this link.
- Select Image from the Insert menu, or click the image icon from the Common section of the Insert Panel Group.
- Select your image from the Select Image Source dialogue box and click OK
- Type a short description of your image into the whit area next to Alt in the Properties Panel Group. If you take a look at the html-code Dreamweaver has generated (using either the code view or the combined code and design view), the image tag will look similar to this:
<img src="images/83_map.jpg" alt="Dreamweaver MX: Site menu" width="257" height="259" border="0">Any information that appears between inverted commas will be details of your image and may differ from our example.
- Make sure the Properties Panel Group is expanded and displays all options. It should look similar to this:
- Type a name for your image map into the white field next to Map. We have chosen to call our image map "Map".
- At the left-hand bottom corner of the expanded Properties Panel Group you have four icons: Pointer Hotspot Tool, Rectangular Hotspot Tool, Oval Hotspot Tool, and Polygon Hotspot Tool. These are the tools you can use to create a hotspot.
- To create a hotspot on the image of the Dreamweaver Site menu:
- Select the Rectangular Hotspot Tool by clicking on it.
- The first hotspot we want to create will cover the area "New Site...". Move your mouse to where it says "Site Files" on the image. The appearance of your cursor will now change to become a cross.
- Click your left mouse button and keep it clicked while
you move with your mouse over the area of the image for
which you would like to create the hotspot. While you keep
your left mouse button clicked the area you selected will
appear surrounded by a blue border, like this
- Release your mouse button. The selected area will now be covered by a pale blue object, which is the hotspot.
- Now move your mouse to the Properties Panel Group again. This will have changed its appearance and look like this:
- Into the white field next to Link you can insert either an absolute link or a relative link. Delete the hash and type:
- Click the dropdown menu next to Target and
select _blank
- Below is a short explanation of the different options in the Target dropdown menu. We shall explain how frames work in the next chapter.
_blank loads the linked file into a new, unnamed browser window.
_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
_top loads the linked file into the full browser window, thereby removing all frames
- Insert a short and meaningful description into the white field next to Alt
- The content of your Properties Panel Group should now look similar to this:
- Repeat the above steps to create hotspots for the areas Edit Sites, Get and Put on the image. Here are the links you can use for the hotspots:
- Once you have finished, your image should look similar to this:
- Save your web page.
- Below is a copy of the image map you should have created.
-
Look again at the html code of your page to see how the code for the image has changed. If you are not using Dreamweaver while you read through these notes, here is what the html-code for our image map looks like:
http://www.st-andrews.ac.uk/ITS/faq/web/dreamweaver/dw031.shtml
Edit Sites: http://www.st-andrews.ac.uk/ITS/faq/web/dreamweaver/dw042.shtml#423
Get and Put: http://www.st-andrews.ac.uk/ITS/faq/web/dreamweaver/dw041.shtml
<map name="Map" id="Map">
<area shape="rect" coords="7,66,254,84" href="dw031.shtml" target="_blank" alt="New Site">
<area shape="rect" coords="8,85,253,101" href="dw042.shtml#423" target="_blank" alt="Edit Sites">
<area shape="rect" coords="8,108,253,126" href="dw041.shtml" target="_blank" alt="Get">
<area shape="rect" coords="4,143,254,161" href="dw041.shtml" target="_blank" alt="Put">
</map>
Accessibility issues
Please note that image maps are not accessible to all visitors of your web site. It is therefore important that you keep the following points in mind:
- Provide an Alt description for the image as well as for each hotspot.
- We have not done this in our example, but it is important to provide text-based hyperlinks separated by spaces between them in addition to the image map. Though problems with browsers not supporting image maps have now become rare, such links are important for visually impaired visitors to your site as their software will be unable to understand any of the links provided in your image map.
©