Как изменить источник изображения W/JS

Мне нужно изменить src изображения с помощью java-скрипта, и я уверен, что ударил дорожный блок, в 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

Пара проблем в вашем коде.

Сначала для закрытия петель сразу, вместо этого следует закрыть после функции 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 раз, но есть только 3 тега в html. Когда он подходит к петле, нет. 3 он не получает никакого значения для link.src.
ссылки Также переменная предоставляет набор тегов «LI», а не «» IMG, последний цикл требует от SRC link.src, который не имеет никакого значения, необходимо изменить

Var ссылки = документ. getElementsByTagName ("Ли"), к

вар ссылки = document.getElementsByTagName ("IMG"),

Попробуйте это. Надеемся, что после исправления выше ошибок ваш код должен работать.

источник

2015-09-30 20:29:50

, почему цикл for должен закрываться после выключения функции вы поймаете петлю внизу и ссылки var – IntheMountainair

Я не уверен, что вы хотите присоединить события mouseenter и mouseout только к последнему элементу массива imgElements. В вашем коде цикл полностью запущен, значение в imgNode будет последним, и события будут привязаны только к последнему элементу.Я не уверен в вашей цели запуска цикла for и добавления событий в противном случае. –

Как изменить источник изображения W/JS

ответ

Смежные вопросы