CODEWITHSUNDEEP
javascripthtml
need2nobasis
need2nobasis

Reputation: 139

adding an onclick or a button to an image

I have the following code:

<a onClick="change('img1');" href="#"><img src="../name_footer/alexis-name.png" /></a>

when the alexis-name image is clicked, it calls another image, 'img1'
When img1 is called, I would like to have a button display on the img1 screen, but I don't know how to do this.

Here is the js for change()

function change(v) {
        var confirm = document.getElementById("target");
                 if (v == "imgA") {target.className = "cast1";}
            else if (v == "imgB") {target.className = "cast2";}
            else if (v == "imgC") {target.className = "cast3";}
            else if (v == "imgD") {target.className = "cast4";}

            else if (v == "imgE") {target.className = "question";}

            else if (v == "img1") {target.className = "bio1";}
            else if (v == "img2") {target.className = "bio2";}
            else if (v == "img3") {target.className = "bio3";}
            else if (v == "img4") {target.className = "bio4";}
                 else {target.className = "chart";}
}
document.querySelector("button").addEventListener("click", function(){
    document.querySelector("div").style.display = "block";
});

Am I supposed to use multiple onclicks or something?

I have tried the following: adding a div with a absolute position that appears when the user clicks on img1.

<a onClick="change('img1');" href="#"><img src="../name_footer/alexis-name.png" /></a>
<div id=blah style="position:absolute; top:500px; left:700px; width:130px; height:130px;"><a href="domain"></a>

Upvotes: 1

Views: 3390

Answers (1)

Travis J
Travis J

Reputation: 82267

jsFiddle Demo

It would help to see more code, such as the implementation for the function change. Your question is a little vague. Basically to have some displays and clicks you can use javascript and onclick handlers. This should not be done inline. I added an id so you can see how to select elements. This is a very rudimentary demo and there is a lot of room for you to expand on it to make it fit your situation.

<html><head>
<script>
 //wait for DOM ready to select image element
 window.onload = function(){
  //select anchor element
  var link = document.getElementById("link");
  //attach click handler
  link.onclick = function(){
   //code to execute when element is clicked
   change('img1');
  };
 };

 //function for handler
 function change(arg){
  //select image element
  var image = document.getElementById("image");
  //change source
  image.src = "../name_footer/" + arg + ".png";//this will change it to /img1.png
  //create a button
  var button = document.createElement("input");
  button.id = "img1Button";
  button.type = "button";
  button.value = "Display";
  //append button after img1
  image.parentNode.appendChild(button);
  //attach handler to button
  button.onclick = function(){
   //code for button
   alert("Button");
  };
 }
 //select anchor element
 var link = document.getElementById("link");
 //attach click handler
 link.onclick = function(){
  //code to execute when element is clicked
  change('img1');
 };
</script></head>
<body>
 <a id="link" href="#"><img id="image" src="../name_footer/alexis-name.png" /></a>
</body>
</html>

Upvotes: 1

Related Questions