javascriptでイメージを交換しようとしています

srcイメージとidイメージを入れ替えようとしています。私が他の例で見ていることから、これをやり遂げる方法と思った。間違いなく私にとってはうまくいかない。これは私の最初の投稿ですので、私の質問の書式設定に関する助けも大いに評価されます。javascriptでイメージを交換しようとしています

HTML：

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Image Rollovers</title> 
    <link rel="stylesheet" href="main.css"> 
    <script src="rollover.js"></script> 
</head> 

<body> 
    <section> 
     <h1>Image Rollovers</h1> 
     <ul id="image_rollovers"> 
      <li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li> 
      <li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li> 
      <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li> 
     </ul>   
    </section> 
</body> 
</html>

Javascriptを：

//FUNCTION 
var $ = function (id) { 
     return document.getElementById(id); 
}  

//MOUSE EVENT FUNCTIONS 
var rollover = function(evt) { 
    var link = this; 
    var imageNode = $("img"); 
    imageNode.setAttribute("img", link.getAttribute("id")); 
} 

var rollout = function(evt) { 
    var link = this; 
    var imageNode = $("id"); 
    imageNode.setAttribute("id", link.getAttribute("img")); 
} 

//ONLOAD EVENT HANDLER  
window.onload = function() { 

     //GET ALL IMG TAGS 
     var linkNode = $("image_rollovers"); 
     var images = linkNode.getElementsByTagName("img"); 
     //PROCESS EACH IMAGE 
     var i, linkNode, image; 
     for (i=0; i<images.length; i++) 
     { 
      linkNode = images[i]; 
      linkNode.onmouseover = rollover; 
      linkNode.onmouseout = rollout; 
     } 
}

出典

2017-10-30 Ben Stone

編集支援をいただきありがとうございます。大変感謝しています。 –

'linkNode.getElementsByTagName（" src "）'は 'linkNode.getElementsByTagName（" img "）'でなければなりません – Barmar

3番目の ' 'がありません – Barmar

まず、あなたが第三<imgの終わりに>を逃している、HTMLのタイプミスを持っています。

 <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li> 
                  ^

第二に、あなたは$("img")と$("id")を呼んでいるが、それらのIDを持つ要素がありません。変数を適切な属性linkに設定してください。 rolloverとrolloutの機能は、idとsrcの両方の属性を交換するだけなので、別の機能は必要ありません。

//MOUSE EVENT FUNCTIONS 
function swap_src_and_id(evt) { 
    var link = this; 
    var src = link.getAttribute("src"); 
    link.setAttribute("src", link.getAttribute("id")); 
    link.setAttribute("id", src); 
}

第3に、linkNode.getElementsByTagName("src")を呼び出していますが、そのようなタグはありません。それはimgでなければなりません。

window.onload = function() { 

    //GET ALL IMG TAGS 
    var linkNode = $("image_rollovers"); 
    var images = linkNode.getElementsByTagName("img"); 
    //PROCESS EACH IMAGE 
    var i, linkNode, image; 
    for (i=0; i<images.length; i++) 
    { 
     linkNode = images[i]; 
     linkNode.onmouseover = swap_src_and_id; 
     linkNode.onmouseout = swap_src_and_id; 
    } 
}

出典

2017-10-30 22:12:22 Barmar

最初の部分はちょうど私の一部で怠惰だった。 mouseoverイベントを追加するためにHTMLを変更しようとしましたが、あまりに多く削除しました。このコードは、書かれたときにははるかに意味があります。どのように2番目のlink.setAttributeに来るgetAttribute必要はありません？ –

@BenStone変数 'src'を設定するときに' getAttribute'を使いました。 – Barmar

javascriptでイメージを交換しようとしています

答えて

関連する問題