Появление блока при наведении на ссылку: jQuery: Событие при наведении на ссылку (появление div)

Разное 

Содержание

Pop-up блоки

tilda help center

Настройка всплывающих окон

Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле, по времени или при закрытии страницы.

Появление блока при клике на ссылку

Чтобы при клике на кнопку появлялось окно с информацией или формой подписки, вам нужно задать специальную ссылку для кнопки. Ссылку можно создать в блоке с всплывающим окном.

1. Откройте Библиотеку блоков → категория «Форма и кнопка» и добавьте pop-up блок. Подходящие блоки: BF501, BF502, BF503, BF504N.

2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).

3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.

4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscribe

Опубликуйте страницу или перейдите в режим предпросмотра, чтобы увидеть, как работает всплывающее окно. Оно будет появляться при клике на кнопку.

Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.

  1. Выделите слово, при клике на которое должен появляться popup.
  2. Через появившееся контекстное меню задайте ссылку на всплывающее окно.
  3. Добавьте popup блок (категория «Форма и кнопка»)
  4. В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword

Появление блока при скролле

Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.

  1. В меню «Контент», пропишите ссылку вида: #subscribepopup (слово может быть любым).

2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в popup блоке.

Время, на которое запоминается посетитель

В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы popup блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы popup блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили popup блок.

Появление блока по времени

Добавьте popup блок, который будет появляться через определенное время. Например, форму подписки или важное напоминание.

  1. В меню «Контент», пропишите ссылку вида: #subscribepopup (слово может быть любым).

2. Добавьте триггер, который будет вызывать появление блока по времени. Триггер находится в категории «Другое».
Нужен блок – T188.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в popup блоке.

В меню «Настройки» укажите время, через которое должен появиться блок – «Тайме (в секундах)».

Время, на которое запоминается посетитель

В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы popup блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы popup блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Через заданное время на странице появится всплывающее окно.

Появление блока при закрытии страницы

Добавьте popup блок, который должен появляться, когда человек закрывает вкладку. Например, форму подписки или информацию о выгодном предложении.

  1. В меню «Контент» пропишите ссылку вида #subscribepopup (слово может быть любым).

2. Добавьте триггер, который вызовет появление блока при закрытии вкладки. Триггер находится в категории «Другое».
Нужен блок – T723.

3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в popup блоке.

Время, на которое запоминается посетитель

В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы popup блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы popup блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Попап будет появляться при подведении курсора к верхней границе браузера.

Будьте осторожны, используя этот тип попапа – обычно их ненавидят.

Добавление интерактивных кнопок в InDesign

Беспристрастный язык. Мы заменяем неинклюзивный язык в InDesign 2022 (версия 17.0) и далее, чтобы отразить основополагающие ценности Adobe в отношении инклюзивности. Любая ссылка на эталонную страницу (Master page) заменяется ссылкой на страницу-шаблон (Parent page) в наших статьях справки для английского, датского, венгерского, испанского, итальянского, бразильского варианта португальского, португальского и японского языков.

Начиная с InDesign версии 15.0 формат файлов Flash (.FLV и .F4V) больше не поддерживается. Все параметры, относящиеся к этим форматам, были удалены с соответствующих панелей. Подробнее см. на странице Прекращение обновления и распространения Flash Player | Влияние на InDesign.

Можно создавать кнопки, выполняющие действие при экспорте документа в формат с фиксированным макетом (EPUB или PDF). Например, можно создать кнопку для перехода на другую страницу или открытия веб-сайта.

Настройка кнопки для воспроизведения фильма в экспортированном документе PDF

При создании кнопки можно выполнить следующие действия:

  • Используйте панель Кнопки и формы, чтобы сделать кнопки интерактивными. Действие выполняется, когда пользователь нажимает кнопку в экспортированном файле с фиксированным макетом (EPUB или PDF). См. раздел Создание интерактивных кнопок.

  • В разделе Оформление панели «Кнопки и формы» задайте изменение внешнего вида кнопки при различных действиях мышью. См. Изменение оформления кнопки при наведении курсора и щелчке мышью.

  • Используйте панель Состояния объекта

    для создания объектов с несколькими состояниями. См. Создание объектов с несколькими состояниями.

  • Создайте эффект «активной области» или «активной ссылки», чтобы при наведении курсора или нажатии кнопки отображалось изображение. См. Создание активной области кнопки.

