Html 如何添加图像地图链接？

我不确定这是否是正确的方法，甚至是问题，所以我会详细说明

请访问此实时页面

我基本上是在问是否有可能在header div的某个地方覆盖一个链接？特别是在右侧的标签背景图像上

我没有建立这个网站，但我只是在header div的右角添加了标签（仅供参考，这是一个Joomla网站，因此使用PHP模板文件）

我这样做是作为背景图像，并使用一些填充和负边距使其溢出，然后我意识到标签需要链接到他们的订单页面

图像地图是将其转换为链接的最佳方式吗？还是有更好的方法

如果一个图像地图是任何人获得代码示例的方式

.header {
  background: green;
  height: 200px;
  position: relative;
  width: 800px;
}

.sticker {
  background: red url('..') no-repeat center;
  bottom: -20px;
  color: white;
  cursor: pointer;
  display: block;
  height: 100px;
  position: absolute;
  right: -30px;
  width: 100px;
}

.sticker:hover {
  background: black;
}

我试过下面的代码，这是我从一个类似主题的教程中编辑的，但不起作用

<div id="header"  usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>

---

我不知道图像地图现在有多流行：）。可以使用以下命令（例如）相对于标题绝对定位元素。代码笔草图：

HTML

<div class='header'>
  <a class='sticker'>Click me</a>
</div>

---

按原样粘贴以下代码，它将适用于您

将

附加到标题div的末尾：

<div id="header">
  <div...
  <div id="menu">...
  <a class="my-map" href="#"></a>
</div>

---

在您的HTML中，我找不到指向menu_bg6.png的链接，但您必须在那里放置

usemap=

标记，如所示：

<img src="menu_bg6.png" alt="an image" usemap="#usethismap">

所以，不是在DIV标签上，而是在IMG标签上

然后，您可以创建一个相应的

标记，它应该适合您（不过，不要忘记为点击操作插入一个URL-当前您的是“#”）

有了更多关于在图像上定位可点击区域的想法

---

这篇文章讨论了如何在没有IMG标签的情况下为div创建伪“图像映射”。

使用不同的图像，然后将标签链接到订单页面。这就是我想要的答案。非常感谢。一些编辑。我在.my map类中添加了一个高z索引（999），使其覆盖所有内容，并将背景值更改为透明。这比图像地图好得多！！！

<img src="menu_bg6.png" alt="an image" usemap="#usethismap">