javascript - adding an onclick or a button to an image -


i have following code:

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

when alexis-name image clicked, calls image, 'img1'
when img1 called, have button display on img1 screen, don't know how this.

here js 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 supposed use multiple onclicks or something?

i have tried following: adding div absolute position appears when 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> 

jsfiddle demo

it see more code, such implementation function change. question little vague. have displays , clicks can use javascript , onclick handlers. should not done inline. added id can see how select elements. rudimentary demo , there lot of room expand on make fit situation.

<html><head> <script>  //wait dom ready select image element  window.onload = function(){   //select anchor element   var link = document.getelementbyid("link");   //attach click handler   link.onclick = function(){    //code execute when element clicked    change('img1');   };  };   //function handler  function change(arg){   //select image element   var image = document.getelementbyid("image");   //change source   image.src = "../name_footer/" + arg + ".png";//this change /img1.png   //create 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 button   button.onclick = function(){    //code button    alert("button");   };  }  //select anchor element  var link = document.getelementbyid("link");  //attach click handler  link.onclick = function(){   //code execute when element clicked   change('img1');  }; </script></head> <body>  <a id="link" href="#"><img id="image" src="../name_footer/alexis-name.png" /></a> </body> </html> 

Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

c++ - Clear the memory after returning a vector in a function -

erlang - Saving a digraph to mnesia is hindered because of its side-effects -