Kif toħloq Image Rollover fil Dreamweaver

L-immaġni tal-qlib hija immaġini li tbiddel għal xi immaġni oħra meta inti jew il-klijent tiegħek iddawwar il-maws fuqha. Dawn huma komunement użati biex joħolqu jħossu interattiv bħal buttuni jew tabs. Imma int tista 'toħloq stampi qlib minn sempliċement xi ħaġa.

Dan tutorja hija mfassla biex tgħinek toħloq immaġini li tinqala ' fl- Dreamweaver . Hija maħsuba għall-użu minn persuni li jużaw il-verżjonijiet li ġejjin ta 'Dreamweaver:

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

Rekwiżiti għal dan it-Tutorial

• Dreamweaver
  Waħda mill-verżjonijiet elenkati hawn fuq.
• Immaġni oriġinali
  Kun żgur li tottimizza din id-dehra. Dan jgħin biex il-paġni tiegħek jitgħabbew aktar malajr.
• L-immaġni tal-qlib
  Din id-dehra għandha tkun l-istess dimensjonijiet bħall-immaġni oriġinali. U, bħall-immaġini oriġinali, għandha tkun ottimizzata biex tgħin il-ħinijiet tat-tagħbija tal-paġna.
• Paġna web
  Din hija l-paġna HTML fejn ser tpoġġi l-immaġni tal-qlib tiegħek.

01 ta '06

Ibda

1. Ibda Dreamweaver
2. Iftaħ il-paġna tal-web fejn trid li tinqala '

02 ta '06

Daħħal Għan ta 'Image ta' Immaġni

Dreamweaver jagħmilha faċli biex tinħoloq immaġni ta 'qlib.

1. Mur fil-menu Daħħal u 'l isfel għas-sub menu tal-"Oġġetti tal-Immaġini".
2. Agħżel "Image Roller" jew "Rollover image"

Xi verżjonijiet anzjani ta 'Dreamweaver isejħu l-Oġġetti tal-Imma "Images Interattivi" minflok.

03 ta '06

Għid lil Dreamweaver X'inhuma l-Użu

Dreamweaver toħloq kaxxa ta 'dialog bl-oqsma li għandek bżonn timla biex toħloq l-immaġini li tinqala'.

Isem tal-Immaġini

Agħżel isem ta 'l-istampa li huwa uniku għall-paġna. Għandu jkun il-kelma waħda, imma int tista 'tuża n-numri, il-qisien (_) u s-sinjali (-). Dan se jintuża biex tiġi identifikata l-immaġini għall-bidla.

Image Oriġinali

Din hija l-URL jew il-post tal-immaġini li se tibda fuq il-paġna. Tista 'tuża URLs ta' passaġġi relattivi jew assoluti f'dan il-qasam. Din għandha tkun immaġni li teżisti fuq is-server tal-web tiegħek jew li għandek ittella 'mal-paġna.

Rollover Image

Din hija l-immaġni li se tidher meta timmarka l-immaġni. Eżattament bħall-immaġni oriġinali, dan jista 'jkun triq assoluta jew relattiva għall-immaġini, u għandu jeżisti jew jitpoġġa meta ittella' l-paġna.

Preload Image Rollover

Din l-għażla hija magħżula awtomatikament għaliex tgħin biex l-qlib jidhru aktar malajr. Billi tagħżel li tqabbad l-immaġni tal-qlib, il-Web browser se jaħżen f'kaxxa sakemm il-mouse tinqaleb.

Test alternattiv

Test alternattiv tajjeb jagħmel l-immaġni tiegħek aktar aċċessibbli. Dejjem għandek tuża xi tip ta 'test alternattiv meta żżid xi stampi.

Meta Ikklikkja, Mur Għan-URL

Ħafna nies ikklikkjaw fuq immaġni meta jaraw waħda fuq paġna. Allura inti għandek tkun fil-vizzju li tagħmilhom ikklikkja. Din l-għażla tippermettilek li tispeċifika l-paġna jew URL li tieħu lill-telespettatur meta tikklikkja fuq l-immaġni. Iżda din l-għażla mhijiex meħtieġa biex toħloq qlib.

Meta tkun imlejt l-oqsma kollha, ikklikkja OK biex ikollok Dreamweaver toħloq l-immaġni li tinqala 'tiegħek.

Il-paġna li jmiss turi l-iskript li Dreamweaver jikteb.

04 ta '06

Dreamweaver Jikteb il-JavaScript għalik

Jekk tiftaħ il-paġna fil-vista tal-kodiċi tara li Dreamweaver iddaħħal blokk ta 'JavaScript fid-dokument tad-dokument HTML tiegħek. Dan il-blokk jinkludi t-3 funzjonijiet li għandek bżonn li t-tpartit ta 'l-immaġni meta l-mouse tinqaleb fuqhom u l-funzjoni tal-preload jekk tagħżel dak.

funzjoni MM_swapImgRestore ()
funzjoni MM_findObj (n, d)
funzjoni MM_swapImage ()
funzjoni MM_preloadImages ()

05 ta '06

Dreamweaver Iżżid l-HTML għall-Qlib

Jekk għażlet li tavvanza Dreamweaver l-immaġni tal-qlib, allura inti se tara l-kodiċi HTML fil-ġisem tad-dokument tiegħek biex issejjaħ l-iskritt tal-preload sabiex il-immaġni tiegħek jitgħabbew aktar malajr.

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

Dreamweaver iżżid ukoll il-kodiċi kollha għall-immaġni tiegħek u torbotha (jekk inti inkludiet URL). Il-porzjon tal-qlib tiżdied mat-tikketta tal-ankra bħala attributi onmouseover u onmouseout.

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

06 ta '06

Ittestja l-Qlib

Ara l-immaġni tal-qlib kompletament funzjonali u titgħallem x'hemm fuq il-moħħ ta 'Shasta.