добавить ссылку на изображение при наведении курсора

Question

РЕДАКТИРОВАТЬ: Wow спасибо, ребята, вы, ребята, ответили быстро, я впервые использую этот форум, большое спасибо. Человек, которого я пометил как ответ, знал, о чем я говорил, другим также благодарю за ответ

Я пытался добавить ссылку на изображение, когда вы наводите на него курсор мыши. когда вы наводите курсор на него, он меняет изображения, и у этого изображения есть ссылка. кто-нибудь может мне помочь?

HTML

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

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>

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

Вы можете сделать это следующим образом

HTML

JS

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

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