What is the html map tag? Detailed explanation of the structure and specific usage of the html map tag

html What is the map tag? What is the structure and specific usage of the html map tag? The following article mainly tells you the meaning of the html map tag and some explanations of the attributes of the html map tag, as well as the specific usage of the html map tag.

First let's take a look at what the html map tag is:

html map tag : Define a client image mapping. Image-map refers to an image with clickable areas.

Define map:

<map id="im_map" name="im_map">
<area shape="rect" coords="0,0,100,100" href="url.html" />
</map>

The map tag defines the map, the area tag defines the clickable hotspot, area attribute;

shape: defines the hotspot shape, optional parameter rect (rectangle ), circle (circle), poligon (custom shape).

coords: Define the shape path;

When shape=rect, the four numbers are: starting point X, starting point Y, end point X, end point Y

When shape= When circle, the three numbers are: center point X, center point Y, radius

When shape=poligon, multiple path points can be defined, in order: starting point 1Y, path 2X, path 2Y...

href defines the address to click to jump to.

html map tag required attributes:

id: unique_name: Define a unique name for the map tag.

html Optional attributes of the map tag:

name: mapname: The name specified for image-map.

The structure of the map tag in HTML:

1. The corresponding coordinates of coords do not need to be changed, just change the proportion in JS and it will be OK!

<div class="map_img">
     <img class="mapImg lazy"  src="/static/imghwm/default1.png"  data-src="isphoto/abc.png"   usemap="mapName"  alt=""   style="max-width:90%">
     <map name="mapName">
        <!-- 方形区域写法 -->
        <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" alt=""/> -->
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
    </map>
</div>

2. If there are multiple pictures, one picture corresponds to one map, and the class does not need to be changed. Just change the name value of the map and the corresponding usemap value. name=usemap They are a pair of CPs, don't separate them, give them the same value.

<div class="map_img">
    <img class="mapImg lazy"  src="/static/imghwm/default1.png"  data-src="isphoto/abc.png"   usemap="mapName"  alt=""   style="max-width:90%">
    <map name="mapName">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
     </map>
    <!-- 一张图片对应一个name和usemap -->
    <img class="mapImg lazy"  src="/static/imghwm/default1.png"  data-src="isphoto/abc.png"   usemap="mapName2"  alt=""   style="max-width:90%">
     <map name="mapName2">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;第二张图的汽车图标&#39;);" alt=""/>
     </map>
</div>

html

Usage is as follows:

<img src ="planets.gif" alt="无法显示此图像" usemap ="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />
</map>

The usemap attribute obtains the

Note: area elements are always nested inside map elements. The area element defines an area in the image map.

Note: The usemap attribute in can reference the id or name attribute in

【Related recommendations】

What does the HTML5 tag mean? Detailed explanation of the basic usage of HTML5 tag

html What does textarea mean? How to get newlines and spaces in textarea tags?

The above is the detailed content of What is the html map tag? Detailed explanation of the structure and specific usage of the html map tag. For more information, please follow other related articles on the PHP Chinese website!