html - CSS中的图像映射？

Question

我的图片也是链接，编码如下：

  <a href="../www.google.com"><img src="pages/squirrely.png" /></a>

他们工作得很好，但我希望它是一个链接，只有当你点击照片的一般中间时。如果您单击图像的外部区域，我不希望发生任何链接。我尝试更改 lin 的宽度和高度，但没有成功。我的CSS是：

#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff; 
 }

Answer 1

在这种情况下，我不会使用图像映射，但可以执行以下操作：

的HTML：

<div class='container'>
 <img .../>
 <a ... ></a>
</div>

CSS：

.container {
 position: relative;
}
.container img {
 width: 100px;
 height: 100px;
 border: 5px solid #fff;
}
.container a {
 display: block;
 width: 60px;
 height: 60px;
 position: absolute;
 top: 25px;
 left: 25px;
}

基本上，这会将您的链接置于图像之上。我发现以这种方式使用链接的定位和尺寸要容易得多。（我没有测试代码，但我认为它应该可以工作）

Answer 2

有几个 Web 应用程序允许您选择映射的坐标。我已经成功地尝试了这个：

http://www.maschek.hu/imagemap/imgmap

我希望这对您的项目有所帮助！