图像上的不同链接是否需要图像映射？

Question

我希望图像的左上角链接到location1，图像的其余部分链接到location2。最好的方法是什么？

有更现代的方法吗？

Answer 1

有几种方法。

1. 图片地图
2. Javascript点击处理程序，检查（x，y）并做出正确的决定
3. 使用position：absolute或position：relative叠加图像左上角的元素，并分别处理单击的元素。 This other answer显示了这种方法。
4. 将图像分成4个图像 - 左上角图像将链接到位置1，另外3个图像将链接到位置2。

您能否详细说明您的使用案例？

Answer 2

如果您不能使用<map>，请试试demo，＆＃39; source＆＃39;

HTML

<div class="box">
    <a href="http://google.com/">
        <img src="http://kaleidoscope.cultural-china.com/chinaWH/upload/Image/colors2.jpg"/>
    </a>
    <a class="corner" href="http://apple.com/"></a>
</div>

CSS

a.corner{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
}

.box {
    position: relative;
}