Изображения оживляют интерфейс веб проектов. Кроме того, при наведении курсора мыши на картинку может открываться дополнительная информация (например, автор изображения и ссылка на его блог). У этой, простой на первый взгляд, задачи, есть некоторые особенности, которые нужно учитывать при организации интерфейса.
Рассмотрим возможные варианты решения.
Условия
Допустим, у нас есть разметка, для которой надо организовать выведение информации с названием картинки и ссылкой при наведении курсора мыши на изображение:
<figure>
<img src="image.jpg" alt="Пример изображение">
<figcaption>
<h3>Пример изображения</h3>
<a href="http://ruseller.com">материалы проекта RUSELLER.COM</a>
</figcaption>
</figure>
Простое решение: используем CSS для скрытия и вывода названия
Используем <figcaption> в качестве раздела для всплывающей информации. Скрываем его по умолчанию и выводим при наведении курсора мыши на изображение:
figcaption {
display: none;
}
figure:hover figcaption {
display: block;
}
Просто, но слишком грубо. Смотрите на демонстрационной странице.
Используем затухание: трансформации CSS3
Можно воспользоваться продвинутыми методами CSS3:
figcaption {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
figure:hover figcaption {
opacity: 1;
}
Для достижения желаемого эффекта нужно настроить длительность перехода.
Но данный метод имеет свой недостаток: информация будет появляться, даже если курсор мыши быстро прошел над картинкой (в такой ситуации пользователь явно не заинтересован в получении дополнительного материала).
Используем HoverIntent
Если подключить JavaScript, можно сделать работу нашего блока более изящной. Плагин jQuery HoverIntent поможет предотвратить нежелательные события hover. Он задает небольшую задержку перед генерацией события, поэтому быстрое перемещение курсора мыши над объектом не приведет ни к каким действиям, а медленная проводка и остановка вызовет появление дополнительной информации.
Можно сделать так:
$("figure").hoverIntent(function() {
$("figcaption", this).fadeTo(400, 1);
}, function() {
$("figcaption", this).fadeTo(400, 0);
});
Используем doTimeout
HoverIntent отлично справляется с ситуацией быстрого прохода курсора мыши над изображением. Но если у нас есть несколько изображений, то перемещение между ними будет связано сзадержкой появления названия, что тоже не очень хорошо. Для предотвращения таких ситуаций можно воспользоваться плагином doTimeout. Однако код будет несколько сложнее:
var li_cache, over = false;
$( "figure" )
.delegate( "figcaption", "mouseenter", function ( e ) {
var $li = $( this ), speed;
if ( li_cache === this && over ) {
$.doTimeout( "hoverOut" );
return;
}
if ( over ) {
$.doTimeout( "hoverOut", true );
speed = 0;
} else {
$.doTimeout( "hoverOut" );
speed = 500;
}
$.doTimeout( "hoverIn", speed, function () {
over = true;
$li.find( "div" ).fadeTo( 200, 1.0 );
});
})
.delegate( "figcaption", "mouseleave", function ( e ) {
var $li = $( this );
$.doTimeout( "hoverIn" );
$.doTimeout( "hoverOut", 500, function () {
over = false;
$li.find( "div" ).stop( true ).fadeOut();
});
});
Название появляется спустя 0.5 секунды после наведения курсора на изображение. А если передвинуть курсор мыши на другое изображение, то название появится сразу. Смотрите демонстрацию для примера 4.
Теперь информационный блок появляется так естественно, что сложность кода окупается.
Заключение
Как видите, совершенству нет предела.