При работе над кнопками и создании динамических документов выберите рабочую среду «Интерактивные функции PDF».

Создание кнопки

  1. Нарисуйте контур кнопки с помощью инструмента «Карандаш» или инструмента рисования, например «Прямоугольник» или «Эллипс». При необходимости воспользуйтесь инструментом «Текст», чтобы добавить текст кнопки, например «Далее» или «Купить».

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

  2. При помощи инструмента «Выделение» выделите изображение, фигуру или текстовый фрейм, подлежащий преобразованию.

    Возможность преобразовать в кнопку фильм, звук или афишу не предусмотрена.

  3. Нажмите значок Преобразовать объект в кнопку  на панели Кнопки и формы (выберите Окно > Интерактивные элементы > Кнопки и формы). Либо выберите Объект > Интерактивные элементы > Преобразовать в кнопку.

    Преобразовать в кнопку

  4. На панели «Кнопки и формы» выполните следующие действия:

    • Выберите «Кнопка» в раскрывающемся меню Тип.
    • В текстовом поле Название укажите название кнопки, которое будет отличать ее от других созданных кнопок.
    • Укажите событие, которое будет запускать нужное действие.
    • Укажите одно или несколько действий для кнопки, чтобы определить, что будет происходить при срабатывании события в экспортированном файле с фиксированным макетом (EPUB или PDF). См. раздел Создание интерактивных кнопок.
    • Включите дополнительные состояния внешнего вида и задайте соответствующий вид кнопки при наведении указателя мыши или при щелчке в экспортированном файле с фиксированным макетом (EPUB или PDF). См. Изменение оформления кнопки при наведении курсора и щелчке мышью.

  5. Воспользуйтесь панелью Предварительный просмотр (Окно > Интерактивные элементы > Просмотр интерактивности EPUB), чтобы протестировать кнопку, прежде чем экспортировать документ в формате с фиксированным макетом (EPUB или PDF) и интерактивными элементами. Вы также можете опубликовать свой документ в Интернете с помощью Publish Online.

Добавление кнопки из панели «Образцы кнопок»

На панели «Образцы кнопок» имеется множество предварительно созданных кнопок, которые можно перетаскивать в документ. В этих образцах кнопок реализованы такие эффекты, как «Градиентная растушевка» и «Тень», отображение этих кнопок незначительно отличается в оформлении «Курсор над кнопкой» (Rollover). Образцам кнопок также назначены действия. Например, образцам кнопок со стрелками предварительно назначены действия «Перейти на следующую страницу» или «Перейти на предыдущую страницу».

Параметры этих кнопок можно изменить с учетом требований пользователя.

Панель «Образцы кнопок» представляет собой библиотеку объектов. Эта библиотека объектов позволяет добавлять кнопки на панель и удалять ненужные (См. Использование библиотек объектов). Образцы кнопок хранятся в файле ButtonLibrary.indl, расположенном в папке Presets/Button Library папки приложения InDesign.

  1. Выберите Образцы кнопок и форм из меню панели «Кнопки и формы», чтобы открыть панель «Образцы кнопок и форм».

    Откройте панель «Образцы кнопок и форм»

  2. Перетащите кнопку с панели Образцы кнопок и форм в документ. Если кнопки навигации должны отображаться на каждой странице, разместите их на странице-шаблоне.

    Панель «Образцы кнопок и форм»

  3. Выберите нужную кнопку с помощью инструмента «Выделение» и отредактируйте свойства кнопки на панели «Кнопки и формы».

    При редактировании образцов кнопок необходимо иметь в виду следующее:

    • При добавлении текста к кнопке не забудьте скопировать и вставить текст из состояния кнопки «Обычный» в состояние «Курсор над кнопкой».

      В противном случае добавленный вами текст не будет отображаться при наведении указателя мыши на кнопку в файле с фиксированным макетом (EPUB или PDF).

    • Размеры кнопок можно изменять. При перетаскивании пары кнопок со стрелками «след. страница»/«пред. страница» измените размеры первой кнопки, затем выделите вторую кнопку и выберите Объект > Повторить преобразование > Повторить преобразование.

  4. Воспользуйтесь панелью Предварительный просмотр (Окно > Интерактивные элементы > Просмотр интерактивности EPUB), чтобы протестировать кнопку, прежде чем экспортировать документ в формате с фиксированным макетом (EPUB или PDF) и интерактивными элементами. Вы также можете опубликовать свой документ в Интернете с помощью Publish Online.

Преобразование кнопки в объект

При преобразовании кнопки в объект содержимое кнопки сохраняется на странице без использования свойств кнопки. Любое содержимое, связанное с другими состояниями кнопки, также удаляется.

  1. При помощи инструмента «Выделение» выделите кнопку.

  2. Выберите Объект > Интерактивные элементы > Преобразовать в объект.

Эта кнопка настраивается таким образом, чтобы при нажатии кнопки мышью воспроизводился звук.

В программе InDesign предусмотрена возможность создавать и редактировать интерактивные эффекты, а также управлять ими. Такие действия и эффекты могут быть доступны при экспорте документа в формат с фиксированным макетом (EPUB или PDF).

Например, нужно создать кнопку, воспроизводящую звук в документе PDF. Для этого можно поместить в документ InDesign звуковой файл, затем создать кнопку, которая запускает воспроизведение звука при нажатии на нее в документе PDF.

В данном примере щелчок кнопкой мыши является событием, а воспроизведение звука — действием.

Некоторые действия поддерживаются в PDF и EPUB, а некоторые только в одном из этих форматов.

При экспорте в формат EPUB не выбирайте действия, доступные только в PDF. И наоборот при экспорте в PDF не выбирайте действия, доступные только в EPUB.

Добавление действий для кнопок

Для разных событий можно назначать различные действия. Например, в экспортированном файле PDF можно указать, что при наведении указателя мыши на кнопку воспроизводится определенный звук, а воспроизведение фильма запускается после того, как пользователь щелкнет эту кнопку и отпустит ее. Кроме того, для одного и того же события можно назначить несколько действий. Например, можно создать действие, которое запускает воспроизведение фильма и устанавливает для масштаба просмотра значение «Реальный размер».

  1. Выделите созданную кнопку с помощью инструмента «Выделение» .

  2. На панели «Кнопки и формы» выберите событие, например «При отпускании», определяющее момент активации действия.

  3. Щелкните кнопку со значком «плюс» рядом со списком «Действия» и назначьте действие выбранному событию.

  4. Укажите параметры действия.

    Например, если выбрано действие «Перейти на первую страницу», укажите масштаб. Если выбрано действие «Перейти к URL», укажите адрес веб-страницы. Для некоторых действий, например «Перейти к следующему виду», отсутствуют дополнительные настройки.

  5. При необходимости продолжите добавление необходимых действий в событие.

  6. Чтобы протестировать кнопку, экспортируйте документ в формат с фиксированным макетом (EPUB или PDF) и просмотрите полученный файл. При экспорте в PDF убедитесь, что в поле «Интерактивные элементы» установлен флажок.

Типы событий

События определяют, какие действия срабатывают при нажатии кнопок в документах, экспортированных в формат EPUB или PDF. (В программе Acrobat события называются триггерами).

При отпускании кнопки или касании.

При отпускании кнопки мыши после щелчка. Это самое распространенное событие, поскольку оно дает пользователю последнюю возможность отвести курсор от кнопки и не активизировать действие.

При щелчке.

Кнопка мыши нажата (и не отпущена). Если отсутствуют какие-то конкретные причины для использования событий On Click, предпочтительнее применять событие On Release, поскольку они позволяют отменить выбранное действие.

При наведении курсора.

Курсор мыши входит в область кнопки, определяемой ограничительной рамкой кнопки.

При отведении курсора.

Курсор мыши покидает область кнопки.

Активное состояние (PDF).

Кнопка в файле PDF получает фокус в результате нажатия кнопки мыши или клавиши Tab.

Пассивное состояние (PDF).

Фокус перемещен на другую кнопку или на другое поле формы в файле PDF.

Типы действий

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

Перейти к точке привязки.

Переход к указанной текстовой привязке, созданной с использованием панелей «Закладки» или «Гиперссылки». См. Создание переходов к текстовым привязкам.

Переход к первой/последней/следующей/предыдущей странице.

Переход к первой, последней, предыдущей или следующей странице в файле с фиксированным макетом (EPUB или PDF). Выберите один из пунктов в меню «Масштаб», чтобы настроить отображение страницы.

Перейти по URL-адресу.

Открывает веб-страницу по указанному URL-адресу.

Показать/скрыть кнопки и формы.

Переключение между отображением и скрытием указанных кнопок в экспортированном файле с фиксированным макетом (EPUB или PDF). Например, если требуется появление одной кнопки, когда курсор наводится на другую кнопку, можно скрыть целевую кнопку до наступления соответствующего события и создать действие, которое будет отображать скрытую кнопку при наведении курсора. См. раздел Отображение другой кнопки при наведении курсора.

Относится только к EPUB/Publish Online

Анимация

Позволяет воспроизводить, приостанавливать и останавливать выбранную анимацию, а также возобновлять воспроизведение. В меню «Анимация» отображаются только те анимированные объекты, которые были добавлены в документ.

Перейти к странице

Переход на указанную страницу в файле EPUB.

Перейти в состояние

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

Перейти в следующее/предыдущее состояние

Переход к следующему или предыдущему состоянию для объекта, имеющего несколько состояний. Эти параметры оказываются особенно полезными при управлении слайд-шоу. См. Создание объектов с несколькими состояниями.

Звук

Позволяет воспроизводить, приостанавливать и останавливать выбранный звуковой клип, а также возобновлять его воспроизведение. В меню «Звук» отображаются только те звуковые клипы, которые были добавлены в документ.

Видео

Позволяет воспроизводить, приостанавливать и останавливать выбранный фильм, а также возобновлять воспроизведение. В меню «Видео» отображаются только те фильмы, которые были добавлены в документ.

Относится только к PDF

Очистить форму

Очистка всех данных в заполненных полях формы и возвращение формы в исходное состояние.

Перейти к следующему виду

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

Перейти к предыдущему виду

Переход к предыдущей просмотренной странице в документе PDF или возврат к предыдущему масштабу.

Открыть файл

Запускает приложение и открывает указанный файл. Если указан файл, отличный от PDF, то для успешного открытия этого файла читателю потребуется приложение, предназначенное для работы с файлами этого типа. Укажите абсолютный путь к файлу (например, C:\docs\sample.pdf).

Печать формы

Открывает диалоговое окно для печати формы.

Отправить форму

Отправляет данные в заполненных полях формы по указанному URL-адресу. Необходимо ввести mailto: в поле URL, а затем адрес электронной почты для отправки заполненной формы на указанный адрес. Убедитесь, что до и после двоеточия (:) нет пробелов.

Масштаб просмотра

Отображение страницы в соответствии с параметрами инструмента «Масштаб». Можно изменять уровень масштабирования страницы (например, «Реальный размер»), макет страницы (например, «Непрерывно разворотами») или направление поворота.

Редактирование или удаление действий кнопок

  1. При помощи инструмента «Выделение» выделите кнопку.

  2. На панели «Кнопки и формы» выполните любое из следующих действий:

    • Чтобы деактивировать действия, снимите флажки рядом с соответствующими элементами. Деактивация событий и действий может потребоваться при тестировании.
    • Чтобы изменить порядок следования, перетащите действия.
    • Чтобы удалить действие, выделите его в списке и нажмите кнопку «Удалить выделенное действие» .
    • Чтобы отредактировать действие, выберите событие, которому оно назначено, выделите действие в списке и измените настройки. Если нужно заменить действие для существующего события, удалите это действие, затем добавьте в событие новое действие.

Создание переходов к текстовым привязкам

После создания в документе InDesign привязки появляется возможность переходить к этой привязке при нажатии кнопки, даже если эта кнопка находится в другом документе InDesign. Текстовые привязки можно добавлять на панелях «Закладки» и «Гиперссылки». Невозможно создавать переходы от кнопок к закладкам, которые не являются текстовыми привязками.

Если в качестве привязки гиперссылки задана кнопка, то эта гиперссылка не будет работать в экспортированном документе PDF, SWF или EPUB с фиксированным макетом.

  1. При помощи инструмента «Выделение» выделите кнопку.

  2. На панели «Кнопки и формы» выберите событие, например «При отпускании», которое будет инициировать переход.

  3. Щелкните кнопку со значком «плюс» рядом со списком «Действия» и выберите пункт «Перейти к точке привязки».

  4. Выберите один из открытых документов InDesign из меню «Документы» или щелкните значок папки справа от меню и укажите файл.

  5. Укажите привязку, созданную с помощью панелей «Закладки» или «Гиперссылки».

  6. Выберите один из пунктов в меню «Масштаб», чтобы настроить отображение страницы.

Если указанная привязка находится в другом документе, то следует экспортировать этот целевой документ в формат PDF и задать для него такое же название файла, как у документа InDesign, заменив расширение INDD на PDF. Кроме того, документы PDF должны храниться в одной и той же папке, поскольку это гарантирует, что ссылки останутся действительными в программах Acrobat и Reader.

Кнопка состоит из группы отдельных объектов, каждый из которых отвечает за определенное оформление кнопки (иногда называемое «состоянием»). Каждая кнопка может иметь до трех состояний: «Не нажата», «Курсор над кнопкой» и «Нажата». В экспортированном файле кнопка находится в состоянии «Не нажата», если на нее не наведен указатель мыши (состояние «Курсор над кнопкой») или на ней не сделан щелчок кнопкой мыши (после щелчка кнопка переходит в состояние «Нажата»). Все состояния можно сделать различными по оформлению.

По умолчанию любая создаваемая кнопка отображается в состоянии «Не нажата» с соответствующим текстом или изображением. При активации нового состояния копируется оформление состояния «Не нажата». Чтобы сделать состояния отличающимися, можно изменить цвет, добавить текст или изображение.

Состояния кнопки

A. Указатель мыши не наведен на кнопку («Не нажата») B. Указатель мыши наведен на кнопку («Курсор над кнопкой») C. Щелчок указателя кнопки («Нажата») 

Активная область кнопки представляет собой квадратное поле с ограничительной рамкой состояния кнопки, имеющего максимальный размер. Например, у круглой кнопки активная область имеет форму квадрата.

Изменение оформления кнопок

При создании кнопки с несколькими состояниями («Не нажата», «Курсор над кнопкой», «Нажата») следует выполнить ее дизайн до активации других состояний. При активации состояния «Курсор над кнопкой» или «Нажата» копируется состояние «Не нажата».

Некоторые изменения влияют только на выбранное состояние, в то время как другие изменения влияют на все активные состояния. Если выбрать состояние и затем изменить его фоновый цвет или отредактировать текст, это изменение повлияет только на выбранное состояние. Если для перемещения или изменения размера кнопки используется инструмент «Выделение», то это изменение повлияет на все состояния.

  1. Выберите Окно > Интерактивные элементы > Кнопки и формы, чтобы открыть панель «Кнопки и формы».

  2. При помощи инструмента «Выделение»  выделите в макете кнопку, которую необходимо изменить.

  3. Нажмите [Курсор над кнопкой], чтобы активировать состояние «Курсор над кнопкой».

    Состояние «Не нажата» копируется в состояние «Курсор над кнопкой».

  4. При выбранном состоянии «Курсор над кнопкой» измените оформление кнопки.

    • Чтобы изменить цвет, выберите образец в меню «Обводка» или «Заливка» на панели «Управление».
    • Чтобы поместить изображение в оформление, выберите существующее изображение с помощью инструмента прямого выделения или дважды щелкните существующее изображение кнопки, а затем выберите Файл > Поместить и дважды щелкните значок файла.
    • Чтобы вставить изображение в текстовый фрейм, скопируйте его в буфер обмена, выделите оформление на панели «Кнопки», а затем выберите Редактирование > Вставить в.
    • Чтобы ввести текст, выберите инструмент «Текст», щелкните кнопку и введите текст. Можно также выбрать Редактирование > Вставить в, чтобы скопировать вставленный текстовый фрейм.

  5. Чтобы добавить состояние «Нажата», щелкните строку [Нажата] для ее активации, а затем выполните описанные выше действия по изменению оформления.

  6. Воспользуйтесь панелью «Предварительный просмотр» для проверки различных состояний кнопки.

