客户端图像映射(img, usemap, map, area)

beyes · 发表于 2016-12-10 03:17:37

在浏览网页时，有时会看到这种效果：在一张图片里，你的鼠标单击其中的某块区域时，会链接到一个页面；当鼠标单击另外一块区域时，又会链接到另一个页面。这种情况，就是“客户端图像映射”（Client Side Image MAP）的使用。

在 <img> 中使用 usemap 属性时，就是要打算使用 “客户端图像映射” 机制。先来点简单的：

<img src="groad.jpg" usemap="#sexy">

上面代码中，#sexy简单的说就是一个值，你可以随意定义一个名字，其中 # 符号固定的（也可以不写这个符号）。

到这里肯定还没完，因为简简单单的写一个名字肯定没法指出图片中的某个区块。这里，又牵连出两个标签，一个是 <map> ，另一个是 <area> 。只有再用这两个标签配合一下，才能达到图像映射的目的。

先说 <map> 标签。
实际上，usename 的属性值用的就是 map 的属性值，要么是 id，要么是 name ，这取决于浏览器，因此最好都写上。实验中发现，map 中就写 name 也是可以的。将上面综合一下，就有：

<img src="groad.jpg" usemap="#sexy">
<map name="sexy" id="sexy">

也可以省略掉 id ，如：

<img src="groad.jpg" usemap="#sexy">
<map name="sexy">

接下来，就要定义图片中的区域了。定义区域肯定要有坐标等参数来指定。这里就开始要用到 <area> 标签了。在这里的实验中，用到 3 个 <area> 的属性，一个是 coords 用来表示坐标；一个是 href 用来在鼠标点击到规划的某个区域上时就跳转到某一个页面；shape 指定区域的形状。

href 指定跳转页面这个自不必说。

shape 定义形状有 3 个，一个是圆形(circ)，一个是多边形(poly)，另一个是矩形（rect）。

接下来看到这次要用到的美女图：

许都同学关心更多的是坐标怎么弄。确实，如果确定不了坐标值，你定义的区域会乱。定义的这些图片的坐标值是以图片的原点为参考点的，这个参考点（0,0）位于图片的左上角。比如我现在要在上图中划分出两块圆形区域，一个位于美女的脸部，一个位于她的臀部。那么我介绍一下一个叫做 FSCapture 的截图工具，里头有屏幕标尺小工具，这个标尺很好用，可以用像素来定义长度。我们只需要拿出标尺，水平和垂直方向分别测量一下美女的脸部和臀部的中心坐标，然后大约估算一下半径（也是像素为单位），那么很快就能确定出要划分出的区域。

于是代码有：

<html>

<body>

<img src="meinv.jpg" usemap="sexy">
<map name="sexy">

<area shape="circle" coords="250,350,150" href="http://www.baidu.com" />

<area shape="circle" coords="550,200,50" href="http://www.sohu.com" />

</body>

</html>

从网上摘抄了一段 coords 属性较为详细的描述：

coords 属性
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
下面列出了每种形状的适当值：
圆形：shape="circle"，coords="x,y,z"：这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."：每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"：第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义举行实际上是定义带有四个顶点的多边形的一种简化方法。

引用说明出处：http://www.nowamagic.net/html/html_MapArea.php

		自动登录	找回密码
密码			立即注册

[HTML] 客户端图像映射(img, usemap, map, area)

本帖子中包含更多资源

浏览过的版块