Ролловер (веб-дизайн) - Википедия - Rollover (web design)

Эта статья не цитировать любой источники. Пожалуйста помоги улучшить эту статью к добавление цитат в надежные источники. Материал, не полученный от источника, может быть оспорен и удаленный. Найдите источники: "Ролловер" веб-дизайн  – Новости  · газеты  · книги  · ученый  · JSTOR (Февраль 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 удалось создать эффекты, подобные анимации.

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

Смотрите также

• Наведение мыши

внешняя ссылка