Чтобы изменить размер миниатюр «Оформление состояния» на панели «Кнопки», выберите «Параметры панели» в меню панели «Кнопки и формы», задайте нужное значение и нажмите «ОК».

Удаление и отключение состояний

  1. Выберите состояние на панели «Кнопки и формы».

  2. Выполните одно из действий, описанных ниже.

    • Чтобы удалить состояние «Курсор над кнопкой» или «Нажата», нажмите значок «Удалить» в нижней части панели. Удаление состояния особенно полезно, если состояние «Не нажата» было существенно отредактировано, и вы хотите использовать новое состояние «Не нажата» в качестве базы для состояния «Курсор над кнопкой» или «Нажата».
    • Чтобы отключить состояние, не удаляя его, щелкните значок глаза рядом с нужным состоянием. Отключены состояния, не экспортированные в файл с фиксированным макетом (EPUB или PDF).

Удалить или отключить состояние «Не нажата» нельзя.

Панель «Состояния объекта» позволяет создать несколько версий одного объекта. Состояние — это версия элемента страницы. Объект, который содержит несколько состояний, называется объектом с несколькими состояниями.

На панели «Состояния объекта» не существует ограничений на количество состояний, которые можно создать для одного объекта. Каждый раз при создании нового состояния создается новая версия элемента страницы. В каждый момент на странице отображается только одно состояние. При печати и экспорте в PDF используется только активное состояние.

Один из наиболее распространенных сценариев использования для объекта с несколькими состояниями — слайд-шоу, демонстрирующее пользователю набор изображений в файле EPUB. Допустим, вы можете создать слайд-шоу из 20 изображений, не размещая их на 20 различных страницах.

  1. Поместите изображения, которые появятся в слайд-шоу.

    Рекомендуется использовать фреймы изображений одинакового размера.

    Состояние не обязательно должно представлять собой один элемент: это может быть серия элементов.

  2. Чтобы упорядочить изображения, выделите их и щелкните значки «Выравнивание центров по горизонтали»  и «Выравнивание центров по вертикали»  на панели «Управление».

  3. С выбранными изображениями откройте панель Состояния объекта (Окно > Интерактивные элементы > Состояния объекта) и нажмите кнопку Преобразовать выбранные элементы в объект с несколькими состояниями .

    Изображения отобразятся в качестве состояний на панели Состояния объекта, вокруг выбранных изображений будет пунктирная граница.

    Преобразовать выделенные объекты в объект с несколькими состояниями

  4. Создайте кнопки навигации, запускающие действия Перейти в следующее состояние и Перейти в предыдущее состояние при отпускании кнопки мыши. См. раздел Создание кнопок.

  5. Воспользуйтесь панелью «Предварительный просмотр» (Окно > Интерактивные элементы > Просмотр интерактивности EPUB ), чтобы протестировать кнопки навигации.

  6. Экспортируйте документ в формат EPUB. См. раздел Интерактивные документы.

  1. Выберите объект с несколькими состояниями.

  2. На панели «Состояния объекта» выполните одно из следующих действий.

    • Чтобы изменить состояние, выделите состояние на панели «Состояния объекта» и отредактируйте объект. Например, можно добавить обводку, заливку или изменить размер объекта.

    • Чтобы добавить объект в существующее состояние объекта с несколькими состояниями, выделите оба объекта и нажмите кнопку «Добавить объекты в видимое состояние» .

    • Чтобы добавить объект в существующих объект с несколькими состояниями, выберите и объект, и объект с несколькими состояниями, затем щелкните кнопку «Преобразовать выделение в объект с несколькими состояниями» .

    • Чтобы дублировать состояние, выделите его и выберите пункт «Новое состояние» в меню палитры. Добавьте, удалите или измените содержимое этого состояния.

    • Чтобы вставить объекты в существующее состояние, вырежьте или скопируйте один или несколько объектов, выделите объект с несколькими состояниями, выберите нужное состояние на панели «Состояния объекта» и выберите команду «Вставить в состояние» в меню панели «Состояния объекта».

    • Чтобы преобразовать состояние объекта с несколькими состояниями в отдельный объект, выберите это состояние на панели «Состояния объекта» и щелкните «Преобразовать состояние в объекты» в меню панели. Чтобы преобразовать все состояния объекта с несколькими состояниями в объекты, выберите команду «Преобразовать все состояния в объекты».

    • Чтобы удалить состояние и его содержимое, выберите состояние и щелкните команду «Удалить состояние» в меню панели.

    • Чтобы скрыть объект с несколькими состояниями в экспортированном файле, до тех пор пока он не будет активирован соответствующей кнопкой, выберите команду «Скрыть до активации» в меню панели.

    • Чтобы выполнить сброс всех объектов с несколькими состояниями в первое состояние, щелкните в меню панели команду «Сброс всех объектов с несколькими состояниями в первое состояние». При выборе состояния объект остается в этом состоянии, даже если вы закроете и вновь откроете документ. При помощи этого параметра можно быстро сбросить в первоначальное состояние все объекты с несколькими состояниями.

