Статьи / Смена изображения при наведении на него курсора мыши

Перед нами стоит задача – производить смену изображения при наведении на него курсора мыши. Например, мы хотим сделать смену изображении с черно-белого на цветное. Для реализации данной задачи мы будем работать с модулем «Фотогалерея». Сама смена будет реализовываться при отображении фотографии списком.

Нам нужно в шаблон ~tpls/photoalbum/default.tpl, в блоке album_block_line прописать следующую строку:

<a onmouseover="document.pic% id%.src='% data getProperty('% id%', 'photo', 'preview_image')%';" onmouseout="document.pic% id%.src='% data getProperty('% id%', 'photo2', 'preview_image')%';"> <img src="% data getProperty('% id%', 'photo2', 'preview_image')%" border="0" alt="" /></a>

'photo' и 'photo2' - идентификаторы полей с изображениями.

Шаблон tpls/data/preview_image.tpl с таким блоком:

$FORMS['img_file'] = <<<END
% system makeThumbnail( % filepath%, 'auto',120 , 'view2')%
END;
А шаблон tpls/thumbs/view2.tpl с таким:
$FORMS['image'] = <<<END
% src%
END;

Данный способ очень хорошо вписался на сайте свадебный фотограф. Смена изображений значительно оживила сайт и сделала его намного привлекательнее для посетителей.

Похожие новости:

• Динамическое обновление цены при выборе опционных свойств (2012-05-09)
• Добавление определённого количества товаров в корзину (2012-05-09)
• Организуем интерфейс для слабовидящих пользователей (2012-05-03)
• Сумма заказов пользователя (2012-04-24)
• Окно с сообщением об успешно добавленном комментарии (2012-04-19)

Если у Вас возникают какие-либо вопросы или проблемы, то Вы можете написать в комментариях или воспользоваться формой обратной связи.

При копировании материлов ссылка на источник обязательна!