html - 在图像上定位图像和链接

Question

我有一张图片，我想在上面放置链接，链接可以是文本也可以是图片。例如，维基百科在这里有很多内容(德国及其州的 map ):http://en.wikipedia.org/wiki/States_of_Germany 回到 90 年代，我会使用 map 标签在图像上创建可点击的部分。

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

Answer 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一个工作示例。