Mewujudkan Pautan Imej dan Peta Imej

• Mungkin 5, 2024

Jawapan minggu ini adalah sebagai tindak balas kepada soalan pembaca - "Bolehkah anda menerangkan cara membuat pautan gambar ke halaman dalam HTML". Terdapat beberapa teknik yang berbeza yang boleh anda gunakan untuk imej yang dipautkan. Satu adalah untuk menghubungkan keseluruhan imej dengan HTML anda dan yang lain adalah untuk melakukan peta imej - di mana bahagian yang berlainan imej yang sama dikaitkan dengan lokasi yang berlainan.

Imej Berkaitan dalam HTML

Menghubungkan imej atau ikon kecil yang sangat mudah yang perlu anda lakukan adalah meletakkan pautan imej anda dalam pautan seperti:



Apa yang saya lakukan di sini adalah untuk menyertakan imej dalam html untuk pautan tersebut. Ini adalah cara yang paling mudah dan paling berkesan untuk menghubungkan imej kecil dan sering dilakukan dengan peluru adat, ikon, dan lain-lain Tetapi, bagaimana jika anda mahu satu imej besar untuk dihubungkan ke beberapa tempat yang berbeza? Di sinilah pengisihan imej berguna.

Image Slicing in Photoshop

Ini sangat mudah dicapai di Photoshop. Anda harus menggunakan imej yang tidak terlalu rumit, kerana anda mahu pengguna dapat melihat di mana hendak mengklik gambar dengan jelas. Anda juga ingin memastikan pengguna anda memahami bahawa mereka perlu mengklik dalam imej untuk mendapatkan tempat mereka pergi. Membangun peta imej dengan berhati-hati dengan pengguna anda dalam fikiran. Perlu diingat bahawa peta imej tidak biasanya sebagai enjin gelintar yang mesra sebagai teks pada halaman, namun penggunaan teg alt dalam potongan imej anda dapat membantu dengan ini.

Sebaik sahaja imej anda dibuat, langkah seterusnya ialah "memotong" imej anda. Ikon slice tool kelihatan seperti pisau exacto sedikit. Ia berhampiran dengan bahagian atas bar alat dan terletak di bawah alat tanaman - jika anda mengklik pada ikon "tanaman", alat pemotong dan slice selector akan muncul.

Pilih alat slice, tahan kekunci tetikus kiri anda dan berhati-hati seret keping di mana anda mahu dan kemudian lepaskan. Bergerak dan terus menghiris keseluruhan imej. Harus ada sepotong di sekeliling setiap bidang imej yang ingin anda pautkan ke laman lain. Mana-mana kawasan putih yang besar boleh menjadi satu keping.

Selepas imej anda dihiris sepenuhnya, langkah seterusnya adalah menggunakan alat "slice select", klik pada setiap keping dan dari sana pilih "imej" jenis slice. Di bawah yang mengisi url di mana anda mahu kepingan ini diarahkan diikuti oleh medan tag alt di bahagian bawah. Bidang lain tidak diperlukan untuk pemetaan imej mudah. Gerakkan setiap kepingan dengan cara yang sama sehingga keseluruhan imej dipetakan.

Apabila keseluruhan imej anda selesai, anda akan menggunakan pilihan "simpan untuk web dan peranti" Jika anda mengklik "Fail" di atas dan melihat ke bawah di bawah pilihan menyimpan biasa, anda akan melihat pilihan untuk menyimpan untuk web dan peranti. Pilih pilihan ini dan kotak dialog akan dibuka di mana anda boleh melihat pratonton imej anda. Jika anda berpuas hati dengannya, tekan butang simpan dan satu lagi kotak dialog terbuka. Pastikan pilihan kedua mengatakan "simpan imej dan HTML", kemudian simpan kerja anda.

Pergi ke folder anda di mana anda menyimpan dokumen HTML dan membukanya. Anda boleh salin dan tampal kod ini ke dalam fail HTML anda sendiri. Biasanya HTML ini akan menjadi sedikit ceroboh. Jika anda mahir dalam HTML, anda boleh membersihkannya mengikut keinginan anda, tetapi ia sepatutnya berfungsi dengan baik. Pastikan, seperti biasa, fail imej anda dan sebagainya berada di lokasi yang betul jika tidak, imej anda tidak akan dipaparkan.

Arahan Video: Di Balik 'Nagara Rimba Nusa' Juara Sayembara Desain Ibu Kota Baru (Mungkin 2024).