3

マウスがホバリングしている画像のIDを取得したい。しかし、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";
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);
}
4

3 に答える 3

7

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画像がホバーされたときに呼び出される関数に 注意してください。thisdiv ではなく画像要素を参照します。

于 2013-02-14T15:47:33.690 に答える
1

カーソルを合わせたときに画像の を取得する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);
}
于 2013-02-14T16:03:46.960 に答える
-1

動的に追加された画像で機能するかどうかはわかりませんが、これが役立つことを願っています。

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 );
        }
    }
};
于 2013-02-14T16:20:39.660 に答える