XHTML | HTML to XHTML

Image Maps

An image map is used to define clickable areas of an image. As mentioned in the Getting Started section of this tutorial, for image maps you need software that at least can get the x,y coordinates of a point within an image. For this tutorial, I will provide the coordinates needed to build the image map for the solar system page.

There are two types of image maps that can be defined, a server-side image map and a client-side image map. This tutorial deals only with client-side image maps, as those will not create extra calls to the server when the user clicks on the image.

The `map` Tag

An client-side image map definition is created by using the map tag. This tag will give the image map a name, and contain the individual area tags that define the clickable areas. For our image map, we will specify the name solarsysmap. The name attribute and the id attribute both need to be specified with the value you wish to name the map. XHTML requires the id attribute, but the name attribute should also be coded since not all browsers will use the id attribute to identify the map.

Normally map elements are positioned right above the img element the image map is for. This isn't required -- for example, if you had numerous image maps on one page, you may wish to group the map elements together to find them easier in your source.

Like the img tag, an image map is an inline element and must be contained within another element. Since the image of the solar system is already contained with the generic div container, you can just put the image map in the same div element.

<div>
  <map name="solarsysmap" id="solarsysmap">
  </map>
  <img src="images/solarsys.jpg" 
   alt="Welcome to the Solar System" 
   title="Welcome to the Solar System" />
</div>

The `area` Tag

If developing a website in earnest, it is a good idea to create "placeholder pages" for those pages you intend to create but have not yet marked up. This will allow you to still specify working links, even if the contents of the destination page is something like "Under Construction". When you actually create the contents of the page, you won't have to go back and update your links to that page.

For the solar system image, we wish to define clickable areas for the sun, each of the planets, and the comet. In the image below, I have outlined the clickable areas to define in yellow:

There are three basic shapes that can be used to define a clickable area -- rectangles, circles and polygons. For this image map, we have a rectangle (containing the comet), circles (containing each planet, except for Neptune), and two polygons (for Neptune and the Sun). The polygon shape is used for Neptune since Uranus slightly overlaps Neptune in the image.

The area tag is used to define these areas. For each area, we need to specify a shape, URL and coordinates. In order to show tooltips over each area as the mouse hovers over the image, alternate text and title should also be provided.

Let us assume we have pages marked up for each of the planets, with the filenames planetname.html in the same directory as the main solar system page. The sun's page can be named sun.html and the page for comets and other bodies in the solar system can be named other.html.

The shape of the clickable area is given using the shape attribute. The valid values that can be given for this attribute are rect (the default if no shape attribute is given), circle and poly. As with the a tag, URL is given using the href attribute. Alternate text and titles are given using the alt and title attributes, as shown when introducing the img tag. The alt attribute is required in XHTML.

At this point, we can code the area tags with everything except the coordinates:

<map name="solarsysmap" id="solarsysmap">
  <area shape="poly" href="sun.html"
   alt="Visit the Sun Page" title="Visit the Sun Page" />
  <area shape="circle" href="mercury.html"
   alt="Visit the Mercury Page" title="Visit the Mercury Page" />
  <area shape="circle" href="venus.html"
   alt="Visit the Venus Page" title="Visit the Venus Page" />
  <area shape="circle" href="earth.html"
   alt="Visit the Earth Page" title="Visit the Earth Page" />
  <area shape="circle" href="mars.html"
   alt="Visit the Mars Page" title="Visit the Mars Page" />
  <area shape="circle" href="jupiter.html"
   alt="Visit the Jupiter Page" title="Visit the Jupiter Page" />
  <area shape="circle" href="saturn.html"
   alt="Visit the Saturn Page" title="Visit the Saturn Page" />
  <area shape="circle" href="uranus.html"
   alt="Visit the Uranus Page" title="Visit the Uranus Page" />
  <area shape="poly" href="neptune.html"
   alt="Visit the Neptune Page" title="Visit the Neptune Page" />
  <area shape="circle" href="pluto.html"
   alt="Visit the Pluto Page" title="Visit the Pluto Page" />
  <area shape="rect" href="other.html"
   alt="Visit the Comets and Other Bodies Page"
   title="Visit the Comets and Other Bodies Page" />
