Главная » Языки программирования

Что такое ролловеры html

На чтение 8 мин
Содержание
  1. Ролловер (веб-дизайн) — Rollover (web design)
  2. Кодирование
  3. Различные типы ролловеров
  4. См. также
  5. Внешние ссылки
  6. Текстовые ролловеры
  7. Изображения
  8. Вопросы

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

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

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

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

Кодирование

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

var link = document.querySelector ("a"); link.addEventListener ("наведение курсора мыши", функция () ); функция setStyleDefaults () setStyleDefaults (); link.addEventListener ("mouseout", setStyleDefaults);

Различные типы ролловеров

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

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

См. также

Внешние ссылки

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

Источник

Текстовые ролловеры

Самая популярная система навигации, применяющаяся в веб-дизайне сайтов — ролловеры.

  • Гиперссылка может быть текстом или рисунком.
  • Текстовая гиперссылка — слово или фраза, которым назначен адрес URL назначения.
  • Гиперссылкой в виде рисунка — рисунок, которому назначен адрес URL назначения. Этот адрес может быть назначен рисунку одним из двух способов:
    • Ссылка-ролловер (англ. rollover) — активируемая каким-либо образом ссылка, обычно при помощи изменения шрифта, цвета или формы, когда посетитель сайта наводит на неё указатель мыши. Далее — ролловер.
    • Ролловеры бывают графическими (выполненными в виде графических кнопок) или текстовыми (текстовый ролловер).
    1. Гиперссылка — не использовавшаяся гиперссылка .
    2. Активная гиперссылка — выбранная в настоящий момент гиперссылка .
    3. Просмотренная гиперссылка — гиперссылка, по которой уже был осуществлен переход .
    4. Гиперссылка, обозначающая, что посетитель находится на конкретной странице.

    Строго говоря, можно задавать только первые три состояния гиперссылки. Четвёртое состояние — цвет текста данной страницы сайта.

    Когда пользователь остановит указатель мыши на ссылкой, появится дополнительная информация (подсказка) об этой ссылке: Заказ сайта.

    Возможны иные сценарии. Например, при наведении на гиперссылку (текстовые ролловер) может воспроизводиться звук, проигрываться видео, появляться окно сообщений и многое другое.

    • Например, в обозревателе этот промежуток времени соответствует сроку хранения журнала просмотренных страниц. По умолчанию — 20 дней.
    • Если страница была просмотрена в течение 20 дней, гиперссылка на нее будет отображаться как просмотренная.
    • Если страница не просматривалась в течение 20 дней или журнал был очищен, гиперссылка на страницу будет отображаться таким цветом, как если бы эта страница никогда не просматривалась.

    Сравнительные характеристики для гиперссылок, реализованных различными способами:

    (*) Подразумевается любое иное меню, технически реализованное любым способом, отличным от использования dhtml.

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

    1. В случае отключения просмотра графики на веб-страницах посетитель сможет просмотреть текстовые ролловеры. При просмотре веб-страницы с системой навигации, выполненной с использованием графических ролловеров, посетитель может испытывать значительные затруднения.
    2. Цветопередача графики может несколько отличаться в зависимости от типа и настроек мониторов. В случае применения текстовых ролловеров искажения цветопередачи сведены к минимуму.
    3. Посетители с плохим зрением или просматривающие сайт на мониторах низкого качества могут самостоятельно изменить (увеличить) размер шрифта в настройках своего браузера. Размер текстовых ролловеров будет изменяться в соответствии с настройками. Изменить размер графических ролловеров в настройках браузера нельзя.
    4. Текстовые ролловеры загружаются значительно быстрее по сравнению с графическими ролловерами. Скорость загрузки страниц с использованием графических ролловеров может быть большой.
    5. Текстовые ролловеры занимают меньше места на странице сайта по сравнению с графическими ролловерами.
    6. Изготовление и изменение текстовых ролловеров проще, быстрее и дешевле.
    7. В случаях, когда сайт состоит из нескольких сот html страниц, число гиперссылок может исчисляться десятками тысяч. Если все гиперссылки выполнять в виде графических ролловеров, то потребуется изготовить тысячи рисунков. Размер сайта значительно увеличиться по объёму.
    8. Текстовые ролловеры значительно меньше отвлекают внимание посетителей от товаров и услуг, представленных на сайте. При использовании текстовых ролловеров в бизнес-сайтах посетитель уделяет больше времени изучению товаров и услуг, а не разглядыванию графических анимационных кнопочек (графических ролловеров).
    9. Расстояние, которое указатель мыши проходит от одной кнопки к другой, будет меньше, в случае применения текстовых ролловеров, а не графических. Посетитель может быстрее перемещаться по сайту, система навигации которого выполнена с использованием текстовых ролловеров.

    Систему навигации в бизнес-сайтах целесообразнее выполнять с применением текстовых ролловеров.

    Источник

    Изображения

    Под термином «ролловер» в веб-дизайне понимают визуальный элемент (например, кнопку), меняющий свой вид при таких действиях указателя мыши как наведение и нажатие. Элементы навигации в лабораторной работе 2 можно считать ролловерами, однако часто ролловеры полностью меняют изображение, а не только цвет. Разумеется, этого можно достичь теми же средствами, т.е. определить различные фоновые изображения ролловера в различных состояниях (для гиперссылки, например, таких состояний четыре — link , visited , hover и active ). Однако сменное изображение, загружаясь впервые, создаст ощутимую задержку, что нежелательно. Возможность регулировать позицию фонового изображения предоставляет возможность решения этой проблемы: изображения для всех состояний объединяются в одно, и при смене состояния ролловера меняется только позиция единственного фонового изображения.

    a < background-image: url(A_rollover_bg.png); background-repeat: no-repeat; display: block; min-height: 27px; padding-top: 4px; padding-left: 35px; font-size: 16px; text-decoration: none; >a:visited < background-position: 0 -81px; >a:hover < background-position: 0 -54px; text-decoration: underline; >a:active < background-position: 0 -27px; >div < width: 230px; >. 
    Для гиперссылок в данном примере определено единственное фоновое изображение. Четырём различным состояниям, определённым для гиперссылки (link, visited, hover и active), которым в CSS 2 соответствуют псевдоклассы, назначены разные позиции этого изображения (background-position).
     
    link - (0; 0) active - (0; -27px) hover - (0; -54px) visited - (0; -81px)

    Что будет, если текст ссылок сделать существенно длиннее? А если убрать указание ширины контейнера меню?

    Описанный приём имеет более и широкое применение: множество мелких изображений (маркеров, пиктограмм и т.п.) обычно рационально заменить одним составным, регулируя отображаемую часть средствами позиционирования фоновых изображений. Это сокращает число запросов к веб-серверу при загрузке документа.

    Атрибуты ismap и usemap

    Сообщают браузеру, что изображение представляет собой «навигационную карту», содержащую одну или несколько гиперссылок, которые пользователь может выбирать мышью. Атрибут ismap указывает на серверную навигационную карту и может определяться только в элементе :

    Браузер автоматически посылает серверу координаты мыши относительно левого верхнего угла изображения, когда пользователь щелкает где-то на изображении ismap . Специальная программа на сервере может затем употребить эти координаты при создании ответа.

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

     Web Diagram

    Упражнение. Создайте ещё две области в навигационной карте — они должны ссылаться на страницы http://www.w3schools.com/TAGS/tag_form.asp и http://www.w3schools.com/JS/default.asp. Пусть одна из них будет круглой.

    Вопросы

    1. Какой элемент используется для вставки изображения в документ? Какие атрибуты должен иметь этот элемент?
    2. Какие свойства позволяют указать или ограничить размеры изображения?
    3. Как достигается обтекание изображений текстом?
    4. Какие свойства определяют фоновое изображение элемента?
    5. Для чего используются ролловеры и как они создаются при помощи фоновых изображений?
    6. Как создаётся и действует клиентская навигационная карта?

    Источник

Оцените статью
© 2023 Программирование