Question

我想知道如何使图像的一部分可点击而不是装扮图像。我会添加一个屏幕截图，以便您自己查看。哦，大声笑我不允许发布图像。链接在这里。 http://i.stack.imgur.com/5FOGv.png

我说的是左边的标志。因为它是透明的png，所以图像/可点击链接也是您无法看到图像的地方。

对不起我糟糕的英语，我不是母语人士。

Answer 1

尝试使用带有AREA标记的MAP标记来定义可点击区域。 e.g

＆＃13;

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

＆＃13;

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

http://www.w3schools.com/tags/tag_map.asp

Answer 2

你在做什么？

您可以在徽标顶部粘贴透明图像，并将其用作＆＃34;按钮＆＃34;。有些软件可以制作圆形图像，但至少它比整个横幅要小。

Answer 3

我认为您想要的是使用图像地图，旧方法仍然可以使用，它非常符合您的愿望。

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

 <map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
 </map>

Answer 4

您只需将图像放在容器中，并在该容器中放置链接，将其完全放置在徽标上。链接将与徽标具有相同的尺寸，并将其放置在徽标开始的位置。这是一些示例代码。

HTML：

<div class="image-container">
    <img src="image.png" alt="Company logo" />
    <a href="link.html" class="image-link">Some text</a>
</div>

CSS：

.image-container { position: relative; }

.image-link {
    display: inline-block;
    width: [width-of-logo]px;
    height: [height-of-logo]px;
    position: absolute;
    top: 0;
    left: 0;
    /* text-indent: -9999px; */
}

如果您不希望在链接中显示文字，请取消注释text-indent: -9999px;，但仍保留链接中的文字，以便于访问。

Answer 5

哇哇快！我想我会选择最后一个选项。

代码看起来有点复杂，但我想我会弄清楚。不想变得懒惰:)。谢谢你们！

                    <div class="site-logo">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img data-altlogo="<?php echo $alternate_logo; ?>" src="<?php echo $sitelogo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
                    </div>

                <?php else : ?>

                    <div class="site-logo">
                        <h1 class="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                    </div>

                <?php endif; ?>                 

            </div>

只有小区域的图像链接/可点击

5 个答案: