HTML and CSS Reference
In-Depth Information
using image Maps
In Lesson 10, you saw how you could create a link from a single image. With image maps, it's
possible to incorporate multiple links with just one image. What's more, these links can be vir-
tually any shape: a rectangle, a circle, or a polygon. In this lesson, you learn how to add this
valuable functionality to your designer's palette.
rea inG an iMaGe MaP
To create an HTML image map, you need three separate but related pieces of code. First, a
standard <img> tag is required to represent the image itself. There is one addition to the tradi-
tional <img> tag: a usemap attribute. For example,
<img src=”usa.gif” width=”637” height=”399” alt=”USA map” usemap=”#usa”>
The usemap attribute value must have a leading number sign, for example, #usa , and refers
to an attribute found in the second code chunk, the <map> tag. The <map> tag is a simple one,
with just the name attribute:
<map name=”usa”>
Note that in the <map> tag, the name value, which corresponds to the <img> tag's usemap
value, does not have a leading number sign.
Within the <map> tag is the final component of an image map, one or more <area> tags. Each
<area> tag has all the attributes necessary to create a linked region of the image. Here's a
typical <area> tag:
<area shape=”poly” coords=”87,162,95,236,157,231,147,153” href=”Wyoming.html”
alt=”Wyoming” title=”Wyoming”>
Search WWH ::

Custom Search