HTML - tags - map tag

revision: January 28, 2025

Content

"map" tag and "area" tag : define an image map

The <map> tag is used to define an image map, i.e. an image with clickable areas. An image map allows geometric areas on an image to be associated with hypertext link. The required "name" attribute of the <map> element is associated with the <img>'s "usemap" attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that define the clickable areas in the image map. This element is used only within a <map> element.

Attributes: the <map> element includes the global attributes. The tag also supports this additional attribute:

name ; value: name; required;

specifies the name of the image map.

Attributes: the <area> element includes the global attributes. The tag also supports the following additional attributes:

alt ; value: text;

specifies an alternate text for the area; required if the "href attribute" is present.

coords ; value: coordinates ;

specifies the coordinates of the area.

download ; value: filename;

specifies that the target will be downloaded when a user clicks on the hyperlink.

href ; value: URL ;

specifies the hyperlink target for the area.

hreflang ; value: language_code ;

specifies the language of the target URL.

media ; value: media query;

specifies what media/device the target URL is optimized for.

referrerpolicy ; value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url;

specifies which referrer information to send with the link.

rel ; value: alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag;

specifies the relationship between the current document and the target URL.

shape ; value: default, rect (x1, y1, x2, y2; from top-left to bottom-right), circle (x, y, radius; circle center and radius), poly (x1, y1, x2, y2, . . . xn, yn; coordinates of the edges of the polygon);

specifies the shape of the area.

target ; value: _blank, _parent, _self, _top, framename;

specifies where to open the target URL.

type ; value: media_type ;

specifies the media type of the target URL.

syntax:

        <map name="">
            <area>
            <area>
            <area>
            . . . .. . .
        </map>
    

some examples

Click on the computer, the phone, or the cup of coffee to go to a new page.

code:

                    <div>
                        <img src="../../pics/map.jpg" alt="map" usemap="#workmap" width="400" height="379">
                        <map name="workmap">
                            <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.lwitters.com/coding.php">
                            <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.lwitters.com/blogging.php">
                            <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://lwitters-1.com">
                        </map>
                    </div>
                

code:

                    <div>
                        <img src ="../../pics/image-map-1.png" width="316" height="131" alt="holidays" usemap ="#holy">
                        <map name="holy">
                            <area shape ="rect" coords ="9,10,62,123" href ="https://lwitters.com" alt="square" target="_blank">
                            <area shape ="circle" coords ="126,76,41" href ="https:/lwitters-1.com" target="_blank" alt="Circle">
                            <area shape ="poly" coords ="182,15,218,15,218,95,310,95,310,122,182,122" href ="https:/wikipedia.com"
                            target="_blank" alt="L shape">
                        </map>
                    </div>
                

Other examples

see also "HTML-10-image maps.html" under tutorials, and "images-map" under topics.