Heim > Artikel > Web-Frontend > So verwenden Sie Karten-Tags und Gebiets-Tags

So verwenden Sie Karten-Tags und Gebiets-Tags

php中世界最好的语言Original: 2018-03-19 09:20:112915Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Karten-Tags und Bereichs-Tags verwenden. Welche Vorsichtsmaßnahmen gibt es bei Karten-Tags und Bereichs-Tags?

Zweck des Map-Tags: ist an das img-Tag gebunden und wird häufig verwendet, um einem bestimmten Bereich des Clients eine besondere Bedeutung zu verleihen Klicken Sie auf dieses Bild, um zu einem neuen Dokument zu springen.

Da das Karten-Tag an das img-Tag gebunden ist, müssen wir die ID- und Namensattribute zum Karten-Tag hinzufügen, damit das usemap-Attribut im img-Tag Ziehen Sie das id- oder name-Attribut im map-Tag an (aufgrund unterschiedlicher Browser erhält das usemap-Attribut den Wert von einem der beiden, sodass normalerweise sowohl das name- als auch das id-Attribut mit demselben Wert geschrieben werden ) und passen Sie das Bereichs-Tag zur Verwendung an.

Der Beispielcode lautet wie folgt:

<!doctype html>
<html>
    <head></head>
    <body>
        <img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/>
	<map name="province" id="province">
	    <area shape="rect" coords="80,112,110,125"  alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
	    <area shape="rect" coords="77,209,110,229"  alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
	    <area shape="rect" coords="150,176,185,192"  alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
	    <area shape="rect" coords="197,236,235,261"  alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
	    <area shape="rect" coords="170,300,211,325"  alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
	    <area shape="circle" coords="227,200,8"  alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="240,177,5"  alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="285,133,8"  alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	</map>
    </body>
</html>

Der Anzeigeeffekt ist wie folgt:

Wir können sehen, dass es sich um eine Karte handelt. Wenn es nur ein Bild ist, sieht es sehr eintönig aus, daher verwenden wir das Karten-Tag, um den Regionen jeder Provinz eine Bedeutung zu geben. Hier klicke ich auf die Region Xinjiang und gehe zur Baidu-Enzyklopädie von Xinjiang, wie unten gezeigt:

Auf diese Weise können wir direkt Verstehen Sie die Geschichte und Kultur jeder Provinz, und Sie müssen nicht einzeln suchen, was es humaner macht.

Das Bereichs-Tag definiert den Bereich im Bild, dem eine besondere Bedeutung zukommt. Seine Hauptwerte sind Alt, Cooreds, Href, Shape, Target usw.

1. alt-Attribut

Definition: Gibt den Alternativtext des Bereichs an.

Hinweis: Wenn Sie das href-Attribut schreiben, ist das alt-Attribut erforderlich

2. cooreds-Attribut

Definition: Definieren Sie die Koordinaten des relevanten Bereichs

Beschreibung: Wird in Verbindung mit dem Formattribut verwendet

　(1) Wenn das Formattribut rechteckig ist, bedeutet dies, dass der relevante Bereich ein Rechteck ist. Der Wert des Koordinatenattributs lautet (x1, y1, x2, y2), wobei x1, y1 die Koordinaten der oberen linken Ecke sind , und x2, y2 sind die Koordinaten der unteren rechten Ecke; Wert ist (x, y, Radius), wobei x, y die Mittelpunktskoordinaten des Kreises sind, Radius ist der Radius des Kreises

(3) Wenn das Formattribut ist Poly bedeutet, dass der relevante Bereich ein Polygon ist und der Cooreds-Attributwert (x1, y1, x2, y2, x3, y3 ... xn, yn) ist und die Koordinaten jedes Scheitelpunkts des Polygons angibt . Da der Browser das Polygon automatisch schließt, müssen die Schwanzkoordinaten nicht mit der ersten Koordinate übereinstimmen.

3. href-Attribut

Definition: Definiert das mit dem relevanten Bereich verbundene Ziel

Hinweis: Das href-Attribut hat im Allgemeinen drei Werte

(1) Absoluter Pfad: Wird normalerweise verwendet, um auf andere Websites wie (href="https://www .baidu.com)

(2) Relativer Pfad: Wird normalerweise verwendet, um auf eine Datei innerhalb Ihrer eigenen Website zu verweisen, wie zum Beispiel (href="//favicon.ico")

(3) Ankerlink: Wird normalerweise verwendet, um auf den Anker auf der Seite zu verweisen, z. B. (href="#header")

4. Formattribut

Definition: Definiert die Form des relevanten Bereichs

Beschreibung: (1) Standardwert (Standard): Gibt an alle Bereiche

(2) Rechteck: Geben Sie den relevanten Bereich als Rechteck an

(3) Kreis: Geben Sie den relevanten Bereich als Kreis an

(4) Poly: Legen Sie fest, dass der erste geschlossene Bereich ein Polygon ist

5. Zielattribut

Definition: definiert Wo soll der Ziellink geöffnet werden

Beschreibung: (1) _blank: Öffne das verknüpfte Dokument in einem neuen Fenster

(2) _self: Standardmäßig wird das verknüpfte Dokument im selben Frame geöffnet

(3)_parent: Das verknüpfte Dokument wird im übergeordneten Frame-Set geöffnet

(4) _top: Öffne das verknüpfte Dokument im gesamten Fenster

(5) Framename: Öffne das verknüpfte Dokument im angegebenen Frame

Beschreibung: Das Area-Tag kann manchmal als Ersatz für das a-Tag verwendet werden, da das a-Tag das a-Tag nicht direkt verschachteln kann. In einigen Fällen müssen wir es verwenden, dann können wir das a-Tag ersetzen Tag mit dem Bereichs-Tag, um das Layout einfacher zu gestalten.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Was sind die Schritte für Jest, um native Komponenten zu testen?So verwenden Sie die benutzerdefinierte Trimmfunktion von js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Karten-Tags und Gebiets-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine ausführliche Diskussion der Initialisierung im CSS-StilNächster Artikel：Eine ausführliche Diskussion der Initialisierung im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen