Как да създадете просто изображение при преобръщане в Dreamweaver

Преобръщанията са толкова популярна функция, че Dreamweaver включва специален диалогов прозорец само за превъртания: диалоговия прозорец Вмъкване на изображение при преобръщане. Изображенията за преобръщане, както подсказва името, са предназначени да реагират, когато някой превърти курсора върху изображение. Ефектът може да бъде толкова драматичен, колкото снимка на куче, заменена от картина на лъв, или фин, като промяна на цвета на дума.

Можете да създадете по-сложни ефекти на изображение при преобръщане с опцията Размяна на изображението от панела Поведения. Опцията за размяна на изображение ви позволява да променяте няколко изображения едновременно.

За да създадете прост ефект на преобръщане с две изображения, като използвате диалоговия прозорец Insert Image Rollover на Dreamweaver, следвайте тези стъпки:

Поставете курсора на страницата, където искате да се появи превъртането.

Ефектите при преобръщане изискват поне две изображения: едно за първоначалното състояние и едно за състоянието на преобръщане. Можете да използвате две различни изображения или две подобни, но и двете трябва да имат еднакви размери. В противен случай виждате странни ефекти на мащабиране, защото и двете изображения трябва да се показват в абсолютно едно и също пространство на страницата.

Изберете Вмъкване → Изображение → Превъртане на изображение.

Като алтернатива можете да използвате падащия списък, наличен от иконата Изображения в панела Общо вмъкване и да изберете Изображение с превъртане.

Появява се диалоговият прозорец Insert Rollover Image.

В полето Име на изображението дайте име на вашето изображение.

Преди да можете да приложите поведение към елемент, като изображение, елементът трябва да има име, така че скриптът за поведение да може да го препраща. Можете да наименувате елементи каквото пожелаете, стига да не използвате интервали или специални знаци.

В полето Оригинално изображение посочете първото изображение, което искате да се вижда. Използвайте бутона Преглед, за да намерите и изберете изображението.

Ако изображенията все още не са в папката на вашия локален сайт, Dreamweaver ги копира във вашия сайт, когато създадете превъртането.

В полето за превъртане на изображение въведете изображението, което искате да стане видимо, когато посетител премести курсора върху първото изображение.

Отново можете да използвате бутона Преглед, за да намерите и изберете изображението.

Поставете отметка в квадратчето за предварително зареждане на изображение при превъртане, за да заредите всички изображения при превъртане в кеша на браузъра, когато страницата се зареди за първи път.

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

В полето Алтернативен текст въведете описание на изображенията.

Алтернативният текст е по избор, но се препоръчва, тъй като използването на ключови думи може да подобри оптимизацията за търсачки. По същия начин, алтернативният текст е ключова част от достъпността в мрежата, тъй като този текст се чете на глас от специални браузъри, наречени екранни четци, които се използват от хора, които са слепи и други с ограничено зрение или подвижност. Алтернативният текст се показва само в браузъра, ако изображенията не се виждат.

В полето Когато щракнете, отидете на URL, въведете произволен уеб адрес или прегледайте, за да намерите друга страница в сайта си, към която искате да свържете.

Ако не посочите URL, Dreamweaver автоматично вмъква знака # като заместител в кода.

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

Щракнете върху OK.

Изображенията се настройват автоматично като превъртане.

За да видите превъртането в действие, запазете файла и след това щракнете върху иконата на глобус в горната част на работното пространство, за да прегледате страницата си в уеб браузър.

Можете да видите как работи вашето преобръщане в изгледа Design на Dreamweaver или като използвате опцията Live view. Когато щракнете върху бутона на живо в горния ляв ъгъл на работното пространство, вие по същество превръщате Dreamweaver в уеб браузър, който показва страници, подобно на браузъра Chrome.

Когато преглеждате страница на компютъра си, която включва изображение при превъртане, някои уеб браузъри ще покажат предупреждение, че трябва да разрешите на ActiveX контролите да преглеждат страницата. Това е предупреждение за сигурност, което се появява само когато страницата се отвори на същия компютър, където е запазена.

Ако публикувате страницата на уеб сървър и след това я прегледате през интернет връзка, вие и посетителите на вашия сайт няма да видите тази грешка.

Кредит: Произведение на istockphoto.com