本文介绍了如何使用HTML的area标签在图片上设置链接，实现图片的局部点击事件。通过示例代码展示了如何定义shape（矩形或圆形）和坐标，以及处理图片自适应浏览器宽度时遇到的问题，如背景图导致的点击事件失效和坐标改变等。
一张图片的静态页！如果你不会切图做静态页，那么就用一张效果图来实现吧！
一、area标签实现图片局部点击事件
原理：在图片上设置链接的area标签，产生图片的局部点击事件效果~
<img id="img1" src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />相当于效果图
<map name="planetmap" id="planetmap">效果图中需要被点击的区域集合
<area shape="circle" coords="180,139,14" href ="1.html" alt="点我，第一步" />可点击区域定义<area shape="circle" coords="129,161,10" href ="2.html" alt="点我，第二步" />可点击区域定义
<area shape="rect" coords="0,0,110,260" href ="3.html" alt="点我，最后一步" />可点击区域定义
最低0.47元/天 解锁文章
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
