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