Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie Karten-Tags und Gebiets-Tags
So verwenden Sie Karten-Tags und Gebiets-Tags
- php中世界最好的语言Original
- 2018-03-19 09:20:112988Durchsuche
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!