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

Javascript trying to get the ID of the image which the mouse moves over

本文关键字：图像 ID Javascript 移动 获取 鼠标      更新时间：2023-09-26

我想得到鼠标悬停的图像的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或更改该粒子图像的image.className。但我不知道怎么称呼它。现在它只提醒"拇指年"

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

使用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。

要在悬停图像时获得图像的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);
}

希望这能有所帮助，尽管我不确定它是否能用于动态添加的图像。

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 );
        }
    }
};
相关文章：