本文介绍了如何使用HTML的<area>标签创建可点击的图像映射，并通过设置target属性实现点击后在新窗口打开链接。详细讲解了coords属性与shape属性的结合使用，以及<map>标签与<img>标签的usemap属性如何关联，以实现在图片上定义多个可点击区域并进行跳转。
点击图片跳转链接，显示该张图片。
页面效果如下：
从页面上看图片上有三个卫星，每点击一个卫星跳转到另外一个窗口，可以看到原图。
HTML代码：
- 在body里面第一个放p标签，这是包裹上面“请点击图像上的星球，把它们放大。”文字的。
- P标签下放一个img标签，这是存放整张卫星图的。上面卫星图的卫星不是一一放上去的，而是本身就在上面的。至于为什么会有这样的效果呢？下面听我慢慢分享给大家！
- 关于效果问题呢，我们不得不提一下< map>标签，这是一个带有可点击区域的图像映射。
- < map>标签里的<area>标签有一个属性coords与 shape 属性配合使用，来规定区域的尺寸、形状和位置。所以上面卫星的位置是通过coords属性来定位它的x y z轴！
- <area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于shape属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
- <img>标签的usemap 属性与 <map> 元素的 name 或 id 属性相互关联，可以建立 <img> 与 <map> 之间的关系。
让我们一起看看它的代码吧！（注意：代码中红色字体皆为注释）
|
<!doctype html> <html> <meta charset="utf-8"> |
最低0.47元/天 解锁文章
扫一扫
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
