Qu'est-ce que la balise de carte HTML ? Explication détaillée de la structure et de l'utilisation spécifique de la balise html map

Qu'est-ce que la balise html map ? Quelle est la structure et l’utilisation spécifique de la balise html map ? L'article suivant vous indique principalement la signification de la balise html map et quelques explications sur les attributs de la balise html map, ainsi que l'utilisation spécifique de la balise html map.

Voyons d'abord ce qu'est la balise html map :

balise html map  : définit un mappage d'image côté client. La carte-image fait référence à une image avec des zones cliquables.

Définir la carte :

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

la balise map définit la carte, la balise de zone définit les points chauds cliquables, les attributs de la zone

forme : définit la forme du point chaud, paramètre facultatif rectangle (rectangle) ; , cercle (cercle), polygone (forme personnalisée).

coordonnées : définissez le chemin de la forme ;

Lorsque shape=rect, les quatre nombres sont : point de départ X, point de départ Y, point final X, point final Y

Lorsque shape= Lorsque cercle, les trois nombres sont : point central X, point central Y, rayon

Lorsque shape=poligon, plusieurs points de chemin peuvent être définis, dans l'ordre : point de départ 1Y, chemin 2X, chemin 2Y ...

href définit l'adresse sur laquelle cliquer pour accéder.

attributs requis de la balise de carte html :

id : unique_name : Définissez un nom unique pour la balise de carte.

Attributs facultatifs de la balise html map :

name : mapname : Le nom spécifié pour l'image-map.

La structure de la balise map en HTML :

1 Les coordonnées correspondantes des coordonnées n'ont pas besoin d'être modifiées, il suffit de changer la proportion en JS et ce sera le cas. ça va!

<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. S'il y a plusieurs images, une image correspond à une carte et la classe n'a pas besoin d'être modifiée. Changez simplement la valeur du nom de la carte et la valeur usemap correspondante. name=usemap Ils forment une paire de CP, ne les séparez pas, donnez-leur la même valeur. La balise

<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>

html

est utilisé comme suit :

<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>

l'attribut usemap obtient les informations sur l'étiquette

Remarque : les éléments de zone sont toujours imbriqués à l'intérieur des éléments de la carte. L'élément de zone définit une zone dans la zone cliquable.

Remarque : L'attribut usemap dans peut faire référence à l'attribut id ou name dans

【Recommandations associées】

Que signifie la balise HTML5 Explication détaillée de l'utilisation de base de la balise HTML5

Que signifie la zone de texte HTML ? Comment obtenir des nouvelles lignes et des espaces dans les balises textarea ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!