Membuat Link Di Gambar Dengan HTML

membuat link di gambar dengan HTML 1Citra atau image (gambar, peta, foto), selanjutnya disebut gambar, tampil di blog. Alangkah bagusnya gambar bisa cerita tentang isinya. Gambar di samping apa ceritanya? Tulis keterangan di bawah gambar, ini perangkat perlengkapan pelaut atau nelayan, namanya anu, ini anu, itu anu. Panjang. Itu cara biasa, yang luar biasa? Ada, dengan…

Membuat link di gambar dengan HTML

Cari link obyek gambar (di atas). Klik, cerita pun tampil di layar. Boleh ‘tuh bagaimana cara buatnya?

Image mapping — gambar dipilah atas zona-zona untuk obyek di gambar. Zona diberi tautan atau link ke tempat lain yang memuat keterangan tentang obyek tersebut. Memilah gambar atas zona disebut image mapping (memetakan gambar). Mungkin idenya datang dari peta sungguhan yang membagi wilayah atas zona ‘grid’ seperti A4, B15, …dst. untuk menunjuk daerah tertentu.

Hal serupa dilakukan di gambar. Tidak sama dengan peta karena lokasi zona, bebas, sesuka kita. Tunjuk obyek mana lalu lingkari, atau kotaki, atau dengan segi-banyak (poligon). Kalau diklik, aktif dan membuka laman baru. Nama keren zona istimewa ini, hotspot! Baru tahu.

Cara membuat hotspot? — pakai program dong. Online, lagi. Ada banyak program membuat hotspot online salahsatunya, Online Image Map Editor (klik laman baru, biar sama-sama kita ikuti).
membuat link di gambar dengan HTML 2
Unggah gambar kita dari komputer atau internet ke editor. Nakal sedikit gambar ‘sample1.jpg’ yang ada di sana, diambil, diedit, dipakai untuk demo ini. Nama berkas ‘image-mapping.jpg’. Unggah gambar, klik ‘accept’.

Gambar tampil di editor siap di’peta’kan.

Kotak baris tengah adalah setting untuk hotspot. Klik tombol ‘+‘. Muncul hotspot pertama (nomor mulai dari ‘0’). Pilih bentuk hotspot: lingkaran, segi-4, poligon.

  1. Pilih hotspot lingkaran untuk kompas. Buat di sembarang tempat, ukuran kira-kira saja. Selesai, seret lingkaran ke atas kompas. Tarik sisi kotak untuk mengubah besar lingkaran. Jadi! (Program menghitung koordinat dan mengisi otomatis di kotak ‘Coord’. Kotak ‘Href’, ‘Alt’, ‘Target’ kita tahu adalah atribut link HTML. Isi ‘Alt’ dengan ‘Kompas’, lainnya nanti.)
    123
  2. Pilih hotspot berikutnya persegi untuk ‘sextant'(?). Buat di sembarang tempat, ukuran kira-kira saja. Selesai, seret kotak ke atas sextant. Tarik sisi kotak untuk mengubah dimensi kotak. Isi ‘Alt’ dengan ‘Sextant’. Jadi!
    123
  3. Pilih hotspot berikutnya polygon untuk kumpulan 3 perangko. Aha, yang ini tidak bisa di sembarang tempat. Klik di salahsatu sudut perangko, lanjutkan klik di titik-titik mengikuti kontur ketiga perangko. Gambar terlalu kecil, di’zoom’ saja. Untuk menyudahi, tekan tombol [Shift] saat klik terakhir. Isi ‘Alt’ dengan ‘Prangko’. Jadi!

Cukup 3 hotspot dulu.

Kode HTML — klik tombol HTML, keluar kode ini:
membuat link di gambar dengan HTML 3
Waduh, berantakan! Tidak juga, susunan sudah benar dengan atribut tambahan bentuk dan koordinat hotspot. Salin kode dan rapikan seperti ini:

<img src="image-mapping.jpg" width="200" height="113" alt="TestLinkGambar" usemap="#LinkGambar">

<map id="imgmap2012112003830" name="imgmap2012112003830LinkGambar">
   <area shape="circle" alt="Kompas"  title="KOMPAS"  coords="290,31,28"     href="situs-kompas" target="" />
   <area shape="rect"   alt="Sextant" title="SEXTANT" coords="41,31,260,149" href="situs-sextant" target="" />
   <area shape="poly"   alt="Prangko" title="PRANGKO" coords="302,105,344,115,338,131,353,120,359,129,364,108,426,125,417,170,376,155,385,171,358,196,329,162,326,175,288,165" href="situs-prangko" target="" />
   <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>

Baris pertama (coklat) kita tambahkan menunjukkan ‘image-mapping.jpg’ adalah peta link. Tambahkan atribut penting usemap=”#LinkGambar” di akhir (harus didahului ‘#’, nama boleh lain).

Baris ke 2 dirapikan formatnya, hapus yang tidak diperlukan dan cantumkan nama map (‘LinkGambar’ tanpa ‘#’). Baris ke 3 dan bawahnya, isi atribut ‘alt’ dan ‘title’ dengan teks, ‘href’ dengan link situs. ‘Target’ diisi ingin buka laman baru. Baris terakhir adalah komentar, jangan dihapus. Tanda terima kasih kita.

Selesai. Hotspot gambar siap diuji.

Uji link gambar dengan HTML

Klik hotspot gambar (paling atas). Horee!

Tidak perlu mengukur koordinat, tidak perlu CSS sprite. Asyik sekali!

Köszönöm nagybácsi Maschek (bahasa Hungaria, ‘terimakasih ‘oom’ Maschek’).

Kompas Sextant Perangko

 
:D  (bikin link di gambar zodiak seperti posting kemarin, ke..ciil)
 

Tagged with: , , , , , , ,
Ditulis dalam Blog HTML dan CSS, Blog Tips dan Trik, Tutorial
17 comments on “Membuat Link Di Gambar Dengan HTML
  1. raka mengatakan:

    fdg

  2. Zulkifli Rahman mengatakan:

    info ini yg saya cari2, thanks infonya.

  3. IzZd mengatakan:

    thanks,, bermanfaat banget nh bagi saya baru belajar ngeblog🙂

  4. Ejawantah Wisata mengatakan:

    Terimakasih Kang, atas share ilmunya.

    Sukses selalu
    Salam Wisata

  5. riosetoblog mengatakan:

    @larasati
    @lambangsarib
    siip… kembali; coba deh, beneran gampang

  6. Larasati mengatakan:

    terimakasih mas Rio, ulasannyaaa…

  7. pursuingmydream mengatakan:

    Hai Rio, kalau di WP gambarnya kan bisa langusng dimasukkan link dari “tambahkan media” kemudian link tinggal masukkan di kolom URL Tautan. Kalau html pusingg😀.

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: