html图像映射

最新推荐文章于 2025-04-13 13:30:00 发布

weixin_30498921

最新推荐文章于 2025-04-13 13:30:00 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mkl7/p/10860650.html

本文深入讲解客户端和服务器端图像映射技术，包括HTML标签<img>、<map>、<area>的使用，以及属性如usemap、shape、coords、href、name、id和ismap的详细解释。通过实例展示了如何创建交互式的图像区域，实现不同区域跳转至特定页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端图像映射：

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

服务器段图像映射：

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

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

<img src="被设置为图像映射的图片" usemap="map标签的name或者id（加上#)" alt="" />

<map name="图像映射名" id="图像映射名">
  <area shape="circle" coords="180,139,14" href ="链接1" alt="" />
  <area shape="rect" coords="129,161,220,350" href ="链接2" alt="" />
  <area shape="poly" coords="0,0,110,260,...,450,578" href ="链接3" alt="" />
</map>

说明：

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

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

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

说明：

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

转载于:https://www.cnblogs.com/mkl7/p/10860650.html