</map>

Area Coordinates

Without defining coordinates for each clickable area, the area tags are useless. Coordinates are specified using the coords attribute in the area tag.

Coordinates are relative to the top left corner of the image, and can be given in terms of pixels or percentages. For this tutorial, we will be using pixels.

Polygons

The first area tag is for the sun, which uses a polygon (poly) shape. To "draw" the polygon shape, it is necessary to give the coordinates for each corner point in the polygon. For the sun area, the polygon shape has five points, as shown in the image below:

These points have the following x, y coordinates in the solar system image:

299, 174 (bottom right corner)
299, 24 (top right point)
254, 71 (first descending left point)
232, 117 (second descending left point)
224, 174 (bottom left corner)

To add these coordinates to the area tag for the sun, just make a list in a "drawing order", moving from point to point along the polygon shape, using the coords attribute:

<area shape="poly" coords="299, 174, 299, 24, 254, 71,
 232, 117, 224, 174" href="sun.html" alt="Visit the Sun Page"
 title="Visit the Sun Page" />

Note that it is not necessary to "close" the polygon by giving the point of origin again at the end. That should be handled automatically.

Neptune's clickable area is also defined as a polygon shape:

<area shape="poly" coords="47, 58, 56, 55, 62, 48, 62, 39,
 54, 31, 43, 31, 35, 39" href="neptune.html"
 alt="Visit the Neptune Page"
 title="Visit the Neptune Page" />

Circles

A circle's coordinates are given using the x, y point of the center of the circle, followed by the radius. In the diagram below, the blue dot in the middle of the circle is the location we need the x, y coordinate for; the radius is represented by the line with the arrowheads.

For the Mercury clickable area, the center of the planet in the picture is at x, y coordinates 208, 138. The radius of Mercury's circle is 8 pixels. So the area tag for Mercury would look like this:

<area shape="circle" coords="208, 138, 8" href="mercury.html"
 alt="Visit the Mercury Page" title="Visit the Mercury Page" />

The remaining coordinates needed for the rest of the planets that use circle areas are given in the following table for you to add the coords attribute for those areas in the XHTML document.

Planet	Center Point (x,y)	Radius in Pixels
Venus	208, 75	15
Earth	164, 99	23
Mars	151, 152	23
Jupiter	92, 69	35
Saturn	156, 37	23
Uranus	31, 65	16
Pluto	28, 13	4

Rectangles

The final area element that we need to specify the coordinates for is the clickable comet area, which has a rectangle (rect) shape. A rectangle needs two pairs of x,y coordinates -- the first for the top left corner of the rectangle, the second for the bottom right corner of the rectangle. The rectangle coordinates for the comet clickable area are 24, 139 for the top left corner and 72, 162 for the bottom right corner.

So the area tag for the comet clickable area would look like this:

<area shape="rect" coords="24, 139, 72, 162"
 href="other.html" alt="Visit the Comets and Other Bodies Page"
 title="Visit the Comets and Other Bodies Page" />

The `usemap` Attribute for the `img` Tag

The image map has been defined, but in order for the map to be used, we need to add the usemap attribute for the img element the map is for. The value for the usemap attribute should be the value of the name attribute for the corresponding map element, preceded by a #. In our case, the value for the usemap attribute is #solarsysmap, so we need to code the img element to look like this:

<img id="solarSystem" src="images/SolarSystem/solarsys.jpg" 
 alt="Welcome to the Solar System"
 title="Welcome to the Solar System" usemap="#solarsysmap" />

Once you've coded that attribute, the image now serves as a hyperlink. Most browsers will now render a border around the image on the updated page.

At this point, we are almost done with the main solar system page. There remains a few finishing touches, however. First, we need to provide an alternate means of navigation to the individual planet, sun and other bodies pages. If a user does not have images turned on, or is using a text-based browser, there will have no way to navigate to the individual pages. So next we will add a simple navigation bar to the page as part of the finishing touches.

Next Chapter - Finishing Touches