Образ опрокидывания - это изображение, которое изменяется на другое изображение, когда вы или ваш клиент набрасываете на него указатель мыши. Они обычно используются для создания интерактивного ощущения, такого как кнопки или вкладки. Но вы можете создавать изображения опрокидывания практически из чего угодно.
Этот учебник разработан, чтобы помочь вам создать изображение опрокидывания в Dreamweaver. Он предназначен для использования людьми, использующими следующие версии Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Требования к этому учебнику
- DreamweaverОдна из версий, перечисленных выше.
- Исходное изображениеОбязательно оптимизируйте это изображение. Это поможет вашим страницам загружаться быстрее.
- Изображение опрокидыванияЭто изображение должно быть того же размера, что и исходное изображение. И, как и исходное изображение, следует оптимизировать, чтобы помочь время загрузки страницы.
- Веб-страницаЭто страница HTML, на которой вы разместите свое изображение опрокидывания.
Начать
- Запустить Dreamweaver
- Откройте веб-страницу, где вы хотите, чтобы ваш опрос
Вставить объект изображения с опрокидыванием
Dreamweaver упрощает создание обратного просмотра.
- Перейдите в меню «Вставка» и Объекты изображения подменю.
- Выбрать Прокрутка изображения или же Ролловер.
Некоторые более старые версии Dreamweaver вызывают объекты «Интерактивные изображения» объектов изображений.
Скажите Dreamweaver, какие изображения использовать
Dreamweaver открывает диалоговое окно с полями, которые необходимо заполнить, чтобы создать ваше изображение опрокидывания.
Название изображения
Выберите имя изображения, уникальное для страницы. Это должно быть все одно слово, но вы можете использовать числа, символы подчеркивания (_) и дефисы (-). Это будет использоваться для идентификации изображения для изменения.
Оригинальное изображение
Это URL или местоположение изображения, которое начнется на странице. Вы можете использовать относительные или абсолютные URL-адреса пути в этом поле. Это должно быть изображение, которое существует на вашем веб-сервере или которое вы загружаете со страницы.
Изображение опрокидывания
Это изображение, которое будет отображаться при наведении указателя мыши на изображение. Как и исходное изображение, это может быть абсолютный или относительный путь к изображению, и он должен существовать или загружаться при загрузке страницы.
Изображение с предварительным загрузкой
Эта опция выбрана по умолчанию, поскольку она помогает ускорить опрокидывание. Выбрав предварительную загрузку изображения опрокидывания, веб-браузер сохранит его в кеше до тех пор, пока мышь не перевернет его.
Альтернативный текст
Хороший альтернативный текст делает ваши изображения более доступными. При добавлении любых изображений всегда следует использовать какой-либо альтернативный текст.
При нажатии кнопки «Перейти к URL»
Большинство людей нажимают на изображение, когда видят его на странице. Таким образом, вы должны привыкнуть к тому, чтобы сделать их интерактивными. Этот параметр позволяет указать страницу или URL-адрес, чтобы привлечь зрителя, когда они нажимают на изображение. Но этот параметр не требуется для создания опрокидывания.
Когда вы заполните все поля, нажмите Хорошо чтобы Dreamweaver создал ваше изображение опрокидывания.
Dreamweaver записывает JavaScript для вас
Если вы откроете страницу в режиме просмотра кода, вы увидите, что Dreamweaver вставляет блок JavaScript в
вашего HTML-документа. Этот блок включает в себя 3 функции, необходимые для обмена изображениями, когда мышь перекатывается над ними и функция предварительной загрузки, если вы решили это сделать.
функция MM_swapImgRestore ()функция MM_findObj (n, d)функция MM_swapImage ()функция MM_preloadImages () Если вы решили, чтобы Dreamweaver предварительно загрузил изображения опрокидывания, вы увидите код HTML в теле вашего документа, чтобы вызвать сценарий предварительной загрузки, чтобы ваши изображения загружались быстрее. OnLoad = "MM_preloadImages ( 'shasta2.jpg')" Dreamweaver также добавляет весь код для вашего изображения и связывает его (если вы указали URL-адрес). Часть опрокидывания добавляется к тегу привязки как атрибуты onmouseover и onmouseout. onmouseout = "MM_swapImgRestore ()"OnMouseOver = "MM_swapImage ( 'Изображение1', '', 'shasta1.jpg', 1)" Посмотрите полнофункциональное изображение опрокидывания и узнайте, что на уме у Шасты. Dreamweaver Добавляет HTML для ролловера
Проверить опрокидывание
