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" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
     <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" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
    <map name="mapName">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" alt=""/>
     </map>
    <!-- 一张图片对应一个name和usemap -->
    <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style="width: 450px">
     <map name="mapName2">
         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;第二张图的汽车图标&#39;);" alt=""/>
     </map>
</div>

htmldab9f699790ab0922e596ecb9f6677d5 tag is commonly used to add a hyperlink to a certain area of ​​an image!

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 dab9f699790ab0922e596ecb9f6677d5 label information, the 03fc64e1e502d5ba947b3a9af06d2d2a label defines a link area, the shape attribute defines the area shape, and the coords attribute defines the link area. The starting point coordinates and the end point coordinates

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

Note: The usemap attribute in a1f02c36ba31691bcfe87b2722de723b can reference the id or name attribute in dab9f699790ab0922e596ecb9f6677d5 (depending on the browser), so we should add both id and name attributes to dab9f699790ab0922e596ecb9f6677d5.

【Related recommendations】

What does the HTML56ecb87e5318a36c03c59e25d55f43372 tag mean? Detailed explanation of the basic usage of HTML56ecb87e5318a36c03c59e25d55f43372 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!