時間：2023-07-23 02:24:01 | 來源：網(wǎng)站運營
時間：2023-07-23 02:24:01 來源：網(wǎng)站運營
HTML5創(chuàng)建熱點區(qū)域：
在線咨詢
<a>標(biāo)簽加上鏈接地址就行了。這次，介紹個如何用HTML5創(chuàng)建熱點區(qū)域。有時，我們在瀏覽網(wǎng)頁的時候會發(fā)現(xiàn)，當(dāng)我們單擊一張圖片的不同區(qū)域的時候會顯示不同的鏈接內(nèi)容，這就是所謂的圖片熱點區(qū)域。其實也就是把一個圖片劃分成若干個鏈接區(qū)域。訪問者單擊不同的區(qū)域會跳轉(zhuǎn)到不同的目標(biāo)頁面。創(chuàng)建熱點區(qū)域
用Dreamwear精確定位熱點區(qū)域。
<map>和<area>，其語法格式如下：1<img src="圖片地址" usemap="#名稱" >2<map id="#名稱">3 <area shape="rect" coords="10,10,100,100" href="#" >4 <area shape="circle" coords="120,120,50" href="#" >5 <area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">6</map>在上面的語法中請注意以下幾點：usemap屬性，說明該圖像是熱點區(qū)映射圖像，而且必須以#開頭。<map>標(biāo)記只有一個屬性id，其作用是為區(qū)域命名，屬性值必須與<img>標(biāo)記的usemap的屬性值相同。<area>標(biāo)記主要定義熱點區(qū)域的形狀與超鏈接，它有三個相同的屬性:1.shape屬性，控制劃分區(qū)域的形狀，其值有3個，分別為rect（矩形）、circle（圓形）、poly（多邊形）。
2.coords屬性，控制區(qū)域劃分的坐標(biāo)。
shape屬性取值為rect，那么coords的設(shè)置分別為矩形的左上角x，y坐標(biāo)點和右下角x，y坐標(biāo)點，單位為像素。shape屬性取值為circle，那么coords的設(shè)置分別為圓形圓心的x，y坐標(biāo)點和半徑點值，單位為像素。shape屬性取值為poly，那么coords的設(shè)置分別為多邊形的各個點x，y坐標(biāo)點，單位為像素。href屬性是為設(shè)置超鏈接的目標(biāo)，設(shè)置值為#時，表示空超鏈接。Dreamwear精確定位熱點區(qū)域。Dreamwear來實現(xiàn)。shape屬性為矩形、圓形和多邊形來實現(xiàn)點擊不同的區(qū)域跳轉(zhuǎn)到相應(yīng)的區(qū)域。href屬性的值，就可以鏈接到相應(yīng)的位置。1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>創(chuàng)建熱點區(qū)域</title> 6</head> 7<body> 8<img src="04.png" alt="" width="1055" height="665" usemap="#Map" border="0"/> 9<map name="Map">10 <area shape="rect" coords="131,86,330,286" href="h2.html" target="_blank">11 <area shape="circle" coords="530,187,91" href="h3.html" target="_blank">12 <area shape="rect" coords="726,92,937,289" href="h4.html">13 <area shape="poly" coords="865,382,915,428,916,518,875,567,786,570,733,523,738,430,771,388" href="h5.html">14 <area shape="rect" coords="131,381,325,573" href="h6.html" target="_self">15 <area shape="circle" coords="523,478,92" href="h7.html" target="_self">16</map>17</body>18</html>最后還是希望各位能多去動手寫寫。關(guān)鍵詞：區(qū)域,創(chuàng)建
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
