img usemap attribut carte de Chine link_HTML/Xhtml_production de pages web-tutoriel HTML-php.cn

img usemap attribut carte de Chine link_HTML/Xhtml_production de pages web

WBOY

Libérer： 2016-05-16 16:42:54

original

2558 Les gens l'ont consulté

La balise img du html : définit une image à introduire dans la page web. Il possède également un attribut usemap très intéressant.
Regardez la carte sur la page d'accueil de 51ditu, et il y a une carte de la Chine au milieu. Faites un clic droit pour télécharger et jetez un œil à une image ordinaire.
Mais cliquer sur les provinces sur la carte peut déclencher différents événements (ou ouvrir différents liens), ce qui est très intéressant. Il s'avère que l'attribut usemap est utilisé.
Bien sûr, vous devez également définir une balise map. L'intégralité du code est la suivante :

<html>
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap attribut</title>
≪/tête>
  
<corps>
       
    <img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
       
    <nom de la carte="Carte" class="mazone">
        <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('Mongolie intérieure')">
        <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('Macao')">
        <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')">
    </carte>
</corps>
</html>

Astuce : Vous pouvez modifier une partie du code avant d'exécuter
map タグ内の area タグのいくつかの属性の意味については、http://www.w3school.com.cn/tags/tag_area.asp を参照してください。

書き留めておくことをお勧めします。ここの領域の形状属性。長方形、円、多角形があります。 coords 属性には特に注意してください。これは、shape と組み合わせて使用する必要があります。画像の左上隅の座標は「0,0」です。