img usemap-Attribut China-Karte link_HTML/Xhtml_Webseitenproduktion-HTML-Tutorial-php.cn

img usemap-Attribut China-Karte link_HTML/Xhtml_Webseitenproduktion

WBOY

Freigeben： 2016-05-16 16:42:54

Original

2558 Leute haben es durchsucht

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