Слика ролловера је слика која се мења на неку другу слику када ви или ваши клијенти пребаците миш преко њега. Ови се обично користе за стварање интерактивног осећаја као што су гумби или табулатори. Али можете креирати слике ролловера из свега било чега.
Овај туторијал је дизајниран да вам помогне да креирате слику за превртање у Дреамвеавер-у . Намијењен је за кориштење од стране људи који користе следеће верзије Дреамвеавер-а:
- Дреамвеавер МКС
- Дреамвеавер МКС 2004
- Дреамвеавер 8
- Дреамвеавер ЦС3
- Дреамвеавер ЦС4
- Дреамвеавер ЦС5
- Дреамвеавер ЦС6
Захтеви за овај приручник
- Дреамвеавер
Једна од горе наведених верзија. - Оригинална слика
Побрините се да оптимизујете ову слику. Ово ће вам помоћи да странице учитавају брже. - Слика ролловера
Ова слика би требала бити исте димензије као и оригинална слика. И, као и оригинална слика, требало би да буде оптимизована како би помогла времену учитавања страница. - Веб страница
Ово је ХТМЛ страница на којој ћете ставити своју слику превртања.
01 од 06
Почети
- Започните Дреамвеавер
- Отворите веб страницу на којој желите ролловер
02 од 06
Убаците објекат слике са преврнутим сликама
Дреамвеавер олакшава креирање слике ролловера.
- Идите у мени Инсерт и на подмени "Имаге Објецтс".
- Изаберите "Имаге ролловер" или "Ролловер имаге"
Неке старије верзије програма Дреамвеавер називају Имаге Објецтс "Интерацтиве Имагес".
03 од 06
Реците Дреамвеавер које слике треба користити
Дреамвеавер покреће дијалог бок са пољима које треба попунити да бисте креирали своју слику ролловера.
Име слике
Изаберите име слике које је јединствено за страницу. Требало би да буде све једна реч, али можете користити бројеве, подвучице (_) и цртице (-). Ово ће се користити за идентификацију слике која се мења.
Оригинална слика
Ово је УРЛ или локација слике која ће почети на страници. У овом пољу можете користити релативне или апсолутне УРЛ адресе путање . Ово би требало да буде слика која постоји на вашем веб серверу или коју ћете послати са стране.
Ролловер Имаге
Ово је слика која ће се појавити када прођете мишем преко слике. Као и оригинална слика, ово може бити апсолутна или релативна путања до слике, и она би требала постојати или бити отпремљена приликом учитавања странице.
Прелоад Имаге Ролловер
Ова опција је подразумевано изабрана зато што помаже да се ролловер појави брже. Ако одаберете да унапред учитате слику ролловера, Веб претраживач ће га чувати у кешу док се миш не пређе преко њега.
Алтернативни текст
Добар алтернативни текст чини ваше слике доступнијим. Кад додате слике, увек користите неку врсту алтернативног текста.
Када кликнете, идите на УРЛ
Већина људи ће кликнути на слику када виде једну на страници. Дакле, требало би да имате навику да их учините клизним. Ова опција вам омогућава да наведете страницу или УРЛ адресу како бисте гледаоца погледали када кликну на слику. Али ова опција није потребна за креирање превртања.
Када завршите сва поља, кликните на дугме У реду да бисте Дреамвеавер креирали своју слику ролловера.
Следећа страница приказује скрипту коју пише Дреамвеавер.
04 од 06
Дреамвеавер пише ЈаваСцрипт за вас
Ако отворите страницу у кодном приказу, видећете да Дреамвеавер убацује блок ЈаваСцрипт у <хеад> вашег ХТМЛ документа. Овај блок укључује 3 функције које требате имати размјене слика када се миш прекида и функција прелоад ако сте се одлучили за то.
функција ММ_свапИмгРесторе ()
функција ММ_финдОбј (н, д)
функција ММ_свапИмаге ()
функција ММ_прелоадИмагес ()
05 од 06
Дреамвеавер додаје ХТМЛ за Ролловер
Ако сте одлучили да Дреамвеавер учитава слике ролловера, онда ћете видети ХТМЛ код у телу вашег документа да бисте позвали скрипту за прелоад тако да се ваше слике брзе учитавају.
онлоад = "ММ_прелоадИмагес ('схаста2.јпг')"
Дреамвеавер такође додаје све шифре за вашу слику и повезује га (уколико сте укључили УРЛ адресу). Дел ролловера се додаје на сидрену ознаку као атмоусеовер и атмоусеоут атрибуте.
онмоусеоут = "ММ_свапИмгРесторе ()"
онмоусеовер = "ММ_свапИмаге ('Имаге1', '', 'схаста1.јпг', 1)"
06 од 06
Испитајте Ролловер
Погледајте потпуно функционалну слику ролловера и сазнајте шта је у уму Схаста.