如何创建图像映射

在以往经验里我提到了“创建图像映射时像素的点坐标该如何确定”，今天在此恰好能够用上了，它将帮助我们实现“如何创建图像映射”。所谓的图像映射就是指在某一幅图片中，我们能够引用其中的部分，并对这一部分加以注释说明，来看看这一功能在代码中是如何实现的吧。

工具/原料

HTML编辑器

方法/步骤

一、把所要引用的图片，用代码语言插入进来，例如：

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

<img src="http://ww1.sinaimg.cn/bmiddle/d2cfdec1jw1ei8yib56t1j20gt0cyabm.jpg" ismap alt="书香一缕"/>

</a>

这段代码的作用就是帮助我们确定图片中像素的点坐标，如图所示：

二、利用这些像素点的返回值，我们就可以在这张图片中圈定指定的范围，链接到我们想要的说明了，比如：圆形、矩形、三角形这三个区域，分别要实现的链接文字是“书香一缕”、“导航栏”、“城堡”，那利用的代码指令就分别是：circle、rect、poly。

三、这段代码该怎么编写呢，现提供范本如下，供读者检验：

<img src="http://ww1.sinaimg.cn/bmiddle/d2cfdec1jw1ei8yib56t1j20gt0cyabm.jpg" usemap="#雪" alt="雪域"/>

<map name="雪" id="雪">

<area shape="circle" coords="168,48,36" href="http://user.qzone.qq.com/314402846/main" target="_blank" alt="书香一缕"/>

<area shape="rect" coords="110,102,436,128" href="http://user.qzone.qq.com/314402846/main" target="_blank" alt="导航栏"/>

<area shape="poly" coords="319,219,401,273,265,273" href="http://user.qzone.qq.com/314402846/main" target="_blank" alt="城堡"/>

</map>

看看这些灰色线条圈起的区域，是不是实现了指定性描述，觉得有用，就给个赞吧，谢谢您的阅读！

注意事项

查看时注意浏览器的版本，有的浏览器不支持查阅功能。