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>
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
Post a Comment