Bagaimana Membuat Swap dengan Imej Pelbagai di Dreamweaver - dummies

Sebelum anda mula membuat reka bentuk halaman yang lebih rumit dengan tingkah laku Imej Swap Dreamweaver, lihat Dengan tingkah laku Swap Image, anda boleh menggantikan mana-mana atau semua imej pada halaman.

Apabila anda menggunakan tingkah laku Swap Image, adalah penting untuk membuat semua imej yang anda akan menukar saiz yang sama (tinggi dan lebar) Jika imej bukan saiz yang sama, semua imej kecuali yang pertama akan diregangkan atau dimampatkan supaya sesuai dengan ruang yang diambil oleh imej pertama yang dimasukkan ke dalam halaman.

Jika anda menggunakan tingkah laku Swap Image dengan satu siri imej yang tidak semua ketinggian dan lebar yang sama, anda mempunyai beberapa pilihan:

Tanam yang lebih besar supaya semua imej adalah saiz yang sama.

Buat imej mendatar dan menegak mengambil ruang yang sama dalam reka bentuk anda dengan menggabungkan dua imej menegak untuk setiap satu mendatar. Cukup buat fail dalam satu program seperti Photoshop, masukkan dua imej menegak ke dalam fail yang sama sisi bersebelahan, dan kemudian saiz imej supaya fail tersebut adalah saiz yang sama seperti satu imej mendatar.

Buat satu fail imej saiz imej anda yang terbesar, tetapkan latar belakang kepada warna neutral, seperti hitam atau putih, dan kemudian masukkan semua imej lain ke latar belakang supaya anda boleh menyimpan semua dengan saiz fail yang sama.

Ikuti langkah-langkah ini untuk menggunakan tingkah laku Imej Swap:

1Buat ​​reka bentuk halaman dengan semua imej yang anda mahu dipaparkan pada mulanya.

Setiap tiga gambar dalam reka bentuk halaman untuk Tower Bridge di London mempunyai dua salinan: satu lakaran kecil dan satu versi yang lebih besar. Apabila halaman pertama memuatkan dalam penyemak imbas web, ketiga-tiga imej lakaran kecil diposisikan di bahagian bawah halaman, dengan yang pertama dari versi yang lebih besar yang sepadan dipaparkan di kawasan utama tepat di atas imej kecil.

2Name imej anda di Inspektur harta.

Untuk menargetkan imej anda dengan JavaScript, iaitu bagaimana kelakuan berfungsi, terlebih dahulu berikan setiap imej ID unik. ID imej tidak sama dengan nama fail imej atau tag teks, walaupun anda boleh menggunakan nama yang sama atau serupa. ID imej tidak boleh mempunyai ruang atau sebarang aksara khas.

3Choose Window → Behaviors.

Panel Perilaku dibuka. Anda boleh menyeret panel Behaviors di tempat lain di halaman, dan anda boleh mengembangkannya dengan menyeret bahagian bawah atau sampingannya. Anda juga boleh menutup mana-mana panel terbuka lain untuk membuat lebih banyak ruang dengan mengklik bar kelabu gelap di bahagian atas mana-mana panel.

4Select imej.

Pilih imej dalam halaman yang akan berfungsi sebagai pencetus untuk tindakan itu.

5Pilih tingkah laku Imej Swap.

Dengan imej pencetus yang dipilih di ruang kerja, klik tanda tambah dalam panel Behaviors untuk membuka senarai lungsur turun dan pilih tindakan yang anda mahu gunakan.

6Spekalkan imej untuk menukar dalam kotak dialog Swap Image.

Dalam senarai Imej, pilih ID untuk imej yang akan diganti. Klik butang Layari untuk memilih imej yang menggantikan imej utama. Jika imej belum disimpan dalam folder tapak setempat, Dreamweaver akan menawarkan untuk menyalinnya di sana untuk anda.

7Dalam bahagian bawah kotak dialog Swap Image, pilih pilihan Preload Images untuk mengarahkan penyemak imbas untuk memuatkan semua imej ke cache apabila halaman dimuatkan.

Jika anda tidak memilih pilihan ini, kelewatan boleh berlaku apabila swap imej digunakan.

8Jika anda mahu, nyahpilih pilihan Pemulihan Gambar OnMouseOut.

Pemulihan Imej Pilihan OnMouseOut bermakna apabila sesuatu peristiwa selesai (seperti apabila tetikus dipindahkan dari imej kecil yang mencetuskan), imej asal diganti. Secara lalai, Dreamweaver memaparkan pilihan ini untuk tingkah laku Imej Swap. Anda mungkin mahu menyahpilih pilihan ini jika anda mendapati bahawa penggantian imej asal setiap kali anda melancarkan kursor ke atas thumbnail lain adalah mengganggu.

9Setelah anda tentukan semua tetapan untuk tingkah laku, klik OK.

Perilaku baru muncul dalam panel Behaviors.

10Sahkan acara untuk tingkah laku.

Selepas tindakan diterapkan, anda boleh kembali dan menyatakan peristiwa yang akan memicu tindakan itu. Secara lalai, Dreamweaver menggunakan peristiwa OnMouseOver apabila anda menggunakan tindakan Swap Image, tetapi anda boleh menukar peristiwa tersebut kepada mana-mana yang tersedia, seperti OnClick, yang memerlukan pengguna mengklik imej untuk mencetuskan tindakan Swap Image.

11Muatkan tingkah laku tambahan.

Untuk memohon tingkah laku Imej Swap ke imej lain di halaman, ulang Langkah 5-10, klik untuk memilih imej yang anda mahu berkhidmat sebagai pencetus dan kemudian menyatakan imej yang sepadan yang perlu ditukar.

12Terapi kerja anda dalam penyemak imbas.

Anda tidak dapat melihat kesan tingkah laku seperti ini sehingga anda mengklik butang Paparan Langsung di sebelah kiri atas ruang kerja di Dreamweaver atau pratonton laman anda dalam pelayar web.