Question

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

除了有两个单独的图像之外还有其他吗？

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

我试着在这里解释如何做到这一点。检查小提琴，你可以知道如何做到这一点......

Example

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

以下是一个示例：http://codepen.io/anon/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 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">

链接CSS中的一半图像

5 个答案: