Question

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

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

它们工作正常，但我希望它只是一个链接，只有当你点击照片的正常中间时。如果您点击图片的外部区域，我不希望任何链接发生。我试着改变林的宽度和高度，但它没有用。我的css是：

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

Answer 1

在这种情况下，我不会使用imagemap，但执行以下操作：

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

我希望这可以帮助您完成项目！

CSS中的图像映射？

2 个答案: