Error message

  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).
  • Warning: Illegal string offset 'field' in DatabaseCondition->__clone() (line 1818 of /var/www/vhosts/arte.dp.ua/htdocs/includes/database/query.inc).

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

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

 

Особенности:

Лёгкость установки - стоит только добавить скрипт на страницу и прописать стили для элементов. Дальше всё делается вызовом одной функции, для любого количества элементов на странице.

 

Итак, по порядку:

 

Изображение должно быть такого вида:

Нижняя часть - то, что будет показано изначально, верхняя - то, что будет появляться при наведении.

 

html. Просто вставляем код картинки в <div> или <a> и указываем какой-нибудь класс, чтоб потом с этим контейнером работать.

<div class="artehover"><img src="http://arte.dp.ua/themes/arte_v2/images/arteHover_tutorial.jpg"></img></div>

 

css. Контейнеру необходимо четко указать ширину, равную ширине картинки, высоту - в половину подготовленной картинки. И "overflow:hidden;" обязательно. В общем, всё как со спрайтами. Если в качестве контейнера используется <a>, то ему нужно ещё и display:block;

div.artehover{
	height:240px;
	width:300px;
	overflow:hidden;
}

 

javascript. В head добавляем:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script src="путь_по_которому_вы_расположили_плагин" type="text/javascript"></script>

<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('div.artehover').ArteHover(1000);
	});
</script>

Где:

jQuery('div.artehover') - обычный селектор элемента <div> или <a>, в который вы поместите картинку.

ArteHover(1000); - функция, применяется к элементу и инициализирует на нём плагин.

Полный вариант:

ArteHover(animSpeed, overCallback, outCallback)

animSpeed - скорость анимации в миллисекундах.

overCallback - функция, которая будет запускаться после того, как анимация при наведении дойдёт до конца. В нашем примере - когда изображение станет полностью цветным.

outCallback - то же самое, только наоборот. Эта функция будет запускаться тогда, когда цветное изображение полностью исчезнет.

 

Собственно, всё. Должно получиться как-то так:

 

Тестировал на ie6-8, ff3-4, opera10, chrome, safari.

Вопросы и предложения присылайте на почту студии, либо в камменты ниже.

 

Скачать плагин (1,8 кб)

Скачать исходник (2,4 кб)

 

ToDo:

В скором времени добавлю функции для принудительной установки состояния, по типу вкл/выкл

 

наверх