Bagaimana Membuat Imej Rollover di Dreamweaver

Imej peralihan adalah imej yang berubah kepada beberapa imej lain apabila anda atau pelanggan menggulung tetikus di atasnya. Ini biasanya digunakan untuk membuat rasa interaktif seperti butang atau tab. Tetapi anda boleh membuat imej rollover daripada apa sahaja.

Tutorial ini direka untuk membantu anda membuat imej peralihan dalam Dreamweaver . Ia bertujuan untuk digunakan oleh orang yang menggunakan versi Dreamweaver berikut:

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

Keperluan untuk Tutorial ini

• Dreamweaver
  Salah satu versi yang disenaraikan di atas.
• Imej asal
  Pastikan untuk mengoptimumkan imej ini. Ini akan membantu halaman anda memuat lebih cepat.
• Imej peralihan
  Imej ini harus dimensi yang sama seperti imej asal. Dan, seperti imej asal, harus dioptimumkan untuk membantu masa beban halaman.
• Halaman web
  Ini adalah halaman HTML di mana anda akan meletakkan imej peralihan anda.

01 dari 06

Bermula

1. Mulakan Dreamweaver
2. Buka laman web di mana anda mahu peralihan anda

02 dari 06

Masukkan Objek Imej Imej Rollover

Dreamweaver memudahkan untuk membuat imej peralihan.

1. Pergi ke menu Sisip dan turun ke sub-menu "Objek Imej".
2. Pilih "peralihan imej" atau "imej Rollover"

Beberapa versi lama Dreamweaver memanggil Image Objects "Interactive Images" sebaliknya.

03 dari 06

Beritahu Dreamweaver Imej Apa Yang Digunakan

Dreamweaver memaparkan kotak dialog dengan medan yang anda perlu isi untuk mencipta imej peralihan anda.

Nama Imej

Pilih nama imej yang unik untuk halaman tersebut. Ia sepatutnya satu perkataan, tetapi anda boleh menggunakan nombor, garis bawah (_) dan tanda hubung (-). Ini akan digunakan untuk mengenal pasti imej untuk berubah.

Imej Asal

Ini ialah URL atau lokasi imej yang akan bermula pada halaman. Anda boleh menggunakan URL laluan relatif atau mutlak dalam bidang ini. Ini harus menjadi imej yang ada di pelayan web anda atau yang anda akan memuat naik dengan halaman.

Imej Rollover

Ini adalah imej yang akan muncul apabila anda menggerakkan imej. Sama seperti imej asal, ini boleh menjadi laluan mutlak atau relatif kepada imej, dan ia mesti wujud atau dimuat naik apabila anda memuat naik halaman.

Imej Rollover Pramuat

Pilihan ini dipilih secara lalai kerana membantu rollover muncul dengan lebih cepat. Dengan memilih pramuat imej peralihan, penyemak imbas Web akan menyimpannya dalam cache sehingga tetikus menggulungnya.

Teks alternatif

Teks alternatif yang baik menjadikan imej anda lebih mudah diakses. Anda harus selalu menggunakan beberapa jenis teks alternatif apabila menambah sebarang imej.

Apabila diklik, pergi ke URL

Kebanyakan orang akan mengklik pada imej apabila mereka melihat satu di halaman. Oleh itu, anda perlu mengikut cara membuatnya dapat diklik. Opsyen ini membolehkan anda menentukan halaman atau URL untuk melihat penonton apabila mereka mengklik pada imej. Tetapi pilihan ini tidak diperlukan untuk membuat peralihan.

Apabila anda telah menyelesaikan semua medan, klik OK untuk mempunyai Dreamweaver mencipta imej peralihan anda.

Halaman seterusnya menunjukkan skrip yang ditulis oleh Dreamweaver.

04 dari 06

Dreamweaver Writes JavaScript untuk Anda

Jika anda membuka halaman dalam paparan kod, anda akan melihat bahawa Dreamweaver memasukkan blok JavaScript dalam dokumen HTML anda. Blok ini merangkumi 3 fungsi yang anda perlukan untuk mempunyai swap imej apabila tetikus menggulingkannya dan fungsi pramuat jika anda memilih untuk itu.

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

05 dari 06

Dreamweaver Menambah HTML untuk Peralihan

Jika anda memilih untuk memuat preload Dreamweaver imej-imej peralihan, maka anda akan melihat kod HTML dalam badan dokumen anda untuk memanggil skrip pramuat supaya imej anda dimuat dengan lebih cepat.

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

Dreamweaver juga menambah semua kod untuk imej anda dan pautannya (jika anda memasukkan URL). Bahagian peralihan ditambah ke tag anchor sebagai sifat onmouseover dan onmouseout.

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

06 dari 06

Uji Keluar Peralihan

Lihat imej peralihan berfungsi sepenuhnya dan pelajari apa yang ada pada minda Shasta.