您可以使用JavaScript创建客户端图像映射。 客户端图像映射由<img />标签的usemap属性启用,并由特殊的<map>和<area>扩展标签定义。
将正常使用<img />元素将要形成Map的图像插入页面中,只是它带有一个称为usemap的额外属性。 usemap属性的值是您将要遇到的<map>元素上的name属性的值,其后带有井号。
<area>元素指定定义每个可单击热点的边界的形状和坐标。
当鼠标移到图像的不同部分上时,以下代码将图像映射和JavaScript结合在一起以在文本框中生成一条消息。
<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="/images/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>
运行上面代码输出
参考链接
https://www.learnfk.com/javascript/javascript-image-map.html