Images and Mappings
In this lesson we will study images in relation to mappings. Let's begin!
We'll cover the following...
In the previous chapter, you learned how you can turn your images into links by surrounding an <img>
tag with an <a>
tag. Images provide another great feature, the ability to define a number of hot-spots, each of them having a link of its own.
For example, you can display a color picker image where each separate color is a hot-spot, and when the user clicks any of them, you’ll use the link to pick up the appropriate color.
Another example is a map of the world, where you use each country as a hot-spot to show related sales information.
To achieve this behavior, you need to define a map and assign it to an image, as shown in this markup snippet:
<img src="myimage.png" usemap="#mymap" /><map name="mymap"><area ... /><area ... /><!-- More area tags --><area ... /></map>
The <map>
tag embeds one or ...