Membuat Tautan Gambar dan Peta Gambar

• April 29, 2024

Jawaban minggu ini adalah jawaban atas pertanyaan pembaca - “Bisakah Anda menjelaskan cara membuat tautan gambar ke halaman dalam HTML”. Ada beberapa teknik berbeda yang dapat Anda gunakan untuk gambar yang ditautkan. Satu untuk menghubungkan seluruh gambar dengan HTML Anda dan yang lainnya adalah melakukan peta gambar - di mana bagian-bagian berbeda dari gambar yang sama ditautkan ke lokasi yang berbeda.

Gambar yang Ditautkan dalam HTML

Menautkan gambar atau ikon kecil sangat sederhana yang harus Anda lakukan adalah menempatkan tautan gambar Anda di dalam hyperlink seperti:



Yang saya lakukan di sini adalah melampirkan gambar dalam html untuk tautan. Ini adalah cara termudah dan paling efektif untuk menghubungkan gambar kecil dan sering dilakukan dengan peluru, ikon, dll. Namun, bagaimana jika Anda ingin satu gambar besar untuk ditautkan ke beberapa tempat berbeda? Di sinilah pengiris gambar berguna.

Irisan Gambar di Photoshop

Ini sangat mudah dicapai di Photoshop. Anda harus menggunakan gambar yang tidak terlalu rumit, karena Anda ingin pengguna Anda dapat melihat di mana mengklik gambar itu dengan jelas. Anda juga ingin memastikan pengguna Anda memahami bahwa mereka perlu mengklik di dalam gambar untuk mencapai tujuan mereka. Kembangkan peta gambar dengan cermat dengan mengingat pengguna Anda. Ingatlah bahwa peta gambar biasanya tidak ramah mesin pencari seperti teks pada halaman, namun penggunaan tag alt yang tepat dalam irisan gambar Anda dapat membantu dalam hal ini.

Setelah gambar Anda dibuat, langkah selanjutnya adalah "mengiris" gambar Anda. Ikon alat iris terlihat seperti pisau eksak. Itu dekat bagian atas bilah alat dan terletak di bawah alat potong - jika Anda mengklik ikon "potong", alat pemilih slice dan slice akan muncul.

Pilih alat slice, tahan tombol kiri mouse Anda ke bawah dan tarik dengan hati-hati slice di mana Anda inginkan lalu lepaskan. Pindah dan lanjutkan mengiris seluruh gambar. Seharusnya ada irisan di sekitar setiap area gambar yang ingin Anda tautkan ke halaman lain. Setiap area putih besar bisa menjadi satu irisan.

Setelah gambar Anda diiris sepenuhnya, langkah selanjutnya adalah menggunakan alat "slice select", klik pada setiap irisan dan dari sana pilih tipe irisan "gambar". Di bawahnya, isi url tempat Anda ingin slice ini langsung diikuti oleh bidang tag alt di bagian bawah. Bidang lainnya tidak diperlukan untuk pemetaan gambar sederhana. Bergerak melalui setiap irisan dengan cara yang sama sampai seluruh gambar dipetakan.

Setelah seluruh gambar Anda selesai, Anda akan menggunakan opsi "simpan untuk web dan perangkat" Jika Anda mengklik "File" di atas dan melihat ke bawah di bawah opsi penyimpanan yang khas, Anda akan melihat opsi untuk menyimpan untuk web dan perangkat. Pilih opsi ini dan kotak dialog akan terbuka di mana Anda dapat melihat seperti apa gambar Anda nantinya. Jika Anda puas dengan itu, tekan tombol simpan dan kotak dialog lain terbuka. Pastikan opsi kedua mengatakan "simpan gambar dan HTML", lalu simpan pekerjaan Anda.

Buka folder tempat Anda menyimpan dokumen HTML dan membukanya. Anda dapat menyalin dan menempelkan kode ini ke file HTML Anda sendiri. Biasanya HTML ini akan sedikit ceroboh. Jika Anda mahir dalam HTML, Anda dapat membersihkannya sesuai dengan keinginan Anda, tetapi harus berfungsi dengan baik apa adanya. Pastikan, seperti biasa, file gambar Anda dll berada di lokasi yang benar jika tidak gambar Anda tidak akan ditampilkan.

Petunjuk Video: Cara membuat tautan link di pdf (April 2024).