Question

我想在按钮上方添加图片，以使网页显示出不同的页面。我也希望图片也像按钮一样。当您将鼠标悬停在按钮或图片上时，它需要能够执行类似其一个按钮的操作。

          <a class="btn" onclick="WebsiteRedirectForum()">Forum</a>
      <img class="forum" src="img/forum.png" />
      <a class="btn" onclick="WebsiteRedirectStore()">Store</a>
      <img class="cart" src="img/cart.png" />

我认为我需要这样做，然后在其中添加一些CSS，但是我真的不知道我需要添加什么。这是我的第一次尝试，我对html和css不太了解，但是我可以使用Google。

谢谢

汤姆

Answer 1

所有需要做的事情，以使您的图片成为可点击的链接，您需要将其包围在标签中。

<input type="text" id="text-a63e2a66d9a139d52da7f333b1db2d1d" autocomplete="on" data-searchable-select-input="true" class="next-input next-input--invisible" placeholder="La Poste" role="combobox" aria-label="Search and select an option for Shipping carrier" aria-expanded="false" aria-autocomplete="list" aria-owns="fulfillments_0_shipping_options_tracking_company-searchable-select">

这样，您将同时拥有一个按钮和一张图片。而不是可点击的文本，它将是照片。

Answer 2

如果您希望图像成为链接的一部分，则必须将其放在标记内。以下是一个基本示例：

 <a class="btn" onclick="WebsiteRedirectForum()">
      <img class="forum" src="img/forum.png" /><br>
      Forum
    </a>

    <a class="btn" onclick="WebsiteRedirectStore()">
      <img class="cart" src="img/cart.png" /><br>
      Store
    </a>

因为它是标记，所以您无需悬停该类即可将光标悬停在上面

Answer 3

在<img>标记中包裹<a>标记：

<a class="btn" onclick="WebsiteRedirectForum()">
  Forum
  <img class="forum" src="img/forum.png" />
</a>
<a class="btn" onclick="WebsiteRedirectStore()">
  Store
  <img class="cart" src="img/cart.png" />
</a>

作为进一步的改进，您可以使用 figure and figcaption tags来表示图像标题。

Answer 4

首先，您需要在按钮上添加add href =“”标签。而且，如果您希望像链接一样单击照片，则需要在按钮内部添加照片。

<a href="" class="btn" onclick="WebsiteRedirectForum()">
<img class="forum" src="img/forum.png" />Forum
</a>

<a href="" class="btn" onclick="WebsiteRedirectStore()">
<img class="cart" src="img/cart.png" />Store
</a>

href转到网站上的其他页面无法按我想要的方式工作

4 个答案: