创建图像映射时像素的点坐标该如何确定？

在用html语言创建图像映射时，我们需要确定图像区域中的点坐标，这个该如何实现呢?例如，下图柠檬片所在的圆形区域该怎样界定下来呢?

工具/原料

QQ截图工具

html编程工具

方法/步骤

根据图像映射的原理可知，这是一个圆形区域，只要确定圆心坐标和圆形的半径就行，那（x、y、r）的值该怎么确定呢？

在此提供两种方法：

一、QQ截图工具测量方法

我们在使用QQ工具截图时（ctrl+alt+a），鼠标左键未松开之前，截图窗口的下方都有一个像素点宽度、高度以及RGB的返回值，宽度和高度对应的就是（x、y）的值，而圆心区域的半径可以采用同样的截取方法测量出来。

二、圆形区域利用QQ截图测量还算方便，但当遇上多边形区域时，再一个个截取测量，就会变得麻烦，这时我们采用逆向思维把图像转换成图像映射，就能自动获取到图像中的点坐标了，可以利用以下代码实现。

<a href="http://www.baidu.com/" target="_blank">

<img src="http://ww2.sinaimg.cn/bmiddle/69c7be75jw1ec4tmykr6nj20c807sjrl.jpg" ismap alt="柠檬下午茶">

</a>

之所以图片代码前引用一段url是为了鼠标停留在图片上时，可以在浏览器窗口的状态栏中看到返回值出现的点坐标，如图所示：

小手指点在哪里，对应的就是像素点的纵横坐标值，记下这个值，把它应运到创建图像映射的语法中，就能实现区域取值了，例如获取的坐标值为：x=170 ；y=137 ；r=102 。

我把这段代码写下来，看看我们能够实现的效果：

<img src="http://ww2.sinaimg.cn/bmiddle/69c7be75jw1ec4tmykr6nj20c807sjrl.jpg" usemap="#养生" alt="柠檬下午茶"/>

<map name="养生" id="养生">

<area shape="circle" coords="170,137,102" href="http://baike.baidu.com/subview/7884/5060795.htm" target="_blank" alt="柠檬片"/>

</map>

当指针停留在这片圆形区域里时，会出现“柠檬片”的字样，点击的话就会访问到我们指定的url说明。

注意事项

如果自己的浏览器状态栏不能查看坐标返回值，可以切换到ie浏览器，因为有的浏览器不支持此功能。