Images are used as graphical content on webpages, and an image can also link to a document or another resource. But what if you can use one image to link to many different docments and/or resources?
This tutorial focuses on:
- What is an imagemap?
- The <map> tag
- The <area> tag
- Associate an image with an imagemap
- An entire imagemap
What is an imagemap?
You can set an image to be a link, but what if you can set an image to be multiple links?
An imagemap is an HTML concept which enables you to turn one image into many different links. Each area of the image, specified by a set of coordinates, will be a different link.
The <map> tag
The <map> tag is used to declare the actual image map. This tag contains an name or id attribute which specifies a unique name for the image map.
NOTE: You can also use the name attribute at the same time as the id attribute and give them both the same value. Some browsers read the name attribute, while others read the id attribute, so it is better to use both for browser compatibility.
The <area> tag
The <map> tag by itself only declares an image map, it does not define sets of coordinates for different links. This task is achieved through the use of the <area> tag.
NOTE: The <area> tag has no end tag
NOTE: The <area> tag goes inside the <map> tag
Associating an image with an image map
To associate an image with an image map, include the usemap attribute in the <img> tag of the image you want to become an image map. It should be set with a pound sign ( # ) followed by the name of the imagemap definition to be used (should be same value as that set for the name attribute in the <map> tag). This will create a relationship between an image and the map.
An entire imagemap
Each animal in the image is now a separate link to a different page. Click on any of the animals to read some information about it.
The imagemap is a relatively complex thing. Unlike pieces of text, links, or images, it is an entire structure. Study the example and concepts presented in this tutorial and familiarize yourself with imagemaps.
Remember this outline when you are creating an imagemap:
- Put the image on the page
- Declare an imagemap with the <map> tag and give it a unique ID ( the id attribute) AND name (the name attribute) for browser compatibility.
- Decide how many links the imagemap will contain as well as the shapes and coordinates for the different links
- Once you have that figured out, plot this data using the <area> tag
- Associate the image with the imagemap using the usemap attribute in the <img> tag