html - 在图像上放置图像和链接

Question

我有一个图像，我想在其上放置链接，可以是文本或图像。几乎所有维基百科的内容，例如（德国及其各州的地图）：http://en.wikipedia.org/wiki/States_of_Germany 早在 90 年代，我会使用map标签在图像上创建可点击的部分。

我在 Wikipedia 上查看了地图的源代码，并注意到绝对位置的所有状态。那么有没有一种简单的方法来实现这样的事情呢？还是我必须使用例如 Photoshop 来检查绝对位置并在 CSS/HTML 中对其进行硬编码？

score 2 · Accepted Answer

正如您已经注意到的那样，维基百科使用<div>位于图像上方的 - 元素。您需要以一种或另一种方式为要放置在图像顶部的文本提供（绝对）坐标。

您可以尝试摆弄以获得正确的坐标或使用（纽约）图像编辑应用程序在图像中准确找到所需的坐标。

维基百科使用这样的结构

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 元素中......）

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

score 1 · Accepted Answer

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

请看下面的问题，它可能会帮助你：

score 0 · Accepted Answer

如果您在提到的链接中创建类似的东西，那么您必须指出这些位置。不是吗？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，链接将显示在该图像的顶部。

看看这个小提琴。

3 回答 3