Блог

Главная - Вопросы по программированию - Можно ли изменить источник изображения при опрокидывании с помощью JavaScript?

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

#javascript #image #onmouseover #rollover-effect

#javascript #изображение #onmouseover #эффект опрокидывания

Вопрос:

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

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

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

Возможно, такой код — 

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

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

Ответ №1:

Вам нужны mouseover mouseout события and . 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");

Комментарии:

1. Да, я просто опустил часть onmouseout для краткости. Я полагаю, что мой код делает то же самое, что и то, что вы предложили. Я все еще получаю сообщение об ошибке, в основном изображение при опрокидывании отображается в виде креста; я считаю, что проблема в пути. Не могли бы вы, пожалуйста, дать мне знать, как указать полный путь? Сейчас я тестирую его на своем локальном компьютере, и изображение находится в той же папке, что и веб-страница, скрипт и другие изображения.

2. Я предполагаю, что вы используете Windows, а затем используете пути с обратной косой чертой в нем. В JS вам нужно избегать таких обратных косых черт, поэтому imagesimage.png становится images\image.png . Я рекомендую вам использовать косые черты для путей : images/image.png . Это всегда работает.

3. спасибо, @Lekensteyn. Это сработало. Проблема заключалась в обратной косой черте, которую я использовал для пути к изображению. Использование косой черты сработало. Еще раз спасибо.