在 hover 上添加指向图像的链接

Question

编辑：哇，谢谢大家，你们回复很快，这是我第一次使用这个论坛，非常感谢。 我标记为答案的人知道我在说什么，其他人也感谢回复

当您通过 hover 覆盖图像时，我试图添加指向图像的链接。 当您将 cursor 放在它上面时，它会更改图像并且该图像具有链接。 谁能帮我？

HTML

<img src="don.png" class="artist" onmouseover="hover(this);" onmouseout="unhover(this);" a href="https://privatelink.com"/>

JS

function hover(element) {
  element.setAttribute('src', 'ht.png');
}

function unhover(element) {
  element.setAttribute('src', 'don.png');
}

Answer 1

首先，您的 html 语法有错误。 a和href不是img元素标签的属性。 在此处查看可用属性。 但是，如果您想将自定义数据与图像一起存储，则可以添加data-*属性。 在这里检查。 如果需要，您可以在 JS 中使用它。

从动态添加链接到图像的所有解决方案中，您可以使用：

var parentEl = document.getElementById("myimg").parentElement;
var imgEl = parentEl.innerHtml;
parentEl.innerHtml = '<a href="test.html">' + imgEl + '</a>';

...或使用 jQuery .wrap()也在上面的链接中提到。

这是您的案例的JSFiddle示例。

Answer 2

你可以这样做

HTML

<img src="don.png" class="artist" id="myImage" onmouseover="hover("myImage")" onmouseout="unhover("myImage")" a href="https://privatelink.com"/>

JS

 function hover(element) {
     document.getElementById(element).src='ht.png'
  }

 function unhover(element) {
     document.getElementById(element).src='don.png'
  }

Answer 3

 $(document).ready(function() { $("#myimage").hover(function() { var src = "https://privatelink.com"; var a = $("<a/>").attr("href", src); $( this ).wrap(a); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <figure id="myimage"> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption> Fig.1 - Trulli, Puglia, Italy. </figcaption> </figure>

Answer 4

 const linkedImg = document.querySelector("#image_link"); linkedImg.addEventListener("mouseover", (evt) => toggleImage(evt, "over")); linkedImg.addEventListener("mouseout", (evt) => toggleImage(evt, "out")); function toggleImage(evt, id) { if (id === "over") { linkedImg.setAttribute("href", "someurl1.html"); // change image linkedImg.querySelector("img").setAttribute( "src", "https://images.unsplash.com/photo-1542353436-312f0e1f67ff?auto=format&fit=crop&w=400&q=80" ); } else { linkedImg.setAttribute("href", "someurl2.html"); // change image linkedImg.querySelector("img").setAttribute( "src", "https://images.unsplash.com/photo-1558981852-426c6c22a060?fit=crop&w=500&q=80" ); } }

 <a href="#" id="image_link"> <img src="https://images.unsplash.com/photo-1558981852-426c6c22a060?fit=crop&w=500&q=80" class="artist"/> </a>