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

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

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

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

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

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

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

Смена изображений

Смена изображений

При работе с изображениями обычно применяется язык JavaScript. При наводке указателя мыши одно изображение сменяется другим. Эта простейшая техника использовалась для создания интерактивных навигационных панелей, в которых вид кнопок изменялся в зависимости от того, наведен ли на них указатель мыши.

Но в последнее время, для достижения такого же эффекта, многие дизайнеры обратились к языку CSS. Однако даже если для создания интерактивных навигационных паналей применять CSS, нам все же придется понять, как использовать JavaScript для смены картинок при создании слайд-шоу, галерей изображений, а также для добавления других типов интерактивных графических эффектов на веб-страницу.

Изменение атрибута src изображения

Каждое изображение, отображенное на веб-странице, имеет атрибут src, обозначающий путь к графическому файлу. Если поменять это свойство, чтобы указать на другой графический файл, то браузер покажет другую картинку. Используя jQuery мы можем динамически изменять атрибут изображения src.

Если на странице есть картинка, которой присвоен идентификатор photo. HTML-код будет выглядеть примерно так:

<img id = "photo" src="../images/photo4.jpg" width="300" height="200" alt="Год рождения"/>

Чтобы заменить файл изображения, мы будем использовать функцию attr() для установки атрибута src нового файла:

s$("#photo").attr('src', '../images/photo3.jpg')

Изменение атрибута src изображения не затрагивает всех остальных атрибутов элемента img. Например, если атрибут alt установлен в HTML-коде, то измененное изображение будет иметь тот же атрибут alt, что и оригинал. Если атрибуты width и height установлены в HTML-коде, то изменение свойства изображения src подгонит картинку под размер оригинала. Если рисунки имеют различные размеры, то новое изображение будет искажено. Избежать искажения изображения можно, если опустить свойства width и height в оригинальной картинке в HTML-кода. Тогда при смене картинки веб-браузер отобразит новую картинку в том размере, который задан в файле.

Другое решение - это сначала загрузить новое изображение, получить его размеры, а затем изменить атрибуты src, width, height и alt для элемента img:

  • var newPhoto = new Image();
  • newPhoto.src = 'images/photo2.jpg';
  • var photo = $("#photo");
  • photo.attr('src',newPhoto,src);
  • photo.attr('width',newPhoto,width);
  • photo.attr('height',newPhoto,height);

Функция attr() может одновременно устанавливать несколько атрибутов HTML. Для этого нужно просто передать объектную константу, содержащую имя и новое значение каждого атрибута. Более кратко код может выглядеть так:

var newPhoto = new Image();
newPhoto.src = 'images/photo2.jpg';
$("#photo").attr({
src: newPhoto.src,
width: newPhoto.width,
height: newPhoto.height
});

А теперь посмотрим, что из этого получилось. В качестве обработчика событий выбрана функция hover(), кторая привязывает одну или две функции к выбранному элементу. Код первой привязанной функции выполнится, когда на выбранный элемент будет наведен курсор мыши а второй, когда курсор мыши покинет пределы этого элемента.


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

<body>
<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>

Еще онин способ смены изображений

Существует еще один способ смены изображений, который не подразумевает изменения атрибута src или отдельного изменения других атрибутов изображаения. Это можно сделать с помощью добавления, удаления и изменения HTML-кода. Простой способ замены одного изображения на другое заключается в замене элемента img в помощью метода replaceWith().

replaceWith() - заменяет текущий элемент новым содержимым.

Если на нашей странице имеется изображение:

<img id = "photoF" src="../images/photo1.jpg" width="300" height="200" alt="Год рождения"/>

То мы легко можем заменить его другим, полностью заменив элемент img.


$(document).ready(function() {
$("#photoF").hover(function(){
$("#photoF").replaceWith('"<img id="photoF" src="../images/photo2.jpg" width="300" height="200" alt="Нужен тост">');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Смена изображений</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#photoF").hover(function(){
$("#photoF").replaceWith('<img id="photoF" src="images/photo2.jpg" width="300" height="200" alt="Нужен тост">');
});
});
</script>
</head>

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

C помощью replaceWith() можно устанавливать различные атрибуты src, alt, width и height в строке, которую мы предоставили данной функции.

Предварительная загрузка изображений

Есть одна проблема с переключением на новое изображение с помощью описанного выше способа. Когда мы вставляем новый путь к файлу в атрибут src, браузеру необходимо загрузить этот файл. Если подвести указатель мыши к изображению до того, как загрузилась новая картинка, возникнит задержка, прежде чем появится изображение. Если мы создаем навигационную панель, данный эффект приведет к ее замедленной работе.

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

Предварительная загрузка делается так:

var newPhoto = new Image();
newPhoto.src = "images/newImage.jpg";

