图像映射map+area小案例——点击所选区域后跳转

在学习了图像映射后，下面做个小例子加深对所学的理解。

思路：在一张图片上，点击对应的人像后跳转到相应页面，运用map+area实现，常用于地图点击后跳转。

最终效果如下：

点击大雄后会产生一个矩形框，并跳转到相应单人页面；

点击哆啦A梦后会产生一个圆形框，会重新打开一个新的页面显示。

将大雄和哆啦A梦的单人图片分别放入对应的HTML中，coords里的值可以通过截图工具得到。
代码如下所示：

<img src="img/Am.png" usemap="#pic" alt="合照"/><map name="pic"><area shape="circle" coords="400,130,105" href="m.html" alt="哆啦A梦" target="_blank"/><area shape="rect" coords="100,55,225,150" href="Dx.html"  alt="大雄"/>map>

知识点：

• coords属性规定所在区域的x和y的坐标，常常与shape配合使用表示所在区域的形状大小。
• 有三种表示方法：矩形rect、圆形circle、多边形poly
• 矩形coords=“100,55,225,150” 表示的坐标分别是左上角和右下角
• 圆形coords=“400,130,105” 前两个表示圆心坐标，第三个表示半径
• 多边形则需要更多数量的点，在列表的结尾不需要重复第一个坐标，多边形会自动封闭。

欢迎和我交流前端方面的知识，一起学习与进步。
希望本文对你有帮助哟！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！