Ролловер (веб-дизайн)

Ролловер ссылается к кнопке, созданной веб-разработчиком или веб-дизайнером, находящейся на веб-странице, используемой для обеспечения взаимодействия между пользователем и самой страницей. Термин «ролловер» в этом отношении происходит от визуального процесса «наведения курсора мыши на кнопку», вызывающего реакцию кнопки (обычно визуально, путем замены исходного изображения кнопки другим изображением), и иногда приводящего к изменению в сети. сама страница. Часть термина «ролл», вероятно, относится к более старым мышам, у которых был механический узел, состоящий из жесткого резинового шарика, размещенного в основании мыши (который катится), в отличие от современной оптической мыши, у которой нет «катящихся» частей.. Термин mouseover, вероятно, более уместен с учетом современных технологий.

Ролловеры могут выполняться с помощью изображений, текста или кнопок. Пользователю требуются только два изображения / кнопки (с возможным добавлением текста «alt» к этим изображениям) для выполнения этого интерактивного действия. Изображение ролловера может быть выполнено программой со встроенным инструментом или написанием скрипта. Пользователь должен будет выбрать первое изображение и выбрать альтернативное вторичное изображение. Действие мыши должно быть установлено на «щелкнуть» или «навести указатель мыши», чтобы сработал ролловер. Обратите внимание, что при наведении указателя мыши на изображение появляется альтернативное изображение / вторичное изображение, но не остается - когда пользователь «выводит указатель мыши», отводя указатель мыши от изображения, снова появляется исходное исходное изображение.

• 1 Кодирование
• 2 Различные типы ролловеров
• 3 См. Также
• 4 Внешние ссылки

Существует несколько различных способов создания ролловеров. Это пример ролловера в CSS, JavaScript и HTML :

CSS

a {background-image: url (default.png); цвет белый; дисплей: блок; высота: 30 пикселей; ширина: 100 пикселей; } a: hover {фоновое изображение: url (rollover.png); цвет: светло-розовый; }

JavaScript

var link = document.querySelector ("a"); link.addEventListener ("наведение курсора мыши", функция () {this.style.backgroundImage = "url (rollover.png)"; this.style.color = "lightpink";}); функция setStyleDefaults () {link.style.backgroundImage = "url (default.png)"; link.style.color = "белый"; } setStyleDefaults (); link.addEventListener ("mouseout", setStyleDefaults);

HTML

Википедия 

Хотя ролловеры сами по себе не являются анимированными изображениями, некоторым пользователям и специалистам по HTML удалось создать эффекты, похожие на анимацию.

• Масштабирование ролловеров: когда мышь перемещается по изображению / тексту или кнопке, он увеличивает свой размер в зависимости от предельного размера, установленного пользователем.
• Затухающие ролловеры: когда пользователь наводит указатель мыши на изображение / текст или кнопка, он либо появляется, либо исчезает, в зависимости от пользовательского элемента управления.
• Несвязанные ролловеры: когда мышь перемещается по изображению или кнопке, другие области на экране изменяются, чтобы отразить то, что произойдет если пользователь щелкает мышью.

• Наведение указателя мыши

В Викиучебнике есть книга по теме: Веб-дизайн / Ролловер