Rumah >hujung hadapan web >html tutorial >img usemap atribut China map link_HTML/Xhtml_web page production

img usemap atribut China map link_HTML/Xhtml_web page production

WBOYasal: 2016-05-16 16:42:542555semak imbas

Teg img html: mentakrifkan imej yang akan diperkenalkan dalam halaman web. Ia juga mempunyai atribut usemap yang sangat menarik.
Lihat peta di laman utama 51ditu, dan terdapat peta China di tengah. Klik kanan untuk memuat turun dan lihat gambar biasa.
Tetapi mengklik pada wilayah pada peta boleh mencetuskan acara yang berbeza (atau membuka pautan yang berbeza), yang sangat menarik. Ternyata atribut usemap digunakan.
Sudah tentu anda juga perlu menentukan tag peta. Keseluruhan kod adalah seperti berikut:

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

Petua: Anda boleh mengubah suai sebahagian daripada kod sebelum menjalankan
Informationen zur Bedeutung mehrerer Attribute des Bereichs-Tags im Karten-Tag finden Sie unter: http://www.w3school.com.cn/tags/tag_area.asp

Es ist besser, sich das zu notieren Formattribut der Fläche, das optional ist. Es gibt Rechtecke, Kreise und Polygone. Besonderes Augenmerk sollte auf das Attribut coords gelegt werden, das in Verbindung mit der Form verwendet werden muss. Die Koordinaten der oberen linken Ecke des Bildes sind „0,0“.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pembelajaran Standard Web Memahami Pemisahan Struktur dan Prestasi_HTML/Xhtml_Penghasilan Halaman WebArtikel seterusnya：Pembelajaran Standard Web Memahami Pemisahan Struktur dan Prestasi_HTML/Xhtml_Penghasilan Halaman Web

Artikel berkaitan

Lihat lagi