html图像映射

客户端图像映射:就是在浏览器的一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同的区域时便可以跳转到相应的目标页面。

服务器段图像映射:在浏览器的一幅图上单击鼠标后,光标的相对位置坐标将被发送到服务器。然后服务器会通过一个专用程序来确定要执行的下一个步骤。


 

客户端图像映射涉及到的html标签有:<img>、<map>、<area>,涉及到的属性有:usemap、shape、coords、href、name或id。

给出示例:

1 <img src="被设置为图像映射的图片" usemap="map标签的name或者id(加上#)" alt="" />
2 
3 <map name="图像映射名" id="图像映射名">
4   <area shape="circle" coords="180,139,14" href ="链接1" alt="" />
5   <area shape="rect" coords="129,161,220,350" href ="链接2" alt="" />
6   <area shape="poly" coords="0,0,110,260,...,450,578" href ="链接3" alt="" />
7 </map>

说明:

  1. 在html4中用name设置锚点,在html5中用id设置锚点,为了兼容性考虑最好是都写上。所以usemap的属性值可以使map标签的name或者id,当然,map标签的name属性值和id属性值必须相同
  2. shape属性指示映射的形状:circle圆形、rect矩形、poly多边形
      shape为circle时,coords有三个值,前两个数字表示圆心的坐标,后一个数字表示半径
          shape为rect时,coords有四个值,前两个是矩形左上角的坐标,后两个是右下角的坐标
          shape为poly时,coords为这个多边形每个角的坐标,第一个坐标不必和最后一个坐标相同
  3. area标签必须在map标签内部使用

 

服务器端图像映射涉及的标签有:<a>、<img>,涉及的属性:ismap

代码示例:

1 <a href="demo_form.asp">
2 <img src="tulip.gif" ismap="ismap "/>
3 </a>

说明:

  1. 当用户在 ismap 图像上单击了某处时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。特殊的服务器端软件(在本例中是 demo_form.asp 程序)可以根据这些坐标来做出响应。
  2. 只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时,才允许 ismap 属性。

 

posted @ 2015-04-18 15:07  ahutyaoyj  阅读(3015)  评论(0编辑  收藏  举报
回到顶部