Question

我有 - img id =“logo”所以我可以在我的网站上找到我的徽标，完整的代码是：

<img id="logo" src="nsc/logo2.png" alt="logo" />

如何使用<a href=""> ???

链接此徽标图像

我尝试了许多不同的方法，但它们不起作用：/

Answer 1

<a href="www.example.com"><img id="logo" src="nsc/logo2.png" alt="logo" /></a>

Answer 2

嵌入链接标记会很不错。 :)

<a href="your.html">
    <img id="logo" src="nsc/logo2.png" alt="BrandLog" />
</a>

它很干净，不需要javascript :)

Answer 3

这非常简单，只需使用锚标记<img>包裹<a>标记：

<a href="myUrl.html">
    <img id="logo" src="nsc/logo2.png" alt="logo" />
</a>

这会将整个图像转换为链接：）

Answer 4

对于希望在a标签而非img标签上接收点击事件的人

<a href="/chat" style="background: red; display: inline-block;">
  <img src="chat.svg" style="pointer-events: none; display: block;" width=40 height=40>
</a>

在a标签上

display: inline-block

a：允许在a标签上设置宽度和高度

在img标签上

display: block：帮助删除图片下方的多余空间
pointer-events: none：忽略对img的点击，点击事件将在a标签上触发

Answer 5

如果您不能将图像包装在链接中，则无需使用JavaScript且无需包装元素，图像映射也应该可以正常工作。

Answer 6

我在img标签中添加ID，如下所示：

  <img id={logo.id} src={logo.url} onError={this.handleImageError} />

由于我正在从事React工作，因此我在id和src属性中使用JSX。如果图像损坏，则使用onError属性。它给了我一个事件，所以这就是我访问id属性的方式：

handleImageError = (e) => { console.log(e.target.id) }

Answer 7

以下是您的解决方案，

<img id="logo" src="nsc/logo2.png" alt="logo" onClick="window.open('http://yahoo.com');" />

链接img id =“logo”

7 个答案: