the <map> tag

It's almost not worth giving this tag a separate page, but I'll do so if only to separate it out from the more important <area> tag and therefore avoid confusion, well, hopefully anyway.

The <map> and </map> tags - and you do need the closing tag in this case - tell the browser where a particular image map (description of a "transparency") begin and end. In practice, they act as the container for all necessary <area> tags. <map> only takes one attribute, and it's an obligatory one - name. As in anchor tags, name can take whatever value you like, but avoid words that you know have another meaning in HTML or can be the values of attributes ("yes", for instance). In practice I usually end up calling it by the name of the image to which it refers, minus the extension - but remember what I said at the end of the page on starting with image maps, that two completely different maps could in principle apply to the same image (though not the same occurrence of an image).

To continue building up our example map, then:

<img src="samerica.jpg" alt="A map of South America" height=300 width=218 usemap="#samerica" />

    <map name="samerica">

    [...<area> tags go here...]

    </map>

Do note that although it's general practice to place the <map> immediately following the image to which it refers, there is absolutely no reason at all why this has to be the case. You could put it right at the end of the document (or, indeed, at the beginning) if you wanted to get it out of the way. It's probably more helpful to yourself to keep them in relatively close proximity, however.

Finally, as is always the case when you use name, make sure you get the hashmarks in the right places. When you define a name, you do not need the hashmark. When you refer to that name (in this case, via the usemap attribute), you do need it.

Back to the top

Back to the menu for lesson 7