在CSS中的一半图像上链接

Question

我有一个徽标的图像，其下面的口号。我希望将徽标作为主页的超链接，但我希望它只能从实际徽标中单击，而不是下面的口号。但是我无法实现这一目标，因为徽标和口号是一个图像。

除了拥有2个单独的图像外，是否有其他情况？

html：

<a href="http://www.dalewoods.com" id="logo_link">
    <img src="images/logo.png" alt="Dale Woods" class="logo"/></a>

CSS：

img.logo {
margin-top: 20px;

}

Answer 1

您可以使用<map>和<area>在图像上创建图像映射。然后，该区域可用于仅链接图像的一部分。

这是一个简单的示例，您可以修改以满足您的需求：

<map name="a">
  <area shape="rect" coords="25,25,75,75" href="http://www.dalewoods.com">
</map>
<img src="images/logo.png" alt="Dale Woods" class="logo" usemap="#a" />

在此示例中，只有矩形区域覆盖的徽标的部分才会链接。

Answer 2

是的，有。：）

<div id="logo">
  <a href="http://www.dalewoods.com" id="logo_link">Dale Woods</a>
</div>

和CSS：

#logo {
  width:200px;height:200px;position:relative;
  background:url(images/logo.png) no-repeat;overflow:hidden;
}
#logo_link {
  display:block;position:absolute;top:0;left:0;
  width:200px;height:150px;text-indent:-2000px;
}

必须更改位置和尺寸，但是从结构上讲，这应该解决您的问题。

Answer 3

这是一个示例：http：//codepen.io/anon/pen/pen/kedrc

html：

<div class="logo">
  <a href="#"></a>
  <img src="image.png" alt="Logo">
</div>

CSS：

.logo { 
  display: inline-block;
  position: relative;
}
a { 
  position: absolute;
  left: 0; top: 0;
  height: 50%; width: 100%;
}
img { display: block; }

Answer 4

我试图在这里解释如何做到这一点。检查小提琴，您可以了解如何做...

示例

<img src="example.gif" width="145" height="126" alt="Example" usemap="#Example">
<map name="Example">
  <area shape="rect" coords="0,0,82,126" alt="Firsthalf" href="#">
</map>

在这里认为图像和上半年是可单击的，第二个是不可单击的。尝试将其作为相同或在小提琴中提供图像。

Answer 5

拥有286x176像素图像，这就是我实现的方式，使左半部分是指向Android的链接，右半链接到Apple：

<map name="logos">
    <area shape="rect" coords="0,0,143,176" href="http://www.android.com" title="Link to Android" alt="Link to Android">
    <area shape="rect" coords="143,0,286,176" href="http://www.ios.com" title="Link to Apple" alt="Link to Apple">
</map>
<img src="myimage.png" usemap="#logos">