Gambar rollover minangka gambar sing diganti karo sawetara gambar liyane nalika sampeyan utawa pelanggan wis nggulung mouse kasebut. Iki umum digunakake kanggo nggawe aran interaktif kayata tombol utawa tab. Nanging sampeyan bisa nggawe gambar rollover saka babagan apa wae.
Tutorial iki dirancang kanggo mbantu sampeyan nggawe gambar rollover ing Dreamweaver . Iki dimaksudake kanggo digunakake dening wong nggunakake versi Dreamweaver ing ngisor iki:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Syarat kanggo Tutorial iki
- Dreamweaver
Salah sawijining versi sing kasebut ing ndhuwur. - Gambar asli
Priksa manawa kanggo ngoptimalake gambar iki. Iki bakal mbantu sampeyan mbukak kaca luwih cepet. - Gambar rollover
Gambar iki kudu dimensi padha karo gambar asli. Lan, kaya gambar asli, kudu dioptimalake kanggo mbiyantu kaca kiriman. - Kaca web
Iki minangka kaca HTML sing bakal dilebokake ing gambar rollover sampeyan.
01 saka 06
Miwiti
- Mulai Dreamweaver
- Bukak kaca web sing pengin rollover sampeyan
02 saka 06
Sisipake gambar gambar gambar Rollover
Dreamweaver ndadekake gampang nggawe gambar rollover.
- Pindhah menyang menu Sisip lan mudhun menyang sub-menu "Objek Gambar".
- Pilih "rollover gambar" utawa "Gambar Rollover"
Sawetara versi lawas saka Dreamweaver nyebat gambar Objects "Interactive Images" tinimbang.
03 saka 06
Marang Dreamweaver Gambar Apa Gunakake
Dreamweaver ngethok kothak dialog karo lapangan sing kudu diisi kanggo nggawe gambar rollover.
Jeneng gambar
Pilih jeneng gambar sing unik kanggo kaca. Sampeyan kudu kabeh tembung siji, nanging sampeyan bisa nggunakake angka, garis ngisor (_) lan hiphensi (-). Iki bakal digunakake kanggo ngenali gambar kanggo ngganti.
Original Image
Iki URL utawa lokasi gambar sing bakal diwiwiti ing kaca kasebut. Sampeyan bisa nggunakake URL path relatif utawa Absolute ing lapangan iki. Iki kudu dadi gambar sing ana ing server web sampeyan utawa sing bakal diunggah menyang kaca kasebut.
Gambar Rollover
Iki gambar sing bakal katon nalika sampeyan mouse ing gambar. Kaya gambar asli, iki bisa dadi path absolut utawa relatif marang gambar, lan kudu ana utawa diunggah nalika sampeyan ngunggah kaca.
Preload Rollover Image
Opsi iki dipilih kanthi standar amarga mbantu rollover katon luwih cepet. Kanthi milih preload gambar rollover, browser Web bakal nyimpen ing cache nganti mouse nggulung.
Teks alternatif
Teks sulih apik ndadekake gambar sampeyan luwih gampang. Sampeyan tansah nggunakake sawetara jinis teks alternatif nalika nambahake gambar.
Nalika diklik, Bukak URL
Paling wong bakal klik gambar nalika ndeleng siji ing kaca. Dadi sampeyan kudu nglakoni pakaryan supaya bisa diklik. Opsi iki ngidini sampeyan nemtokake kaca utawa URL kanggo njupuk penampil nalika lagi ngeklik gambar kasebut. Nanging pilihan iki ora dibutuhake kanggo nggawe rollover.
Yen wis rampung kabeh kolom, klik OK kanggo duwe Dreamweaver nggawe gambar rollover.
Kaca sabanjure nuduhake naskah sing ditulis dening Dreamweaver.
04 saka 06
Dreamweaver nyithak JavaScript kanggo Sampeyan
Yen sampeyan mbukak kaca ing tampilan kode, sampeyan bakal weruh sing Dreamweaver nglebokake JavaScript ing
saka dokumen HTML sampeyan. Blok iki kalebu 3 fungsi sing kudu diowahi swara foto nalika mouse nggulung lan fungsi pramug yen sampeyan milih kasebut.fungsi MM_swapImgRestore ()
fungsi MM_findObj (n, d)
fungsi MM_swapImage ()
fungsi MM_preloadImages ()
05 saka 06
Dreamweaver nambahake HTML kanggo Rollover
Yen sampeyan milih nduwe Dreamweaver preload gambar rollover, sampeyan bakal bisa ndeleng kode HTML ing awak sampeyan nyritakake preload script supaya gambar luwih cepet.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver uga nambah kabeh kode kanggo gambar lan pranala kasebut (yen sampeyan kalebu URL). Bagian rollover ditambahake ing tag anchor minangka onmouseover lan atribut onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 saka 06
Test Out the Rollover
Deleng gambar rollover sing fungsional lan sinau apa sing ana ing pikirane Shasta.