0

JavaScriptを使用したロールオーバー効果について質問があります。

onmouseoverJSを使用して処理する場合、画像スプライト（側面に別の画像がある画像）をCSSオフセットの助けを借りて使用して、基本的なロールオーバーを実現できることを読みました。上記の効果を達成するためにJS（className）を使用してクラス自体を変更する可能性についても読んでください。

私の質問は、ロールオーバー効果を実現するために、JavaScriptを使用して画像src自体を変更できますか？

このようなコード、多分-

document.getElementByID("button1").onmouseover = rolloverFunction;
function rolloverFunction(){
this.src = "button1-image2.png";
}

このような入力を行って、ロールオーバー時に画像のsrcを変更できるかどうかを確認しましたが、機能していません。どこが悪いのか教えていただけませんか？

4

1 に答える 1

1

mouseoverとmouseoutイベントが必要です。画像にカーソルを合わせると、画像を離れるmouseoverときにトリガーされます。mouseoutプレーンな古いJSを使用すると、次のようになります。

<img src="default.png" id="image" alt="">

<script>
var image = document.getElementById("image");
image.onmouseover = function () {
    this.src = "rollover.png";
};
image.onmouseout = function () {
    this.src = "default.png";
};
</script>

または、共通の関数を使用してURLの重複を回避します。

function rollover_effect(img_elm, rollover_src) {
    var default_src = img_elm.src;
    img_elm.onmouseover = function () {
        img_elm.src = rollover_src;
    };
    img_elm.onmouseout = function () {
        img_elm.src = default_src;
    };
}
rollover_effect(document.getElementByID("image"), "rollover.png");
于 2011-10-08T10:05:59.877 に答える