1

次のコードがあります。

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

alexis-name の画像をクリックすると、別の画像「img1」
が呼び出されます。

これがchange（）のjsです

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";
});

複数の onclicks などを使用する必要がありますか?

私は次のことを試しました: ユーザーが img1 をクリックしたときに表示される絶対位置を持つ div を追加します。

<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>
4

1 に答える 1

1

jsFiddle Demo

function の実装など、より多くのコードを確認すると役立ちますchange。あなたの質問は少し漠然としています。基本的に、いくつかの表示とクリックを行うには、javascript と onclick ハンドラーを使用できます。これはインラインで行うべきではありません。要素を選択する方法を確認できるように、id を追加しました。これは非常に初歩的なデモであり、状況に合わせて拡張する余地がたくさんあります。

<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>
于 2013-09-24T15:20:18.653 に答える