Question

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

请访问此实时页面http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3

我基本上问是否可以在标题div中的某处覆盖链接？特别是在右边的贴纸背景图片上？

我没有建立网站，但我刚刚在标题div的右角添加了贴纸。（仅供参考，它是一个Joomla网站，因此使用PHP模板文件。）。

我做了这个作为背景图片并使用了一些填充和负边距使其溢出，然后我意识到贴纸需要链接到他们的订单页面。

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

如果图像地图是任何人都有代码示例的方式。

我已经尝试了下面的代码，我从类似主题的教程编辑，这不起作用

<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>

Answer 1

我不知道图像地图的流行程度如何:)。您可以使用以下内容相对于标题绝对定位元素（例如）。 Codepen sketch：http://cdpn.io/klsEp

<强> HTML

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

<强> CSS

考虑这个简单的例子。

.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;
}

Answer 2

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

将<a>附加到标题div的末尾：

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

然后添加以下样式：

#header{
   position:relative;
}

.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}

Answer 3

在您的HTML中，我找不到menu_bg6.png的链接，但您必须在其中放置usemap=标记，如：

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

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

然后你可以创建一个相应的<map>标签，它应该适合你（但是，不要忘记为点击操作插入一个URL - 目前你的是'＃'）。

Here is a simple jsFiddle有更多关于在图片上定位可点击区域的想法。

Here is an article讨论了如何为DIV创建伪“图像映射” - 没有IMG标记。

如何添加图像映射链接？

3 个答案: