Как создать изображение ролловера в Dreamweaver

Ролловер – это изображение, которое меняется на другое изображение, когда вы или ваш клиент наводите на него указатель мыши. Они обычно используются для создания интерактивного ощущения, такого как кнопки или вкладки. Но вы можете создавать ролловеры из всего, что угодно.

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

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Требования для этого урока

• Dreamweaver
  Одна из перечисленных выше версий.
• Исходное изображение
  Обязательно оптимизируйте это изображение. Это поможет вашим страницам загружаться быстрее.
• Изображение ролловера
  Размеры этого изображения должны быть такими же, как у исходного изображения. И, как и оригинальное изображение, следует оптимизировать время загрузки страницы.
• Веб-страница .
  Это HTML-страница, на которую вы поместите свое изображение.

Начать

1. Запустить Dreamweaver
2. Откройте веб-страницу, где вы хотите, чтобы ваш ролловер

Вставьте объект изображения Rollover

Dreamweaver позволяет легко создавать ролловеры.

1. Перейдите в меню «Вставка» и перейдите в подменю Объекты изображения .
2. Выберите Ролловер изображения или Ролловер изображения .

Некоторые старые версии Dreamweaver вместо этого называют объекты изображений «Интерактивные изображения».

Скажите Dreamweaver, какие изображения использовать

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

Название изображения

Выберите имя изображения, которое является уникальным для страницы. Это должно быть все одно слово, но вы можете использовать цифры, подчеркивания (_) и дефисы (-). Это будет использоваться для идентификации изображения для изменения.

Исходное изображение

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

Rollover Image

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

Prelo Rollover Image

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

Альтернативный текст

Хороший альтернативный текст делает ваши изображения более доступными. Вы должны всегда использовать какой-то тип альтернативного текста при добавлении любых изображений.

При нажатии перейдите по URL

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

Когда вы заполните все поля, нажмите ОК , чтобы Dreamweaver создал ваше изображение для ролловера.

Dreamweaver пишет JavaScript для вас

Если вы откроете страницу в режиме просмотра кода, то увидите, что Dreamweaver вставляет блок JavaScript в ваш 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)" 

Тест ролловера

Посмотрите полностью функциональное изображение ролловера и узнайте, что думает Шаста.