Предварительная загрузка заключается в том, что мы выполняем ее до того, как нам необходимо будет заменить текущее изображение. Один из способов предварительной загрузки - это создание в начале сценария массива, содержащего пути ко всем рисункам, которые мы хотим предварительно загрузить, а затем - проработка этих путей в цикле с созданием для каждого из них нового объекта изображения:

var preloadImages = ['images/photo1.jpg',
'images/photo2.jpg',
'images/photo3.jpg',
'images/photo14.jpg'];
for(var i=0; I < preloadImages.length; i++){
new Image().src = preloadImages[i];
}

В первыз четырех строках размещается инструкция JavaScript, создающая массив preloadImages, в котором содержатся четыре значения пути к каждому графическому файлу, предназначенному для предварительной загрузки. В последующих строках показан цикл JavaScript for? запускаемый один раз для каждого элемента массива preloadImages. В строке:

new Image().src = preloadImages[i]

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

Этот же эффект можно обеспечить и с помощью jQuery и обойтись при этом без функции new Image():

var preloadImages = ['images/photo1.jpg',
'images/photo2.jpg',
'images/photo3.jpg',
'images/photo14.jpg'];
for(var i=0; i < preloadImages.length; i++){
$("<img>").attr('src',preloadImages[i]);
}

В последней строке мы с помощью jQuery создаем новый элемент img. Передавая jQuery тег <img>? мы создаем новый HTML-элемент. Обычно в jQuery опускаются символы < и >. Это позволяет не только выбирать существующие но и создавать новые HTML-злементы.

В оставшейся части кода .attr('src',preloadImages[i] используется функция attr(). Она устанавливает свойства src, соответствующие пути к файлу нового изображения, что позволяет веб-браузеру предварительно загрузить его.

Оба способа предварительной загрузки изображений работают одинаково хорошо, поэтому мы можем выбирать тот, который подходит лучше.


$(document).ready(function() {
var preloadImages = ["images/photo1.jpg",
"images/photo2.jpg",
"images/photo3.jpg",
"images/photo4.jpg"];
for(var i=0; i < preloadImages.length; i++){
$("<img>").attr("src",preloadImages[i]);
}
$("#photoF").toggle(function(){
$("#photoF").attr("src","images/photo2.jpg");
},
function(){
$("#photoF").attr("src","images/photo3.jpg");
},
function(){
$("#photoF").attr("src","images/photo4.jpg");
},
function(){
$("#photoF").attr("src","images/photo1.jpg");
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Смена изображений</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
var preloadImages = ["images/photo1.jpg",
"images/photo2.jpg",
"images/photo3.jpg",
"images/photo4.jpg"];
for(var i=0; i < preloadImages.length; i++){
$("<img>").attr("src",preloadImages[i]);
}
$("#photoF").toggle(function(){
$("#photoF").attr("src","images/photo2.jpg");
},
function(){
$("#photoF").attr("src","images/photo3.jpg");
},
function(){
$("#photoF").attr("src","images/photo4.jpg");
},
function(){
$("#photoF").attr("src","images/photo1.jpg");
});
});
</script>
</head>

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

Если вы обратили внимание в качестве переключателя картинок используется метод toggle(), позволящий привязать несколько обработчиков событий к элементу. Но к сожалению, начиная с версии jQuery 1.9 он был почему то удален и с более поздними версиями работать не будет.

Есть ли альтернатива toggle()? Есть. Конечно этот метод придает неудобства и увеличивает объем скрипта, тем не менее это решает проблему.

Альтернативный метод замещения функции toggle()

Суть метода заключается в использовании функции click() и флага.


$(document).ready(function() {
var preloadImages = ["images/photo1.jpg",
"images/photo2.jpg",
"images/photo3.jpg",
"images/photo4.jpg"];
for(var i=0; i < preloadImages.length; i++){
$("<img>").attr("src",preloadImages[i]);
}
var flag=0;
$("#photoF").click(function(){
if(flag==0){
$("#photoF").attr("src","images/photo2.jpg");
flag=1;
}
else if(flag==1){
$("#photoF").attr("src","images/photo3.jpg");
flag=2;
}
else if(flag==2){
$("#photoF").attr("src","images/photo4.jpg");
flag=3;
}
else{
$("#photoF").attr("src","images/photo1.jpg");
flag=0;
}
});

});
<!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 preloadImages = ['images/photo1.jpg',
'images/photo2.jpg',
'images/photo3.jpg',
'images/photo4.jpg'];
for(var i=0; i < preloadImages.length; i++){
$("<img>").attr('src',preloadImages[i]);
}
var flag=0;
$("#photoF").click(function(){
if(flag==0){
$("#photoF").attr("src","images/photo2.jpg");
flag=1;
}
else if(flag==1){
$("#photoF").attr("src","images/photo3.jpg");
flag=2;
}
else if(flag==2){
$("#photoF").attr("src","images/photo4.jpg");
flag=3;
}
else{
$("#photoF").attr("src","images/photo1.jpg");
flag=0;
}
});

});
</script>
</head>

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