2013-08-19 1 views
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> 
+0

使用不同的图像,然后将贴纸链接到订购页面。 – VenomVendor

回答

0

如下面的代码粘贴,它会为你工作

附加一个<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; 
} 
+0

这是我正在寻找的答案。谢谢。几个编辑。我在.my-map类中添加了一个高Z值(999),因此它位于所有内容之上,并将背景值更改为透明。这比图像地图好得多! –

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

在你的HTML中,I找不到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标记。