ACOM: Web Design Tutorial Site

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 the USEMAP attribute, 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.

Back to the top

Back to the menu for lesson 7