CODEWITHSUNDEEP
javascriptcss
Overcranked
Overcranked

Reputation: 175

Calling an onclick in a img?

I have several thumb nails that I want to click on and have a larger version pop up over the thumbnails. I have the code that I was using and it works if I set it up in tags as a link but I cannot seem to make the thumbanail img itself clicable

HTML, Link that works

 <li><a href="#" onclick="toggle('widget1')">Toggle</a></li>

javaScript

function toggle(id) {
  var e = document.getElementById(id);

  if (e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = '';
}

HTML image I want clickable here is what I have tried 

<div id="wid1"><a href="#" onclick="toggle('widget1')"><img src="widLayOut1.jpg"   
height="200" width="200" /></a></div>

rest of the HTML

<div id="widget1" style="display:none"><img src="widget1.jpg" /></div>
enter code here

Thoughts

Upvotes: 3

Views: 191

Answers (1)

Adam Rackis
Adam Rackis

Reputation: 83356

You should be able to add a click event to your image like any other element. First add an id 

<img id="yourImg" src="widLayOut1.jpg"

then

document.getElementById("yourImg").addEventListener("click", function(){
    alert("You clicked the image");
});

And of course if you want to support old browsers you have to do a bit more work

var img = document.getElementById("yourImg");

if (img.addEventListener)
    img.addEventListener("click", function(){
        alert("You clicked the image");
    });
else if (img.attachEvent)
    img.attachEvent("onclick", function(){
        alert("You clicked the image");
    });
 else 
     alert("What are you using?!");

EDIT

I was over thinking the above 

document.getElementById("yourImg").onclick = function() {
    alert("You clicked the image");
};

should work just fine. Thanks mplungjan

Upvotes: 6

Related Questions