Heim >Web-Frontend >HTML-Tutorial >img usemap-Attribut China-Karte link_HTML/Xhtml_Webseitenproduktion

img usemap-Attribut China-Karte link_HTML/Xhtml_Webseitenproduktion

WBOYOriginal: 2016-05-16 16:42:542553Durchsuche

Das img-Tag von html: definiert ein Bild, das in die Webseite eingefügt werden soll. Es hat auch ein Usemap-Attribut, das sehr interessant ist.
Schauen Sie sich die Karte auf der Homepage von 51ditu an, in der Mitte befindet sich eine Karte von China. Klicken Sie mit der rechten Maustaste, um ein normales Bild herunterzuladen und anzusehen.
Aber das Klicken auf Provinzen auf der Karte kann verschiedene Ereignisse auslösen (oder verschiedene Links öffnen), was sehr interessant ist. Es stellt sich heraus, dass das Usemap-Attribut verwendet wird.
Natürlich müssen Sie auch ein Karten-Tag definieren. Der gesamte Code lautet wie folgt:

<html>
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap-Attribut</title>
</head>
  
<Körper>
       
    <img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
       
    <map name="Map" class="maparea">
        <area shape="rect" coords="73,87,103,104" href="javascript:alert('Xinjiang')">
        <area shape="rect" coords="144,125,173,142" href="javascript:alert('Qinghai')">
        <area shape="rect" coords="84,158,115,175" href="javascript:alert('Tibet')">
        <area shape="rect" coords="220,90,257,105" href="javascript:alert('Inner Mongolia')">
        <area shape="rect" coords="348,45,389,61" href="javascript:alert('Heilongjiang')">
        <area shape="rect" coords="346,68,371,83" href="javascript:alert('Jilin')">
        <area shape="rect" coords="323,84,351,100" href="javascript:alert('Liaoning')">
        <area shape="rect" coords="298,100,326,114" href="javascript:alert('Tianjin')">
        <area shape="rect" coords="288,120,314,136" href="javascript:alert('Shandong')">
        <area shape="rect" coords="268,107,295,121" href="javascript:alert('Hebei')">
        <area shape="rect" coords="207,116,235,130" href="javascript:alert('Ningxia')">
        <area shape="rect" coords="186,162,214,179" href="javascript:alert('Sichuan')">
        <area shape="rect" coords="256,142,281,157" href="javascript:alert('Henan')">
        <area shape="rect" coords="305,144,332,159" href="javascript:alert('Jiangsu')">
        <area shape="rect" coords="320,162,342,177" href="javascript:alert('Shanghai')">
        <area shape="rect" coords="216,168,243,185" href="javascript:alert('Chongqing')">
        <area shape="rect" coords="250,162,277,177" href="javascript:alert('Hubei')">
        <area shape="rect" coords="283,161,308,177" href="javascript:alert('Anhui')">
        <area shape="rect" coords="213,196,239,209" href="javascript:alert('Guizhou')">
        <area shape="rect" coords="243,183,269,198" href="javascript:alert('Hunan')">
        <area shape="rect" coords="273,185,299,200" href="javascript:alert('Jiangxi')">
        <area shape="rect" coords="308,177,334,193" href="javascript:alert('Zhejiang')">
        <area shape="rect" coords="179,210,204,225" href="javascript:alert('Yunnan')">
        <area shape="rect" coords="227,214,252,228" href="javascript:alert('Guangxi')">
        <area shape="rect" coords="231,248,257,263" href="javascript:alert('Hainan')">
        <area shape="rect" coords="292,200,319,214" href="javascript:alert('Fujian')">
        <area shape="rect" coords="259,219,287,231" href="javascript:alert('Guangdong')">
        <area shape="rect" coords="244,231,270,246" href="javascript:alert('Macau')">
        <area shape="rect" coords="276,232,304,248" href="javascript:alert('Hong Kong')">
        <area shape="rect" coords="311,228,338,243" href="javascript:alert('Taiwan')">
        <area shape="rect" coords="272,90,302,107" href="javascript:alert('Beijing')">
        <area shape="rect" coords="196,130,222,145" href="javascript:alert('Gansu')">
        <area shape="rect" coords="246,116,272,130" href="javascript:alert('Shanxi')">
        <area shape="rect" coords="224,136,252,151" href="javascript:alert('Shaanxi')">
    </map>
</body>
</html>

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ausführen
Pour la signification de plusieurs attributs de la balise area dans la balise map, voir : http://www.w3school.com.cn/tags/tag_area.asp

Il est préférable de noter les attribut de forme de la zone ici, qui est facultatif. Il y a des rectangles, des cercles et des polygones. Une attention particulière doit être portée à l'attribut coords, qui doit être utilisé conjointement avec la forme. Les coordonnées du coin supérieur gauche de l'image sont "0,0".

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：Web-Standards lernen Die Trennung von Struktur und Leistung verstehen_HTML/Xhtml_WebseitenproduktionNächster Artikel：Web-Standards lernen Die Trennung von Struktur und Leistung verstehen_HTML/Xhtml_Webseitenproduktion

In Verbindung stehende Artikel

Mehr sehen