3

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

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

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;

}

4

5 回答 5

6

您可以使用<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" />

在这个例子中，只有被矩形区域覆盖的标志部分会被链接。

于 2012-11-09T15:20:37.417 回答
1

就在这里。:)

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

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

于 2012-11-09T15:24:34.427 回答
1

这是一个例子：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; }
于 2012-11-09T15:35:41.497 回答
0

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

例子

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

​</p>

这里认为图像和前半部分是可点击的，第二部分是不可点击的。尝试这样做或在小提琴中提供您的图像..

于 2012-11-09T15:26:53.643 回答
0

拥有一个 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">
于 2019-07-08T14:51:55.457 回答