Изображението за преобръщане представлява изображение, което се променя на друго изображение, когато вие или вашият клиент премествате мишката върху него. Те обикновено се използват за създаване на интерактивно усещане като бутони или раздели. Но можете да създадете изображения за преобръщане от почти всичко.
Този урок е предназначен да ви помогне да създадете изображение за преобръщане в Dreamweaver . Той е предназначен за използване от хора, използващи следните версии на Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Изисквания за този урок
- Dreamweaver
Една от изброените по-горе версии. - Оригинално изображение
Уверете се, че сте оптимизирали това изображение. Това ще помогне на страниците ви да се зареждат по-бързо. - Снимката за преобръщане
Това изображение трябва да има същите размери като оригиналното изображение. И, подобно на оригиналното изображение, трябва да бъде оптимизирано, за да помогне за зареждането на страниците. - Уеб страница
Това е HTML страницата, където ще поставите вашето изображение за преобръщане.
01 от 06
Първи стъпки
- Стартирайте Dreamweaver
- Отворете уеб страницата, където искате да преобръщане
02 от 06
Вмъкване на обект за преобразуване на изображение при преобръщане
Dreamweaver улеснява създаването на изображение за преобръщане.
- Отидете в менюто Вмъкване и надолу до подменюто "Image Objects".
- Изберете "Преобръщане на изображение" или "Преобръщане на изображение"
Някои по-стари версии на Dreamweaver вместо това наричат Image Objects "Interactive Images".
03 от 06
Кажете на Dreamweaver какви изображения да използвате
Dreamweaver изскача диалогов прозорец с полетата, които трябва да попълните, за да създадете своето изображение за преобръщане.
Име на изображението
Изберете едно име на изображението, което е уникално за страницата. Трябва да е само една дума, но можете да използвате цифри, долни черти (_) и тирета (-). Това ще бъде използвано за идентифициране на изображението, което да се промени.
Оригинално изображение
Това е URL адресът или местоположението на изображението, което ще започне на страницата. В това поле можете да използвате URL адреси на относителни или абсолютни пътища . Това трябва да е изображение, което съществува на уеб сървъра ви или ще го качите със страницата.
Преобръщане на изображението
Това е изображението, което ще се появи при натискане на мишката върху изображението. Точно като оригиналното изображение, това може да бъде абсолютен или относителен път към изображението и трябва да съществува или да бъде качен, когато качите страницата.
Предварително зареждане на изображението
Тази опция е избрана по подразбиране, защото помага за по-бързото преобразуване. Избирайки да зареждате изображението за преобръщане, уеб браузърът ще го съхранява в кеш памет, докато мишката се преобърне.
Алтернативен текст
Добър алтернативен текст прави вашите изображения по-достъпни. Винаги трябва да използвате някакъв вид алтернативен текст, когато добавяте изображения.
Когато е кликнато, отидете на URL адрес
Повечето хора ще кликнат върху изображение, когато видят една на страница. Така че трябва да имате навика да ги накарате да бъдат кликвани. Тази опция ви позволява да посочите страницата или URL адреса, за да стигнете до зрителя, когато кликнат върху изображението. Но тази опция не се изисква за създаване на преобръщане.
Когато сте изпълнили всички полета, щракнете върху OK, за да създадете Dreamweaver вашето изображение за преобръщане.
Следващата страница показва скрипта, който Dreamweaver пише.
04 от 06
Dreamweaver записва JavaScript за вас
Ако отворите страницата в изглед с код, ще видите, че Dreamweaver вмъква блок JavaScript в
на вашия HTML документ. Този блок включва 3-те функции, които е необходимо да имате, за да се сменят изображенията, когато мишката се преобърне над тях и функцията за предварително зареждане, ако сте избрали това.функция MM_swapImgRestore ()
функция MM_findObj (n, d)
функция MM_swapImage ()
функция MM_preloadImages ()
05 от 06
Dreamweaver добавя HTML за преобръщане
Ако сте избрали Dreamweaver да зарежда изображенията за преобръщане, ще видите HTML кода в тялото на документа, за да се обадите на скрипта за предварително зареждане, така че снимките ви да се зареждат по-бързо.
при зареждане = "MM_preloadImages (" shasta2.jpg ")"
Dreamweaver също добавя целия код за вашето изображение и го свързва (ако сте въвели URL адрес). Частта за преобръщане се добавя към етикета на котвата като атрибути "onmouseover" и "onmouseout".
onmouseout = "MM_swapImgRestore ()"
поставяне на показалеца = "MM_swapImage (" Image1 "," "," shasta1.jpg ', 1) "
06 от 06
Изпробване на преобръщане
Вижте пълното функционално изображение за преобръщане и научете какво има в ума на Шаста.