链接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" />

在此示例中,仅链接矩形区域所覆盖的徽标部分.