如何在一张图片上添加多个不同的链接-定位篇

在上篇文章我介绍过在一张图片上添加多个不同的链接的方法—热点篇，但在图片上不同区域添加不同链接的方法不止只有这一种，今天我介绍另一个方法，CSS图层定位法。

首先，准备一张图片，我还以上次那张图片为例，如图一。

第二步、打开Dreamweaver，新建一个网页。

第三步，按照图片的大小制作一个div，让它的定位属性为“相对”，目的是将它作为其它链接区域的坐标，要注意的是，图片不是插入到div中的，而是以背景图的方式出现的。然后利用CSS定位方法将链接定位在“软件样样通”区域位置上。

开始定位链接图层之前，测量一下，“软件样样通”的链接区域离图片左上角的X、Y坐标分别是多少像素。我测得的X坐标为76px，Y坐标为8px。

图层的CSS定义：





页面中插入的html代码：

链接一

定义链接的CSS部分，display:block;和height:30px;是为了让链接作为盒装样式撑满整个div，而text-indent:-1000px;和overflow:hidden;是让链接文字“飘”到图层外隐藏起来。

预览一下，将鼠标放在“软件样样通”上时会出现一个带白色边框的链接区域，这就说明我们成功了。

同理，可以在其它部分添加链接。比如高手的高字，给它添加链接的CSS为：

#link02 {
width:55px;
height:55px;
position:absolute;
top:39px;
left:245px;
}
#link02 a {
display:block;
height:55px;
text-indent:-100px;
overflow:hidden;
}
#link02 a:hover {
border:1px dashed #F00;
}

Html文件则新加了一个链接，变为：

链接一

链接二

再预览一下，鼠标移动到“高”字，又多了一个红色的链接框，到此，为图片不同区域添加链接的方法已经介绍了两种。