Ролловер (Rollover)

Ролловер – (синоним английского термина Rollover – опрокидывание) – смена картинки на странице сайта при наведении на нее курсора мыши. Отвели курсор – вернулось исходное изображение.

Обычно для этого пользуются обработчиками события (event handlers). За действие при наведении курсора отвечает onmouseover, а при его перемещении в другую часть экрана – onmousеout. Во время смены картинки не должно быть пустого места, поэтому второе изображение заранее загружают в кэш браузера с помощью javascript-a или css.

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

Аналогичным образом при наведении курсора появлялась вторая часть картинки. Только в этом случае высоту прописывают с отрицательным значением, которое равно половине фона. Поэтому верхняя часть изображения прячется, а нижняя – отображается на странице сайта.

Сложный ролловер может состоять из 3-4 и более картинок. Размещать rollover можно вертикально или горизонтально. Все зависит от задач, которые поставил заказчик верстки.

Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

1 вопрос / комментарий

  1. Маргарита,
    1

    Хм...интересно, не слышала никогда о таком эффекте. Жаль, что у вас нет примера, чтоб, так сказать, нагляднее было...пришлось искать в интернете.

Задать вопрос / Оставить комментарий