Was ist das HTML-Map-Tag? Detaillierte Erläuterung der Struktur und spezifischen Verwendung des HTML-Map-Tags

Was ist das HTML-Map-Tag? Wie ist die Struktur und spezifische Verwendung des HTML-Map-Tags? Im folgenden Artikel erfahren Sie hauptsächlich die Bedeutung des HTML-Map-Tags und einige Erläuterungen zu den Attributen des HTML-Map-Tags sowie die spezifische Verwendung des HTML-Map-Tags.

Schauen wir uns zunächst an, was das HTML-Map-Tag ist:

HTML-Map-Tag : Definiert eine clientseitige Bildzuordnung. Image-Map bezieht sich auf ein Bild mit anklickbaren Bereichen.

Karte definieren:

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

Karten-Tag definiert Karte, Bereichs-Tag definiert anklickbare Hotspots, Bereichsattribute;

Form: definiert Hotspot-Form, optionaler Parameter Rechteck (Rechteck), Kreis (Kreis), Polygon (benutzerdefinierte Form).

Koordinaten: Definieren Sie den Formpfad;

Wenn Form=Rechteck, sind die vier Zahlen: Startpunkt X, Startpunkt Y, Endpunkt X, Endpunkt Y

Wenn Form= Wenn Kreis, sind die drei Zahlen: Mittelpunkt ...

href definiert die Adresse, zu der geklickt werden soll, um zu springen.

id: unique_name: Definieren Sie einen eindeutigen Namen für das Karten-Tag.

Name: Kartenname: Der für image-map angegebene Name.

1. Die entsprechenden Koordinaten müssen nicht geändert werden, ändern Sie einfach die Proportionen in JS und schon wird es sei in Ordnung!

<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. Wenn mehrere Bilder vorhanden sind, entspricht ein Bild einer Karte und die Klasse muss nicht geändert werden. Ändern Sie einfach den Namenswert der Karte und den entsprechenden Usemap-Wert. name=usemap Sie sind ein CP-Paar, trennen Sie sie nicht, geben Sie ihnen den gleichen Wert.

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

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