HTML Tutorial

<map> Tag in HTML

The <map> tag is used to define an image map. An image map allows you to define clickable areas on an image, where each area can link to different destinations. The clickable areas are defined using the <area> tag, which specifies the shape and coordinates of each clickable region.

Key Points on <map> Tag:

It defines an image map, which is an image with defined clickable areas.
It works in conjunction with the <area> tag to specify clickable regions.
It is typically used for interactive images, such as maps or diagrams with specific clickable sections.

Syntax of <map> Tag:

Syntax Example

<map name="mapName">
            <area shape="rect" coords="34,44,270,350" href="{{ url_for('render_dynamic_template', template_name='link1') }}" alt="Description" />
            <area shape="circle" coords="370,320,44" href="{{ url_for('render_dynamic_template', template_name='link2') }}" alt="Description" />
        </map>

Examples of <map> Tag Usage:

1. Basic Image Map

Code Example

<img src="image.jpg" usemap="#map1" />
        <map name="map1">
            <area shape="rect" coords="34,44,270,350" href="{{ url_for('render_dynamic_template', template_name='link1') }}" alt="Link1" />
            <area shape="circle" coords="370,320,44" href="{{ url_for('render_dynamic_template', template_name='link2') }}" alt="Link2" />
        </map>

Output:

2. Image Map with Multiple Areas

Code Example

<img src="world_map.jpg" usemap="#worldMap" />
        <map name="worldMap">
            <area shape="rect" coords="0,0,200,200" href="{{ url_for('render_dynamic_template', template_name='usa') }}" alt="USA" />
            <area shape="rect" coords="200,0,400,200" href="{{ url_for('render_dynamic_template', template_name='canada') }}" alt="Canada" />
            <area shape="circle" coords="300,300,50" href="{{ url_for('render_dynamic_template', template_name='brazil') }}" alt="Brazil" />
        </map>

Output:

Attributes of <map> Tag:

name: Specifies the name of the map. This name is used with the usemap attribute of the <img> tag to associate the image with the map.

The <map> tag is most commonly used in conjunction with the <img> tag to make specific parts of an image interactive. The <area> tag defines the clickable regions within the image, where each area can link to a different page or URL.