add a link to a image on hover

Question

EDIT: Wow thanks guys, you guys responded fast, this is my first time using this forum, Thanks a lot. The person who I marked as an answer knew was what I was talking about, to the others also thank for responding

I was trying to add a link to an image when you hover over it. when you put your cursor over it it changes images and that image has a link. can anyone help me?

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

First of all you have an error in your html syntax. a and href are not attributes of an img element tag. Check it here for available attributes. But if you would like to store your custom data with an image, you can add data-* attribute. Check it here . You can then use it in JS if you need it.

From the all solutions at Add link to image dynamically you can use:

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

... or use jQuery .wrap() also mentioned on the link above.

Here is JSFiddle example for your case.

Answer 2

you can do like this

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>