在 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>