How to swap src with id in javascript onmouseenter?
Question
I want the image to change when I mouse over using javascript. The img src should be swapped with the ids. The problem is that something is going wrong with the loop and when I run this, it will swap the images but only with image "images/h6.jpg". So all three have the same pic.
HTML:
<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>
Javascript:
var $ = function (id) {
return document.getElementById(id);
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET IMAGE TAGS
var listNode = $("image_rollovers");
var imageList = listNode.getElementsByTagName("img");
//PROCESS EACH IMAGE
var i, imageNode, image;
for ( i = 0 ; i < imageList.length ; i++ ){
//1. GET IMG TAG
imageNode = imageList[i];
//2. PRELOAD IMAGE FROM IMG TAG
image = new Image();
image.src = imageNode.getAttribute("id");
//3. ATTACH EVENT HANDLERS (onmouseover & onmouseout) TO IMG TAG
imageNode.onmouseenter = function (evt) {
var img = this;
img.src = imageNode.getAttribute("id");
if (!evt) evt = window.event;
if( evt.preventDefault ) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
}
2 answers
solution1
2 ACCPTED 2015-10-07 04:24:05
The reason is because imageNode.getAttribute("id"); will be the value the same value for each item. Hence it changes on each iteration so only has the last value is used on each event handler. This is why it only works for the last image. Rather use img.src = this.getAttribute("id") so we are using the specific element's id that is having the event triggered.
imageNode.onmouseenter = function (evt) {
var img = this;
img.src = this.getAttribute("id");
...
}
Fiddle Example . Note make sure to inspect the elements to see the src changes.
solution2
1 2015-10-07 04:27:06
- Don't use
IDto store arbitrary data, usedata-*attribute instead.
<img src="images/h1.jpg" data-src="images/h4.jpg" alt="">
- No need to wait for the window.onload.
- Don't create functions within loops (Issue with overwriting values)
function $(id) {
return document.getElementById(id);
}
var listNode = $("image_rollovers");
var imageList = listNode.getElementsByTagName("img");
var i, imageNode, image;
// (Don't make fn inside loops)
function swapSrc() {
this.src = this.dataset.src;
}
for (i=0 ; i<imageList.length; i++) {
imageNode = imageList[i];
//PRELOAD
image = new Image();
image.src = imageNode.dataset.src;
// Attach mouseenter listener
imageNode.addEventListener("mouseenter", swapSrc, false);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.