首页 > Web开发 > 详细

使用html area标签在图片上设置链接

时间:2015-05-27 23:00:33      阅读:481      评论:0      收藏:0      [点我收藏+]
一张图片的静态页!如果你不会切图做静态页,那么就用一张效果图来实现吧!


原理:在图片上设置链接的area标签,产生图片的局部点击事件效果~

<img 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="点我,最后一步" />可点击区域定义

</map>


参数说明:

shape:可点击区域形状

1)rect:矩形。

2)circle:圆形。

coords:可点击区域坐标

1)当shape是矩形时,此值是4个坐标值,前两个为坐上坐标(x,y),后两个为右下坐标

2)当shape是圆形时,此值是3个坐标值,前两个为圆形的坐标,最后一个为半径。

usemap:使用哪个map的区域点击事件

这里介绍的是html4中area标签属性,可能html5中有区别


参考:http://www.w3school.com.cn/tags/tag_area.asp

使用html area标签在图片上设置链接

原文:http://blog.csdn.net/aya19880214/article/details/46050459

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!