0

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

请访问此实时页面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>
4

3 回答 3

0

我不知道图像地图有多流行了:)。您可以使用以下（例如）绝对相对于标题定位元素。Codepen 草图：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;
}
于 2013-08-19T17:01:42.783 回答
0

按原样粘贴以下代码，它将为您工作

将 a 附加<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;
}
于 2013-08-19T17:03:14.833 回答
0

在您的 HTML 中，我找不到指向 menu_bg6.png 的链接，但您必须在此处放置usemap=标签，如下所示：

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

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

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

这是一个简单的 jsFiddle，其中包含更多关于在图像上定位可点击区域的想法。

这是一篇讨论如何为 DIV 创建伪“图像映射”的文章 - 没有 IMG 标签。

于 2013-08-19T17:20:16.560 回答