关于如何在图片上加热点链接

来源:互联网 发布:淘宝网靠谱的茶叶店 编辑:程序博客网 时间:2024/03/28 21:02

        可能你在项目中会遇到需要在图片上模块区域加个链接,点击以后可以转向一个页面;下面方法可以帮你解决问题。

这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。
     <img src="图片Url地址" usemap="#图的名称">
     <map name="图的名称">
      <area shape="形状" coords="区域座标列表" href="URL">
       <!--可根据需要定义多少个热点区域-->
       <area shape="形状" coords="区域座标列表" href="URL">
     </map>
1、shape -- 定义热点形状
          shape = rect     :矩形
          shape = circle  :圆形
          shape = poly    : 多边形

2、coords -- 定义区域点的坐标
     a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
         例:<area shape=rect coords=100,50,200,100 href="URL">
     b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
         例:<area shape=circle coords=100,100,50 href="URL">
     c.任意图形(多边形):将图形之每一转折点座标依序填入
         例:<area shape=poly coords="123,455,653,455,121,..." href="URL">

例子代码:

<img src="chinaMap.jpg" width="200" height="500" border="0" usemap="#chinaMap" /><map name="chinaMap" id="chinaMap">    <area shape="rect" coords="10,50,150,100" href="http://www.baidu.com" onFocus="this.blur()"/>    <area shape="rect" coords="10,110,150,160" href="http://www.baidu.com" />    <area shape="rect" coords="10,170,150,220" href="http://www.baidu.com" />    <area shape="rect" coords="10,230,150,280" href="http://www.baidu.com" />    <!--<area shape="rect" coords="10,300,150,480" href="test.html" target="pcs"/> -->    <!-- onFocus="this.blur()"   去掉虚线框 --></map>