Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.
Реализовать такой эффект можно разными способами. Например, можно теги картинок вставить прямо в страницу и прятать/показывать их с помощью JavaScript.
Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).
Но при этом увеличивается размер страницы и не факт, что посетитель вообще будет эти картинки рассматривать.
Поэтому я решил привести пример своей реализации этого эффекта.
Картинки будут загружаться только если посетитель наведет мышку на какой-нибудь блок с аннотацией. Естественно, что загрузка будет выполняться только один раз.
Если посетитель наведет курсор мышки на другую аннотацию, будет загружена картинка для неё, а предыдущая – исчезнет.
Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.
Demo
Сразу же выкладываю архив с исходниками.
SourceА теперь разберем как это все работает.
Допустим у нас есть страница (index.html) со следующей разметкой.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Пердпросмотр с картинками</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
<div id="content">
<div id="leftCol">
<div id="butterfly" class="annotaionBlock">…</div>
<div id="tiger" class="annotaionBlock">…</div>
<div id="elephant" class="annotaionBlock">…</div>
<div id="wolf" class="annotaionBlock">…</div>
<div id="fish" class="annotaionBlock">…</div>
</div>
<div id="rightCol">
<div id="whale" class="annotaionBlock">…</div>
<div id="flamingo" class="annotaionBlock">…</div>
<div id="bear" class="annotaionBlock">…</div>
<div id="dog" class="annotaionBlock">…</div>
<div id="cat" class="annotaionBlock">…</div>
</div>
</div>
</body>
</html>
Сразу обратите внимание на блок content. Он состоит из двух колонок (leftCol и rightCol) в которых размещены аннотации.
Всем аннотациям присвоен CSS класс annotaionBlock и уникальный id. Этот id будет использоваться для определения нужной картинки.
Сами аннотации представляют собой обычный текст с HTML разметкой или без неё.
Теперь напишем JS скрипт, который будет подгружать картинки.
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.annotaionBlock').hover(
function(event) {
var curAnnotation = $(this);
var curId = curAnnotation.attr('id');
var annotImg = curAnnotation.children('.annotImg');
if (annotImg.length == 0) {
$.get('getimage.php', {img : curId}, function(data) {
annotImg = $('<div class="annotImg"><img src="' + data + '" alt="Картинка" /></div>').hide();
curAnnotation.append(annotImg);
$('.annotImg').not(this).slideUp('fast');
annotImg.slideDown('fast');
});
}
else {
$('.annotImg').not(annotImg).slideUp('fast');
annotImg.slideDown('fast');
}
},
function() {
}
);
});
</script>
Прежде всего мы подключаем библиотеку jQuery и пишем функцию, которая будет вызвана сразу после загрузки страницы (строки 3-25).
В этой функции мы объявляем обработчик события hover для всех элементов страницы с классом annotaionBlock, т.е. для всех наших аннотаций.
В качестве параметров этому обработчику передается 2 функции. Первая будет вызвана при появлении мышки над блоком, вторая – при выходе из него.
Вторую функцию (строки 22-23) мы оставляем пустой, т.к. вставлять и прятать картинки будем в первой.
Алгоритм работы.
1) При появлении курсора над аннотацией, сохраняем указатель на неё и её id (строки 6-7).
2) Проверяем загружен ли рисунок для данной аннотации (строки 8-9) и если нет, выполняем AJAX запрос к серверному (PHP) скрипту, в параметрах которого передаем id блока (строки 10-15).
3) После получения ответа сервера создаем скрытый тег img и вставляем его в конец блока с аннотацией (строки 11, 12). После этого применяем эффект slideUp ко всем картинкам в блоках с аннотацией кроме текущей (строка 13). И с помощью эффекта slideDown показываем картинку для данной аннотации (строка 14).
4) Если картинка была вставлена раньше, то AJAX запрос мы не отправляем, а просто показываем её и прячем остальные (с помощью эффектов slideUp и slideDown, строки 18-19).
Обратите внимание. Если применять эффекты slideDown и slideUp непосредственно к тегу img картинка будет плавно изменять как вертикальный, так и горизонтальный размеры. Т.е. она будет «выезжать» из левого верхнего угла.
Чтобы изменялась только высота картинки нужно поместить её внутрь тега div и примерять эффекты к нему.
Серверная часть
PHP скрипт, который обрабатывает запросы на получение картинок (getimage.php) должен прочитать id запрашиваемой картинки и вернуть соответствующую ссылку.
Эти ссылки можно хранить в БД или текстовом файле, выбирать случайным образом или однозначно связать с аннотациями. Всё это зависит от конкретной ситуации. Мы ограничимся простейшим вариантом с использованием оператора switch.
$image = $_GET['img'];
switch ($image) {
case 'butterfly': echo 'http://farm1.static.flickr.com/152/408688454_2d868d0104_m.jpg'; break;
case 'tiger': echo 'http://farm4.static.flickr.com/3284/2507729467_915274dab3_m.jpg'; break;
case 'elephant': echo 'http://farm3.static.flickr.com/2377/1520324747_e468eab773_m.jpg'; break;
case 'wolf': echo 'http://farm1.static.flickr.com/177/402657323_ebf5c7ce51_m.jpg'; break;
case 'fish': echo 'http://farm2.static.flickr.com/1084/892454941_56fd34ac3c_m.jpg'; break;
case 'whale': echo 'http://farm3.static.flickr.com/2401/2052477420_fe7fb452b0_m.jpg'; break;
case 'flamingo': echo 'http://farm4.static.flickr.com/3303/3557243577_3c1bab1ec3_m.jpg'; break;
case 'bear': echo 'http://farm1.static.flickr.com/172/401014816_9d879ceac6_m.jpg'; break;
case 'dog': echo 'http://farm1.static.flickr.com/68/215233902_0f2d1ac9e5_m.jpg'; break;
case 'cat': echo 'http://farm3.static.flickr.com/2068/2532467266_d8b5c9ea15_m.jpg'; break;
}
Как видите, у нас есть десять аннотаций и каждой соответствует своя ссылка.
И в заключение несколько слов об оформлении страницы.
Размещение аннотаций и их внешний вид задаётся с помощью CSS стилей (файл styles.css).
Я приведу только его фрагмент, который создаёт две колонки (в архиве вы найдете полный вариант).
#content {
width: 600px;
margin: auto;
text-align: justify;
}
#leftCol {
float: left;
width: 299px;
}
#rightCol {
margin-left: 301px;
}
Как видите, ширину всего блока с аннотациями мы установили равной 600px. Для левой колонки указали правило float: left и ширину 299px, а для правой – отступ слева 301px (внутри этого отступа будет находится левая колонка).
Вот и всё. На мой взгляд, эффект довольно симпатичный, но подходит не для всех сайтов.
Как всегда, буду рад ответить на вопросы и выслушать замечания.
До встречи!
Интересно почитать
Актуально про seo и поисковые системы от SeoProfy
