Инструкция за създаване на изображение за преобръщане в Dreamweaver

Изображението за преобръщане представлява изображение, което се променя на друго изображение, когато вие или вашият клиент премествате мишката върху него. Те обикновено се използват за създаване на интерактивно усещане като бутони или раздели. Но можете да създадете изображения за преобръщане от почти всичко.

Този урок е предназначен да ви помогне да създадете изображение за преобръщане в Dreamweaver. Той е предназначен за използване от хора, използващи следните версии на Dreamweaver:

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

Изисквания за този урок

DreamweaverЕдна от изброените по-горе версии.
Оригинално изображениеУверете се, че сте оптимизирали това изображение. Това ще помогне на страниците ви да се зареждат по-бързо.
Снимката за преобръщанеТова изображение трябва да има същите размери като оригиналното изображение. И, подобно на оригиналното изображение, трябва да бъде оптимизирано, за да помогне за зареждането на страниците.
Уеб страницаТова е HTML страницата, където ще поставите вашето изображение за преобръщане.

Първи стъпки

Стартирайте Dreamweaver
Отворете уеб страницата, където искате да преобръщане

Поставете обект за преобразуване на изображение

Dreamweaver улеснява създаването на изображение за преобръщане.

Отидете в менюто Вмъкване и надолу до Обекти за изображения подменю.
Изберете Преобръщане на изображения или Преобръщане на изображение.

Някои по-стари версии на Dreamweaver вместо това наричат Image Objects "Interactive Images".

Кажете на 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 за преобръщане

Ако сте избрали Dreamweaver да зарежда изображенията за преобръщане, ще видите HTML кода в тялото на документа, за да се обадите на скрипта за предварително зареждане, така че снимките ви да се зареждат по-бързо.

при зареждане = "MM_preloadImages (" shasta2.jpg ")"
Dreamweaver също добавя целия код за вашето изображение и го свързва (ако сте въвели URL адрес). Частта за преобръщане се добавя към етикета на котвата като атрибути "onmouseover" и "onmouseout".

onmouseout = "MM_swapImgRestore ()"поставяне на показалеца = "MM_swapImage (" Image1 "," "," shasta1.jpg ', 1) "
Изпробване на преобръщане

Вижте пълното функционално изображение на преобръщане и научете какво е на ума на Шаста.