Ролловер (веб-дизайн) - Rollover (web design) - Wikipedia
 | Эта статья не цитировать любой источники. (Февраль 2011 г.) (Узнайте, как и когда удалить этот шаблон сообщения) |
Перекатывать относится к кнопке, созданной веб-разработчиком или веб-дизайнером и находящейся внутри страница в Интернете, используется для обеспечения взаимодействия между пользователем и самой страницей. Термин «ролловер» в этом отношении происходит от визуального процесса «наведения курсора мыши на кнопку», вызывающего реакцию кнопки (обычно визуально, путем замены исходного изображения кнопки другим изображением), и иногда приводящего к изменению в сети. сама страница. Часть термина «ролл», вероятно, относится к более старым мышам, у которых был механический узел, состоящий из жесткого резинового шарика, размещенного в основании мыши (который катится), в отличие от современной оптической мыши, у которой нет «катящихся» частей . Период, термин наведение указателя мыши вероятно, более уместен с учетом современных технологий.
Ролловеры могут быть выполнены с помощью изображений, текста или кнопок. Для выполнения этого интерактивного действия пользователю требуются только два изображения / кнопки (с возможным добавлением текста «alt» к этим изображениям). Ролловер изображений может выполняться либо программой со встроенным инструментом, либо написанием сценария. Пользователь должен будет выбрать первое изображение и выбрать альтернативное вторичное изображение. Действие мыши должно быть установлено на «щелкнуть» или «навести указатель мыши», чтобы сработал наведение. Обратите внимание, что при наведении указателя мыши на изображение появляется альтернативное изображение / вторичное изображение, но не остается - когда пользователь «выводит указатель мыши», отводя указатель мыши от изображения, снова появляется исходное исходное изображение.[нужна цитата ]
Кодирование
Есть несколько разных способов создания ролловера. Это пример ролловера в CSS, JavaScript и HTML:
CSS
а { фоновая картинка: url(default.png); цвет: белый; отображать: блокировать; высота: 30px; ширина: 100px;}а:парить { фоновая картинка: url(rollover.png); цвет: светло-розовый;}JavaScript
вар связь = документ.querySelector("а");связь.addEventListener("наведение мыши",функция() { это.стиль.фоновая картинка = "url (rollover.png)"; это.стиль.цвет = "светло-розовый";});функция setStyleDefaults() { связь.стиль.фоновая картинка = "url (default.png)"; связь.стиль.цвет = "белый";}setStyleDefaults();связь.addEventListener("mouseout",setStyleDefaults);HTML
<а href="https://en.wikipedia.org/">Википедия</а>Различные типы ролловеров
Хотя ролловеры сами по себе не являются анимированными изображениями, некоторым пользователям и специалистам по HTML удалось создать эффекты, подобные анимации.
- Ролловеры масштабирования: когда мышь перемещается по изображению / тексту или кнопке, она увеличивает свой размер в зависимости от предельного размера, установленного пользователем.
- Затухающие опрокидывания: когда пользователь наводит указатель мыши на изображение / текст или кнопку, оно либо появляется, либо исчезает, в зависимости от пользовательского элемента управления.
- Несвязанные опрокидывания: когда мышь перемещается по изображению или кнопке, другие области на экране изменяются, отражая то, что произойдет, если пользователь щелкнет.