免費(fèi)AI編程助手
JavaScript 圖像映射
2018-09-28 18:04 更新
圖像映射
您可以使用 JavaScript 來(lái)創(chuàng)建客戶端的圖像映射。 usemap 啟用客戶端圖像映射的屬性定義的 <img /> 標(biāo)記和特殊的 <map> 和 <area> 擴(kuò)展標(biāo)簽。
一般情況下，用 <map> 將形成映射的圖像插入到頁(yè)面，此外它帶有一個(gè)額外的屬性稱(chēng)為 usemap 。usemap 屬性的值是<map> element 上的 name 屬性的值。
<map> 元素實(shí)際上創(chuàng)建的地圖圖片，通常遵循后直接 <img /> 元素。它為<area /> element充當(dāng)一個(gè)容器，<area /> element 用于定義可點(diǎn)擊的熱點(diǎn)。<map> element只有一個(gè)屬性，即名稱(chēng)屬性，用于標(biāo)識(shí)映射。這就是為什么 <img /> 元素知道使用哪個(gè) <map> element。
<area> 元素指定坐標(biāo)定義邊界的形狀和每一個(gè)可點(diǎn)擊的熱點(diǎn)。
當(dāng)鼠標(biāo)移動(dòng)到圖像的不同部分時(shí)，以下結(jié)合 imagemap 和 JavaScript 在一個(gè)文本框里面產(chǎn)生一個(gè)消息。
<html>
<head>
<title>Using JavaScript Image Map</title>
<script type="text/javascript">
<!--
function showTutorial(name){
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="text" name="stage" size="20" />
</form>
<!-- Create Mappings -->
<img src="/attachments/image/wk/wkjavascript/usemap.gif" alt="HTML Map"
border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm" alt="Perl Tutorial"
target="_self"
onMouseOver="showTutorial('perl')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="/html/index.htm" alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="/php/index.htm" alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：