如何更改圖像的來源W/JS

我必須更改使用Java腳本的圖像的src，我非常確定我打了一個路障，在html中我有3個li元素，而id是mouseenter img的來源。我覺得我很接近，但到目前爲止。繼承我的代碼到目前爲止。謝謝你的幫助！如何更改圖像的來源W/JS

的Javascript：

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

window.onload = function() { 
var links = document.getElementsByTagName("li"), 
    imgElements = document.getElementsByTagName("img"), 
    imgNode, 
    i, 
    URLone, 
    URLtwo, 
    link, 
    image; 
for (i = 0; i < imgElements.length; i++) { 
    imgNode = imgElements[i]; 
} 
imgNode.mouseenter = function() { 
    var img = this; 
    URLtwo = img.getAttribute('id'); 
    img.src = URLtwo; 
} 
imgNode.mouseout = function() { 
    var img = this; 
    URLone = img.getAttribute('src'); 
    img.src = URLone; 
}; 
//preload 
for (i = 0; i < links.length * 2; i++) { 
    link = links[i]; 
    image = new Image(); 
    image.src = link.src; 
    image = new Image(); 
    image.src = link.id; 
}};

HTML ::

<body> 
<section> 
    <h1>Ram Tap Combined Test</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>

工作的jQuery：

$(document).ready(function() { 
$("#image_rollovers img").each(function() { 
var oldURL = $(this).attr("src"); // gets the src attribute 
var newURL = $(this).attr("id"); // gets the id attribute 
// preload images 
var rolloverImage = new Image(); 
rolloverImage.src = newURL; 
$(this).hover(
function() { 
$(this).attr("src", newURL); // sets the src attribute 
}, 
function() { 
$(this).attr("src", oldURL); // sets the src attribute 
} 
); // end hover 
}); // end each 
}); // end ready

來源

2015-09-30 IntheMountainair

描述你的路障。問題是什麼？ – markbernard

我認爲這可能與我試圖理解和使用的節點或邏輯有關。它本週對我來說是新的，閱讀後我仍然不完全明白它 – IntheMountainair

你是否反對使用jQuery？另外，這功課呢？如果是這樣，關於SO的規則有點不同;用作業標籤標記它。 – levininja

for (i = 0; i < imgElements.length; i++) { 
    (function(imgNode) { 
     imgNode.addEventListener("mouseenter", function() { 
     var img = this; 
     URLtwo = img.getAttribute('id'); 
     img.src = URLtwo; 
     }, false); 

     imgNode.addEventListener("mouseout", function() { 
     var img = this; 
     URLone = img.getAttribute('src'); 
     img.src = URLone; 
     }, false); 
    })(imgElements[i]); 
}

來源

2015-09-30 20:18:53 Sagi

你的代碼中有幾個問題。

第一個for循環結束的時候了，而是應該將 imgNode.mouseout功能後關閉

for (i = 0; i < imgElements.length; i++) { 
 
    imgNode = imgElements[i]; 
 

 
imgNode.mouseenter = function() { 
 
    var img = this; 
 
    URLtwo = img.getAttribute('id'); 
 
    img.src = URLtwo; 
 
} 
 
imgNode.mouseout = function() { 
 
    var img = this; 
 
    URLone = img.getAttribute('src'); 
 
    img.src = URLone; 
 
}; 
 
} 
 
//preload 
 
for (i = 0; i < links.length * 2; i++) { 
 
    link = links[i]; 
 
    image = new Image(); 
 
    image.src = link.src; 
 
    image = new Image(); 
 
    image.src = link.id; 
 
}};

持續循環運行6次，但只有有在html中有3個標籤。當它回到沒有。 3它對link.src沒有任何價值。
還鏈接變量提供了「禮」的標籤，而不是「IMG」的集合，持續循環，需要從link.src SRC不具有任何價值，需要改變

VAR鏈接=文件。的getElementsByTagName（「裏」），到

變種鏈接= document.getElementsByTagName（「IMG」），

嘗試。希望糾正上述錯誤後，你的代碼應該可以工作。

來源

2015-09-30 20:29:50

爲什麼for循環需要在鼠標移出後關閉你捕捉循環底部和鏈接var – IntheMountainair

我不確定是否要將mouseenter和mouseout事件僅附加到imgElements數組中的最後一個元素。在你的代碼中，循環完全運行在imgNode中的值將是最後一個，事件將僅附加到最後一個元素。我不確定您的運行for循環的目的，否則附加事件。 –

如何更改圖像的來源W/JS

回答

相關問題