Working with Image Maps

Image Maps

Image maps are used to make certain areas of images into links. These areas can be rectangular, circular, or any other poly-sided shape. There can be one or many areas within a single image.

First, we start with an image:

HTML <img src="images/sample.jpg" alt="Sample" />
Output Sample

Say we want to make the square a link. To do this we must first define the map:

HTML <map name="Map" id="Map">
</map>

Next, we're going to define the area that will be click-able within the image:

HTML <map name="map" id="Map">
<area shape="rect" coords="31,80,124,170" href="http://lt.unt.edu" alt="Learning Technologies" />
</map>

The 'shape' attribute tells the browser what general shape this "hotspot" is going to be: in this case, "rect" means we're using a rectangular shape. The 'coords' attribute are the coordinates for the top left, and bottom right corners ((top-left-x,top-left-y),(bottom-right-x,bottom-right-y)), where 0,0 is the top left corner. The 'href' and 'alt' attributes have the same function as on an Anchor tag.

Now, to use the Map with our image, we'll have to add an attribute to our image tag:

HTML <img src="images/sample.jpg" alt="Sample" usemap="#Map"/>
Output Learning Technologies Sample

To make the circle a hotspot, we would add an area to our map:

HTML <map name="map" id="Map">
<area shape="rect" coords="31,80,124,170" href="http://lt.unt.edu" alt="Learning Technologies" />
<area shape="circle" coords="192,255,50" href="http://www.unt.edu" alt="University of North Texas" />
</map>
Output Learning Technologies University of North Texas Sample

The 'shape' for this area is "circle" and the 'coords' attribute now has three values: the X and Y coordinates for the center of the circle, and a measurement for the radius (in pixels).

For a polygonal shape, such as the star, we'll add another area to our map:

HTML <map name="map" id="Map">
<area shape="rect" coords="31,80,124,170" href="http://lt.unt.edu" alt="Learning Technologies" />
<area shape="circle" coords="192,255,50" href="http://www.unt.edu" alt="University of North Texas" />
<area shape="poly" coords="316,59,333,98,374,98,342,128,358,165,323,145,296,163,300,122,274,97,306,92" href="http://www.ci.unt.edu/main/" alt="College of Information" />
</map>
Output Learning Technologies University of North Texas College of Information Sample

The 'shape' for the star is "poly" and the 'coords' are the X and Y values of all the points within the polygonal hotspot.




Content by Vincent Santa Maria.