Як стварыць малюнак Rollover ў Dreamweaver

Перакульванне выява ўяўляе сабой малюнак, што змены ў нейкі іншы вобраз, калі вы або ваш кліент курсора мышы над ім. Яны звычайна выкарыстоўваюцца для стварэння інтэрактыўнага адчуванні, такія як кнопкі або ўкладкі. Але вы можаце стварыць перакульванне малюнак з проста ні пра што.

Гэта кіраўніцтва прызначана , каб дапамагчы вам стварыць перакульванне малюнак у Dreamweaver . Ён прызначаны для выкарыстання людзьмі, выкарыстоўваючы наступныя версіі Dreamweaver:

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

Патрабаванні, што прад'яўляюцца да гэтага Tutorial

• Dreamweaver
  Адна з версій, пералічаных вышэй.
• зыходны малюнак
  Пераканайцеся ў тым, каб аптымізаваць гэты вобраз. Гэта дапаможа вашыя старонкі загружаюцца хутчэй.
• перакульванне выява
  Гэта выява павінна быць адны і тыя ж памеры, што і зыходны малюнак. І, як і зыходны малюнак, павінны быць аптымізаваныя, каб дапамагчы час загрузкі старонкі.
• Вэб - старонка
  Гэта HTML старонкі, дзе вы кладзе перакульванне малюнак.

01 з 06

Пачаць

1. Пачатак Dreamweaver
2. Адкрыйце вэб-старонку, дзе вы хочаце, каб ваша перакульванне

02 з 06

Устаўка аб'екта перакульванне Выявы Выявы

Dreamweaver дазваляе лёгка ствараць перакульванне малюнак.

1. Перайдзіце ў меню Устаўка і ўніз да «Выява аб'ектаў» падменю.
2. Выберыце «перакульванне малюнка» або «Rollover малюнак»

Некаторыя старыя версіі Dreamweaver называюць малюнак аб'ектаў «Інтэрактыўныя адлюстравання" замест гэтага.

03 з 06

Скажыце, якія малюнкі Dreamweaver выкарыстоўваць

Dreamweaver з'яўляецца дыялогавае акно з палямі, якія неабходна запоўніць, каб стварыць перакульванне малюнак.

Назва выявы

Выберыце імя малюнка, якое з'яўляецца унікальным для гэтай старонкі. Гэта ўсё павінна быць адно слова, але вы можаце выкарыстоўваць лічбы, знак падкрэслення (_) і злучок (-). Гэта будзе выкарыстоўвацца, каб ідэнтыфікаваць малюнак, каб змяніць.

зыходны малюнак

Гэта URL ці месцазнаходжанне малюнка, якое пачнецца на гэтай старонцы. Вы можаце выкарыстоўваць адносныя ці абсалютныя URL - шлях у гэтай галіне. Гэта павінна быць малюнак, якое існуе на вашым вэб-сэрвэры, або што вы будзеце загружаць са старонкай.

Rollover Image

Гэта выява, якое будзе адлюстроўвацца пры навядзенні паказальніка мышы на малюнак. Гэтак жа, як зыходны малюнак, гэта можа быць абсалютным або адносным шляхам да выявы, і яно павінна існаваць ці быць загружана пры загрузцы старонкі.

Preload Rollover Image

Гэты варыянт абраны па змаўчанні, таму што ён дапамагае пры перакульванні з'яўляецца хутчэй. Выбіраючы для папярэдняй загрузкі перавернутага малюнка, вэб-браўзэр будзе захоўваць яго ў кэшы, пакуль валкі мышы над ім.

альтэрнатыўны тэкст

Добры альтэрнатыўны тэкст робіць вашыя выявы больш даступнымі. Вы заўсёды павінны выкарыстоўваць некаторы тып альтэрнатыўнага тэксту пры даданні малюнкаў.

Калі Націснуў, Go To URL

Большасць людзей будзе націснуць на малюнак, калі яны бачаць адзін на старонцы. Такім чынам, вы павінны быць у звычку рабіць іх інтэрактыўнымі. Гэтая опцыя дазваляе паказаць старонку або URL, каб узяць глядач, калі яны націскаюць на малюнку. Але гэты варыянт не патрабуецца, каб стварыць перакульванне.

Калі вы завяршылі ўсе палі, націсніце кнопку OK, каб Dreamweaver стварыць перакульванне малюнак.

На наступным старонцы паказаны сцэнар, які піша Dreamweaver.

04 з 06

Dreamweaver Запісвае JavaScript для Вас

Калі вы адкрыеце старонку ў кодзе ракурсе вы ўбачыце, што Dreamweaver ўстаўляе блок JavaScript ў вашага HTML-дакуменце. Гэты блок уключае ў сябе 3 функцыі, якія вы павінны мець выявы падпампоўкі пры навядзенні паказальніка мышы над імі і функцыяй папярэдняй нагрузкі, калі вы абралі для гэтага.

функцыянаваць MM_swapImgRestore ()
функцыянаваць MM_findObj (п, дз)
функцыянаваць 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 ( 'Изображение1', '', 'shasta1.jpg', 1)"

06 з 06

правяраюць ролловера

См поўнафункцыянальнага перакульвання малюнкі і даведацца, што на Shasta'`s розуме.