在图像上放置图像和链接答案

【问题标题】：Position images and links on a image在图像上放置图像和链接
【发布时间】：2024-01-19 05:09:01
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

正如您已经注意到的，*使用位于图像上方的<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元素中...）

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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。

【讨论】：