Maison >interface Web >tutoriel HTML >img usemap attribut carte de Chine link_HTML/Xhtml_production de pages web

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

WBOYoriginal: 2016-05-16 16:42:542555parcourir

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」です。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprentissage des standards du Web Comprendre la séparation entre la structure et les performances_HTML/Xhtml_Production de pages WebArticle suivant：Apprentissage des standards du Web Comprendre la séparation entre la structure et les performances_HTML/Xhtml_Production de pages Web

Articles Liés

Voir plus