В некоторых случаях нужно, чтобы область кнопки («активная область» или «ссылка») не отображалась до тех пор, пока на нее не будет наведен курсор мыши. Например, при наведении указателя на кнопку карты может появляться изображение, соответствующее определенному региону, а после выхода указателя за пределы участка карты это изображение будет исчезать.

В экспортированном файле PDF отображение курсора над активной областью приводит к появлению изображения.

Отображение скрытого изображения при эффекте ролловера

Один из способов достижения эффекта «активной области» — применение некоторого изображения к состоянию «Курсор над кнопкой» на панели «Кнопки». Для этого создайте кнопку, которая в состоянии [Курсор над кнопкой] будет отображать изображение, а в состоянии [Не нажата] не отображать его.

  1. Выберите изображение, которое будет использоваться в качестве активной области. Убедитесь, что фрейм изображения не имеет границ или фона.

  2. На панели «Кнопки и формы» (Окно > Интерактивные элементы > Кнопки и формы), выберите состояние [Не нажата], чтобы преобразовать выбранное изображение в кнопку.

  3. Щелкните состояние [Курсор над кнопкой] на панели «Кнопки и формы», чтобы активировать его.

  4. Еще раз щелкните состояние [Не нажата]. Выделите изображение при помощи инструмента «Прямое выделение»  и удалите его.

    Убедитесь в том, что вы удалили изображение (содержимое фрейма), а не фрейм вместе с содержимым. При удалении фрейма будет удалена и кнопка.

  5. Воспользуйтесь панелью «Предварительный просмотр» для предварительного просмотра эффекта активной области.

Отображение другой кнопки при наведении курсора

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

  1. Создайте объект, который будет использоваться в качестве исходной кнопки. На панели «Кнопки и формы» нажмите значок «Преобразовать объект в кнопку».

  2. Поместите изображение, которое будет использоваться в качестве кнопки-объекта, и преобразуйте его в кнопку.

  3. Выделите целевое изображение и выберите параметр «Скрыть до запуска» в нижней части панели «Кнопки и формы».

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

  4. Выберите исходную кнопку и создайте два различных действия, одно из которых будет отображать изображение-объект, а второе — скрывать его.

    Если изображение должно появляться при наведении курсора на исходную кнопку, выберите события On Roll Over и On Roll Off. Если изображение должно появляться при щелчке на исходной кнопке и исчезать при отпускании кнопки мыши, выберите события On Click и On Release. В любом случае воспользуйтесь действием «Показать/скрыть кнопки», чтобы отобразить или скрыть кнопку-объект. См. раздел Создание интерактивных кнопок.

  5. Проверьте работу кнопок на панели «Предварительный просмотр».

Изменение параметров PDF для кнопок

  1. При помощи инструмента «Выделение» выделите кнопку.

  2. В меню панели «Кнопки и формы» выберите «Параметры PDF».

  3. Введите описание, которое будет играть роль дополнительного текста для пользователей с ослабленным зрением.

  4. Укажите, будет ли кнопка выводиться на печать в файле PDF, и нажмите «ОК».

