Core HTML

Lesson 21: Image Maps

Overview

In this HTML lesson, we demonstrate how to use image maps to link to other images and HTML documents. Image maps allow us to link a region within an image to another image or an HTML document. This is done via the map and area elements. We can even link to other documents with image maps and link back via an image map. There are several different shapes that we can use to to specify links with an image map, and we can use multiple areas within one image map to link to different images or documents.

A Simple Image Map

To create an image map, we begin with an image and add the attribute usemap to it to specify the map of the image map that we are going to use, preceeded by a pound (#) sign. Elsewhere, we need to have a map element with its name attribute set to the value specified by the prior usemap. Within the map element, we add area elements that define regions of the image that become links to objects.

The area element contans all of the link information. It has a shape that specifies the type of shape that is used for the link; in this case, it is a circle. It also has a coords attribute to define the shape. In the case of a circle, the coords attribute uses three numbers to specify the x and y of the center and the radius. The area element, like the image element, has an href attribute to specify the linked object and an alt attribute to define what is displayed, if the object is not available.

This document has an image map that defines a circle around the Sun that God has created. If we hover the mouse over the Sun, we will see the linked object specified at the bottom of the page. We can see the circle by left-clicking the Sun without releasing the button. That circle links to an image of the Sun, which we see by releasing the mouse button. The circle is defined in image pixel coordinates with the origin specified as the upper-left corner.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="CreationOfSun_Bertram.png" alt="Creation of the Sun" usemap="#sun">
	<map name="sun">
	  <area shape="circle" coords="100,115,95" alt="The Sun" href="Sun.png">
    </map>
  </body>
</html>
 

Output

 

Linking to HTML Documents

This example has an image of Christ carrying his cross that is called "The Vale of Tears." We have defined a circular image map around Christ that links to our next example document.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="TheValeOfTears_Dore.png" alt="The Vale of Tears" usemap="#cross">
	<map name="cross">
	  <area shape="circle" coords="200,115,85" alt="Christ on the Cross" href="Example3.html">
    </map>
  </body>
</html>
 

Output

 

Rectangles in Image Maps

Here, we have an image of the crucifixion with two rectangles defined as the image map. The two rectangles are defined around each beam of the cross. Each of these rectangle links back to our last example document. The rectangles are specified with the coords attribute by two pairs of numbers that define the upper-left and lower-right corners of each rectangle.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="ChristOnTheCross_Bonnat.png" alt="Christ on the Cross" usemap="#vale">
	<map name="vale">
	  <area shape="rect" coords="5,65,445,125" alt="The Vale of Tears" href="Example2.html">
	  <area shape="rect" coords="195,2,255,590" alt="The Vale of Tears" href="Example2.html">
    </map>
  </body>
</html>
 

Output

 

Using Polygons

This is exactly like our last example, except that the two rectangles have been replaced by a single polygon that the goes around the outline of the cross. Polygons are specified in the coords attribute by pairs of numbers that define each vertex. This polygon uses 12 pairs of points to define the outline of the cross.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="ChristOnTheCross_Bonnat.png" alt="Christ on the Cross" usemap="#vale">
	<map name="vale">
	  <area shape="polygon" coords="5,65, 5,125, 195,125, 195,590,
	    255,590, 255,125, 445,125, 445,65, 255,65, 255,2, 195,2, 195,65"
	    alt="The Vale of Tears" href="Example2.html">
    </map>
  </body>
</html>
 

Output

 

The Default Shape

This example is like the last two, except that the shape is defined as default, which means that the entire image is used for the link. This is the fourth possible value for shape: circle, rectangle, polygon, and default.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="ChristOnTheCross_Bonnat.png" alt="Christ on the Cross" usemap="#vale">
	<map name="vale">
	  <area shape="default" alt="The Vale of Tears" href="Example2.html">
    </map>
  </body>
</html>
 

Output

 

Multiple Links

For this last example, we have an image of the Coronation, with the Trinity and Mary in it. We have defined four links in the map, one for each of the persons of Trinity and one for Mary. Three of these are polygons and one is a circle. All of them are links to images. Hold down the left mouse button to see each of the regions.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="CoronationOfTheVirgin_Velazquez.png" alt="Coronation" usemap="#persons">
	<map name="persons">
	  <area shape="polygon" coords="265,175, 475,200, 375,50" alt="Father"
	    href="Creation_Michelangelo.png">
	  <area shape="polygon" coords="10,200, 150,200, 145,125, 160,75, 135,50, 35,120" alt="Son"
	    href="TheTransfigurationOfOurLord_Carracci.png">
	  <area shape="circle" coords="235,75,60" alt="Holy Spirit"
	    href="Pentecost_Titian.png">
	  <area shape="polygon" coords="110,400, 230,180, 255,180, 360,400" alt="Mary"
	    href="The AssumptionOfTheVirgin_Poussin.png">
    </map>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.