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.

Erforderliche Attribute für das HTML-Karten-Tag:

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

Optionale Attribute des HTML-Map-Tags:

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

Die Struktur des Karten-Tags in HTML:

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>

htmldab9f699790ab0922e596ecb9f6677d5-Tag wird oft verwendet, um einen Hyperlink zu einem bestimmten Bereich eines Bildes hinzuzufügen!

wird wie folgt verwendet:

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

usemap-Attribut ruft die dab9f699790ab0922e596ecb9f6677d5-Tag-Informationen ab, 03fc64e1e502d5ba947b3a9af06d2d2a und das Attribut coords definiert den Linkbereich, die Startpunktkoordinaten und die Endpunktkoordinaten.

Hinweis: Bereichselemente sind immer innerhalb von Kartenelementen verschachtelt. Das Flächenelement definiert einen Bereich in der Bildkarte.

Hinweis: Das usemap-Attribut in a1f02c36ba31691bcfe87b2722de723b kann auf das id- oder name-Attribut in dab9f699790ab0922e596ecb9f6677d5 verweisen (je nach Browser), daher sollten wir sowohl id- als auch name-Attribute zu dab9f699790ab0922e596ecb9f6677d5 hinzufügen.

【Verwandte Empfehlungen】

Was bedeutet das HTML56ecb87e5318a36c03c59e25d55f43372-Tag? Detaillierte Erläuterung der grundlegenden Verwendung des HTML5-6ecb87e5318a36c03c59e25d55f43372-Tags

Was bedeutet HTML-Textbereich? Wie bekomme ich Zeilenumbrüche und Leerzeichen in Textarea-Tags?

Das obige ist der detaillierte Inhalt vonWas ist das HTML-Map-Tag? Detaillierte Erläuterung der Struktur und spezifischen Verwendung des HTML-Map-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!