Pada tutorial sebelumnya, kita sudah membahas Tutorial Belajar HTML 5 Bagian 13 : Cara Membuat Link di HTML, selanjutnya kita akan belajar cara membuat link pada gambar di HTML.
Membuat hyperlink menggunakan gambar, sangat mudah sekali.
Kita hanya perlu menggunakan gambar di dalam hyperlink, di tempat teks seperti yang ditunjukkan pada contoh di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Image Hyperlink</title>
</head>
<body>
<p>Klik link pada gambar di bawah ini </p>
<a href="https://mbahwp.com" target="_blank" rel="noopener">
<img src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png" alt = "Mbah WP" border = "0"/>
</a>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut, di mana Anda dapat mengklik gambar untuk membuka halaman web Mbah WP.
Ini adalah cara paling sederhana untuk membuat hyperlink menggunakan gambar. Selanjutnya kita akan melihat bagaimana kita dapat membuat Tautan Gambar Sensitif-Mouse.
Sensitif Mouse Images
Standar HTML dan XHTML menyediakan fitur yang memungkinkan Anda menyematkan banyak tautan berbeda di dalam satu gambar.
Anda dapat membuat tautan berbeda pada satu gambar berdasarkan koordinat berbeda yang tersedia pada gambar.
Setelah tautan berbeda dilampirkan ke koordinat yang berbeda, kita dapat mengklik bagian gambar yang berbeda untuk membuka target dokumen.
Gambar yang sensitif terhadap mouse seperti itu dikenal sebagai images map.
Images map dapat dibuat dari tag <img /> dengan atribut usemap kemudian ditambahkan oleh tag <map> dan <area>.
Gambar yang akan membentuk peta dimasukkan ke dalam halaman menggunakan tag <img /> sebagai gambar normal, kemudian gunakan atribut usemap untuk menandai nama map.
Nilai dari atribut usemap adalah nilai yang akan digunakan dalam tag <map> untuk menghubungkan tag peta dan gambar.
<map> bersama dengan tag <area> mendefinisikan semua koordinat gambar dan tautan terkait.
Tag <area> di dalam tag peta, menentukan bentuk dan koordinat, untuk menentukan batas dari setiap hotspot yang dapat diklik pada gambar.
Berikut contoh dari images map :
<!DOCTYPE html>
<html>
<head>
<title>Contoh USEMAP Hyperlink</title>
</head>
<body>
<p>Cari dan klik pada hotspot</p>
<img src = “https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png” alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Buat Map -->
<map name = "html">
<area shape = "rect" coords = "5,5,40,40" alt = "Bisnis Online Link"
href = "https://mbahwp.com/category/internet-marketing/" target = "_blank" />
</map>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Sistem Koordinat
Nilai sebenarnya dari coord sangat bergantung pada bentuk yang dimaksud. Berikut ini ringkasannya, diikuti dengan contoh terperinci :
- Rect (persegi) = x1, y1, x2, y2. x1 dan y1 adalah koordinat sudut kiri atas persegi panjang; x2 dan y2 adalah koordinat pojok kanan bawah.
- Circle (lingkaran) = xc, yc, radius. xc dan yc adalah koordinat dari pusat lingkaran, dan radius adalah jari-jari lingkaran. Sebuah lingkaran yang berpusat pada 200,50 dengan radius 25 akan memiliki atribut coords = “200,50,25”
- poli = x1, y1, x2, y2, x3, y3, … xn, yn. Berbagai pasangan x-y menentukan simpul (titik) dari poligon, dengan “garis” yang ditarik dari satu titik ke titik berikutnya. Poligon berbentuk berlian dengan titik teratasnya pada 20,20 dan 40 piksel pada titik terlebar akan memiliki atribut coords = “20,20,40,40,20,60,0,40”.
Semua koordinat relatif terhadap sudut kiri atas gambar (0,0).
Setiap koordinat yang ditentukan akan memiliki URL terkait.
Anda dapat menggunakan software pengolah gambar seperti photoshop untuk mengetahui koordinat berbagai posisi pada gambar.
Semoga tutorial ini bisa membantu Anda belajar HTML bagaimana cara memuat link pada gambar di HTML.
Untuk materi selanjutnya, kita akan mempelajari cara membuat link pada email di HTML.
