CSS中的图像映射？ [英] Image map in CSS?

问题描述

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

I have images that are also links, coded like this:

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

他们工作正常，但我想它是一个链接，只有当你点击照片。如果你点击图像的外部区域，我不想发生任何链接。
我尝试改变lin的宽度和高度，但它没有工作。我的css是：

They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen. I tried changing the width and height of the lin, but it didn't work. My css is:

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

推荐答案

在这种情况下，可以这样做：

I would not work with an imagemap in this case, but do something like this:

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;
}

基本上，这会将您的链接放在图片顶部。我发现这种方式更容易与链接的定位和尺寸一起玩。 （我没有测试的代码，但我认为它应该工作）

Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)

这篇关于CSS中的图像映射？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！