ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Сменяемые изображения

Сменяемые изображения

Сменяемое изображение или ролловер - это два изображения, которые меняют друг друга, когда посетитель наводит указатель мыши на картинку. Иными словами, мы присваиваем событию наведения курсора изменение картинки. Например, на странице есть картинка с идентификатором photo. Когда не него наводится указатель мыши, мы ожидаем появление новой картинки.


$(document).ready(function() {
var newPhoto = new Image;
newPhoto.src = "../images/photo2.jpg";
$("#photo").mouseover(function(e) {
$(this).attr("src", newPhoto.src);
});
});

Обработчику события присваивается значение mouseover, а также функция, изменяющая атрибут src для нового изображения.

Поскольку сменяемые картинки обычно возвращаются в исходное состояние, как только мы отводим указатель мыши в сторону, мы также должны добавить событие mouseout.


$(document).ready(function() {
var newPhoto = new Image;
newPhoto.src = "../images/photo2.jpg";
$("#photo").mouseover(function(e) {
$(this).attr("src", newPhoto.src);
});
$("#photo").mouseout(function(e) {
$(this).attr("src","../images/photo1.jpg");
});
});

Или же применить функцию hover(), которая отвечает за оба события наведения и смещения указателя мыши.


$(document).ready(function() {
var newPhoto = new Image;
newPhoto.src = "../images/photo2.jpg";
var oldSrc = $("#photo").attr("src");
$("#photo").hover(
function(e) {
$(this).attr("src",newPhoto.src);
},
function(e){
$(this).attr("src",oldSrc);
});
})

Каждый элемент на странице может инициировать изменение любого изображения. Например, мы можем предоставить право сменять изображения заголовку <h>.

В этом случае код будет выглядеть следующим образом:


$(document).ready(function() {
var newPhoto = new Image;
newPhoto.src = "../images/photo2.jpg";
var oldSrc = $("#photo").attr("src");
$("#hF").hover(
function(e) {
$("#photo").attr("src",newPhoto.src);
},
function(e){
$("#photo").attr("src",oldSrc);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Сменяемые изображения или ролловер</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var newPhoto = new Image;
newPhoto.src = "images/photo2.jpg";
var oldSrc = $("#photo").attr("src");
$("#hF").hover(
function(e) {
$("#photo").attr("src",newPhoto.src);
},
function(e){
$("#photo").attr("src",oldSrc);
});
});
</script>
</head>

<body>
<h3 id = "hF">Мои любимые фильмы</h3><br>
<img id = "photo" src="images/photo1.jpg" width="300" height="200" alt="Год рождения"/>
<p><em><span style="font-size:18px; color:#EF2226">Обратите внимание:</span> из-за особенностей работы плагина, код данного примера может работать не корректно.
Для того, чтобы пример работал корректно, перезагрузите страницу или создайте HTML файл на Вашем компьютере и скопируйте в него код из примера.</em></p>
</body>
</html>