JS图像映射的应用，在一个图片点击或移动到不同位置有不同响应

最新推荐文章于 2024-01-30 10:55:59 发布

木木老蔫

最新推荐文章于 2024-01-30 10:55:59 发布

阅读量2.2k

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

使用上面的图片，命名为ying.jpg。

代码如下：

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="ying.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="rect" coords="38,80,95,118" οnmοuseοver="writeText('起点坐标为(38,80)和终点坐标为(95,118)的红色矩形区域。')"
href="#" target="_blank" alt="rect_red" />
<area shape="rect" coords="38,210,95,248" οnmοuseοver="writeText('起点坐标为(38,210)和终点坐标为(95,248)的绿色矩形区域。')"
href="#" target="_blank" alt="rect_green" />
<area shape="circle" coords="310,100,50" οnmοuseοver="writeText('原点为(310,100)和半径为50的黄色圆形区域')"
href="#" target="_blank" alt="circle_yellow" />
<area shape="circle" coords="310,205,55" οnmοuseοver="writeText('原点为(310,205和半径为55的紫色圆形区域')"
href="#" target="_blank" alt="circle_purple" />
</map>
<p id="desc">
</p>
</body>
</html>