Можно ли изменить источник изображения при переносе с помощью JavaScript?

Question

У меня вопрос по эффектам ролловера с использованием JavaScript.

Я читал, что спрайты изображений (изображения с другим изображением на его стороне) можно использовать с помощью CSS-смещения для достижения базового ролловера, когда onmouseover обрабатывается с помощью JS. Также читал о возможности изменения классов самостоятельно с помощью JS (className) для достижения вышеуказанного эффекта.

У меня вопрос, могу ли я изменить само изображение src с помощью JavaScript, чтобы добиться эффекта прокрутки?

Код вроде этого, может быть -

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

Я набрал что-то вроде этого, чтобы посмотреть, можно ли изменить SRC изображения при наведении курсора, но это не работает. Не могли бы вы сообщить мне, где я иду не так?

Answer 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");