Порядок вкладок определяет следующее (или предыдущее) поле, в которое переместится фокус при нажатии клавиши Tab (или сочетания Shift+Tab) в документе PDF. Определение порядка табуляции включает кнопки на скрытых слоях, но не на страницах-шаблонах.

  1. Переход к странице с кнопками.

  2. Выберите Объект > Интерактивные элементы > Задать порядок табуляции.

  3. Выберите одну за другой нужные кнопки и переместите их на нужное место путем перетаскивания или с помощью кнопок «Переместить вверх» и «Переместить вниз». После завершения нажмите кнопку «ОК».

Если для редактирования PDF и добавления дополнительных кнопок или полей форм на страницу используется программа Acrobat, то в ней, возможно, потребуется указать новый порядок табуляции.

Создавайте и публикуйте электронные книги, брошюры, листовки, открытки, плакаты, интерактивные макеты страниц и многое другое с помощью Adobe InDesign.

Связанные материалы

  • Описание панели «Гиперссылки»
  • Формы PDF
  • Предпросмотр интерактивности EPUB

Как изменить цвет блока при наведении курсора в css

Меняем цвет элемента по наведению мышки

В данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.

Делается данная «штука» при помощи стилей CSS, т. е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2019

Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:

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

Вот так выглядит код данного блока:

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер <div> , <li> и прочие подходящие теги.

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div >тут ссылки<div> . У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style. css, css.css, core.css или еще как-то).

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ ).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside . Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

В данной статье я показал как работает смена цвета элементов на самом обычном примере. Если хотите развиваться далее, то почитайте профильную литературу и справочники по CSS.

Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.

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

Обратная анимация CSS (изменение цвета) при наведении и убирании курсора

Основная цель была такая:
cоздать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения курсора — менял цвета в обратном порядке и возвращался в исходное состояние. Всё это хотел реализовать только средствами html и css.

Сначала решил использовать transition, но там, как я понял, цвет можно изменить только 1 раз (зато в обратную сторону переход работает).

Потом попробовал сделать анимацию с помощью animation и @keyframes, получилось уже ближе к тому, что я хотел:

Только вот после отведения курсора, как со свойством transition, обратная анимация не выполняется.

Затем я добавил ещё 1 правило для обратной анимации изменения цвета, уже почти получилось то, что я хотел, но анимация теперь начинается сразу же после загрузки или обновления страницы, а мне это не нужно:

Можно ли как-то убрать начальную анимацию при загрузке страницы, и есть ли аналогичные и более простые способы реализовать данную анимацию средствами html и css, либо же всё-таки для этого нужен JavaScript?

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

Основная цель была такая: Создать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения — менял цвета в обратном порядке и возвращался в исходное состояние.

Обдумайте вариант использования анимации SVG. Поддержка её расширяется
SVG ведёт себя, как обычный блок, к которому применимы правила CSS. Кроме того, svg можно обернуть в родительский контейнер div > и сделать приложение адаптивным, которое будет полностью заполнять родительский блок и не мешать другим элементам вёрстки.

Кроме того сравните краткость кода решения SVG по сравнению с анимацией CSS.
На более сложных примерах эта разница будет ещё более ощутимой.

Приложение адаптивно и работает во всех современных браузерах включая Edge

Эффекты при наведении на текст CSS

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

При наведении на текст меняется цвет CSS

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

Пример

Зачеркнутый текст CSS

Эффект при наведении с зачеркнутым текстом подойдет для того, чтобы выделить фрагмент текста или обратить внимание пользователя на него. Цвет текста и линии одинаковый.

Пример

Зачеркнутая ссылка или текст при наведении другим цветом CSS

Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.

Пример

Появление тени для текста при наведении CSS

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

Пример

Анимация с подчёркивающей и исчезающей линией у ссылки CSS

Этот эффект при наведении подойдет как для ссылки, так и для заголовка и текста, если это необходимо. С помощью такого эффекта можно выделить ключевые моменты и сделать сайт интереснее.

Пример

Анимация с подчёркивающей линией у ссылки CSS

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

Пример

Изменение фона и цвета ссылки CSS

Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.

Пример

Увеличение текста при наведении CSS

Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.

Пример

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Показ описания при наведении на картинку

Руслан066
Новичок