在图像上定位图像和链接

Question

我有一张图片，我想在其上放置链接，可以是文字或图片。几乎就是维基百科的例子（德国及其州的地图）：http://en.wikipedia.org/wiki/States_of_Germany 回到90年代，我会使用map标签在图片上创建可点击的部分。

我查看了维基百科上地图的源代码，并注意到绝对位置的所有状态。那么有一种简单的方法来实现这样的事情吗？或者我是否必须使用Photoshop来检查绝对位置并用CSS / HTML对其进行硬编码？

Answer 1

正如您已经注意到的，维基百科使用<div> - 位于图像上方的元素。无论如何，您需要为要放置在图像上的文本提供（绝对）坐标。

你可以尝试摆弄以获得正确的坐标或使用（ny）图像编辑应用程序来精确地找到图像中所需的坐标。

维基百科使用这样的结构

HTML：

<div class="container">
  <img src="myImage.png" />
  <div class="text1">Text1</div>
  <div class="text2">Text2</div>
</div>

CSS：

.text1 {
  position:absolute;
  left:50px;
  top:100px
}

.text2 {
  position:absolute;
  left:200px;
  top:50px
}

（除非他们直接将CSS样式放在HTML元素中......）

有关工作示例，请参阅this jsFiddle。

Answer 2

我想你需要一个HTML地图（例如http://www.w3schools.com/tags/tag_map.asp）加上一些javascript来包含文本。

请查看以下问题，它可能会对您有所帮助：

HTML, jQuery : Show text over area of image-map

Answer 3

如果你在你提到的链接中创建类似的东西，你必须指出那些位置。不是吗？在这种情况下，absolute positioning很好。

但是，如果您的方案不要求您将这些链接放在图像上的确切位置，则可以尝试这样的操作。

CSS //////////

div.back{
    background:url('path/to/your/image.extension');
    width:/*width of the image*/;
    height:/*height of the image*/
}

div这个back类只会按照您想要的方式运作。然后将链接放在div内，链接将显示在该图像的顶部。

查看此fiddle。