Како да креирате превртлива слика во Dreamweaver

Сликата со превртување е слика која се менува на некоја друга слика кога вие или вашиот клиент го превртувате глушецот над неа. Овие најчесто се користат за создавање на интерактивно чувство, како што се копчиња или јазичиња. Но, можете да креирате слики од превртување од речиси ништо.

Ова упатство е дизајнирано да ви помогне да креирате слика со превртување во Dreamweaver . Таа е наменета за употреба од луѓе кои ги користат следните верзии на Dreamweaver:

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

Барања за ова упатство

• Dreamweaver
  Една од верзиите наведени погоре.
• Оригинална слика
  Осигурајте се дека ја оптимизирате оваа слика. Ова ќе им помогне на вашите страници да се вчитаат побрзо.
• Сликата со превртување
  Оваа слика треба да биде иста со димензиите како и оригиналната слика. И, како оригиналната слика, треба да се оптимизира за да им помогне на времето на вчитување на страницата.
• Веб-страница
  Ова е страницата HTML каде што ќе ја ставите сликата за превртување.

01 од 06

Почни

1. Започнете Dreamweaver
2. Отворете ја веб-страницата каде што сакате да го превртувате

02 од 06

Вметнете објект за слика со превртување

Dreamweaver го олеснува создавањето на сликата со превртување.

1. Одете во менито Вметни и до под-менито "Слики".
2. Изберете "Превртување со слика" или "Превртување на сликата"

Некои постари верзии на Dreamweaver ги нарекуваат сликите "Интерактивни слики".

03 од 06

Кажи Dreamweaver кои слики да ги користат

Dreamweaver се појавува дијалог-кутија со полињата што треба да ги пополните за да ја креирате сликата со превртување.

Име на сликата

Изберете име на имиџ кој е уникатен за страната. Треба да биде само еден збор, но можете да користите броеви, подвлекува (_) и цртички (-). Ова ќе се користи за идентификација на сликата за промена.

Оригинална слика

Ова е URL-то или локација на сликата која ќе започне на страната. Може да користите релативни или апсолутни URL-и за патеки во ова поле. Ова треба да биде слика која постои на вашиот веб сервер или дека ќе ја поставите со страната.

Превртлива слика

Ова е сликата што ќе се појави кога ќе го глувчето над сликата. Исто како оригиналната слика, ова може да биде апсолутна или релативна патека до сликата, и таа треба да постои или да биде поставена кога ќе ја вчитате страницата.

Преоптоварување на превртувачката слика

Оваа опција е избрана по дифолт затоа што му помага на превртувањето да се појави побрзо. Со избирање за да ја преземете сликата за превртување, веб-прелистувачот ќе ја зачува во кеш, додека глувчето не се превртува.

Алтернативен текст

Добар алтернативен текст ги прави вашите слики подостапни. Кога додавате слики, секогаш треба да користите некој вид на алтернативен текст.

Кога ќе кликнете, кликнете на URL

Повеќето луѓе ќе кликнат на сликата кога ќе видат еден на страница. Значи треба да бидете во навика да ги направите кликибилни. Оваа опција ви овозможува да ја наведете страницата или URL-то за да го превземете гледачот кога ќе кликнат на сликата. Но, оваа опција не е потребна за да создадете превртување.

Кога ќе завршите со сите полиња, кликнете Во ред за Dreamweaver да креира своја слика за превртување.

На следната страница се прикажува сценариото што го пишува Dreamweaver.

04 од 06

Dreamweaver пишува JavaScript за вас

Ако ја отворите страницата во кодот-видите, ќе видите дека Dreamweaver внесува блок JavaScript во од вашиот HTML документ. Овој блок ги вклучува 3-те функции што треба да ги префрлите сликите кога глувчето се превртува над нив и функцијата за предзаметување ако сте се одлучиле за тоа.

функција MM_swapImgRestore ()
функција MM_findObj (n, г)
функција MM_swapImage ()
функција MM_preloadImages ()

05 од 06

Dreamweaver Додава HTML за превртување

Ако одбравте Dreamweaver да ги прегрупите сликите со превртување, тогаш ќе го видите HTML кодот во телото на вашиот документ за да ја повикате скриптата за претходно запечати, така што вашите слики ќе се вчитаат побрзо.

onload = "MM_preloadImages (" shasta2.jpg ")"

Dreamweaver исто така го додава целиот код за вашата слика и го поврзува (ако сте вклучиле URL). Делот за превртување е додаден во ознаката за прицврстување како што се атрибути на onmouseover и onmouseout.

onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage (" Image1 ",", "shasta1.jpg", 1) "

06 од 06

Проверете го превртувачот

Погледнете ја целосно функционалната слика за превртување и дознајте што е во умот на Шаста.