Question

我想获得鼠标悬停的图像的ID。但我不明白如何获得身份证。有人能帮我吗：）。 TY！

function placeImage(x){
var div = document.getElementById("thumbnails");
div.innerHTML = ""; // clear images
for (var i =0; i <= x; i++) {

var image=document.createElement("img");
image.className += " Atributes";
image.src="images/foto_klein_"+i+".jpg";
image.width="135";
image.height="90";
image.alt="foto_klein_"+i;
image.id="image"+i;
image.position="relative";
div.appendChild(image);
image.style.marginRight = '10px';
_img.push(image);

}
};

使用placeImage函数放置图像。现在我想添加一个鼠标事件并更改目标图像的类。

<div id="thumbnails" onmouseover="mouseOver(this);" ></div>

我在所有缩略图上添加了一个鼠标。但我无法获得鼠标悬停的图像的ID。我想调用id或更改该particlair图像的image.className。但我不知道怎么称呼它。现在它只提醒“拇指年”

function mouseOver(e){
 alert(e.id);
}

Answer 1

使用this关键字：

<div id="thumbnails" onmouseover="mouseOver(this);" ></div>

function mouseOver(e){
   alert(e.id);
}

根据评论进行修改：

var image=document.createElement("img");
   image.className += " Atributes";
   image.src="images/foto_klein_"+i+".jpg";
   image.width="135";
   image.height="90";
   image.alt="foto_klein_"+i;
   image.id="image"+i;
   image.mouseover = mouseOver;
   image.position="relative";
   div.appendChild(image);
   image.style.marginRight = '10px';
   _img.push(image);

}

请注意图像悬停时调用的mouseOver函数。 this将引用图像元素而不是div。

Answer 2

要将鼠标悬停在图片上时获取id，请尝试以下操作：

function placeImage(x){
    var div = document.getElementById("thumbnails");
    div.innerHTML = ""; // clear images
    for (var i =0; i <= x; i++) {
        var image=document.createElement("img");
        image.className += " Atributes";
        image.src="images/foto_klein_"+i+".jpg";
        image.width="135";
        image.height="90";
        image.alt="foto_klein_"+i;
        image.id="image"+i;
        image.position="relative";
        image.onmouseover = mouseOver;    // <-- Added this
        div.appendChild(image);
        image.style.marginRight = '10px';
        _img.push(image);
    }
}

function mouseOver(e) {
    alert(this.id);
}

Answer 3

希望这会有所帮助，但我不确定它是否会动态添加图像。

document.ready = function () {
    var thumbnails = document.getElementById("thumbnails");

    var imgs = thumbnails.getElementsByTagName("img");

    for( var i=0; i<imgs.length; i++ ) {
        imgs[i].onmouseover = function() {
            alert( this.id );
        }
    }
};

Javascript试图获取鼠标移动的图像的ID

3 个答案: