Pak Pid's Blog

Ini pengalaman pribadi saya ketika mengembangkan web. Ceritanya client meminta box yang dapat diklik, jadi biasanya link itu berupa text, namun kali ini berupa box (kotak).

Saya kemudian mencoba berbagai cara, salah satunya dengan memasukkan elemen “<div>” kedalam elemen “<a>”, contohnya seperti ini :

“<a href=’#'> <div style=’width:100px;height:50px;’>Hello Guys</div></a>”

Memang di browser keluarga firefox, seperti opera, safari, dan chrome kode tersebut dapat berjalan lancar. Tapi kita seharusnya memberikan produk terbaik pada client, sehingga kode harus dapat berjalan dengan baik pada semua browser umum, termasuk Internet Explorer milik Microsoft.

Setelah utak-atik sana sini saya menemukan 2 cara untuk melakukannya, kita akan menggunakan CSS sebagai stylernya.

Cara Pertama

Buat CSS seperti dibawah ini, anda bisa ubah stylenya sesuka anda.

a#box {
     width: 100px;
     height: 50px;
     color: black;
}

Kemudian terapkan di kode HTML anda :
<a id=”box”>Ini Contoh Clickable Box</a>

Cara Kedua

Anda bisa menggunakan elemen “div”

#box {
     cursor: pointer;
     cursor: hand;
     width: 100px;
     height: 50px;
     color: black;
}

Kemudian terapkan di kode HTML:
<div id=”box”>Ini contoh clickable box</div>

Semoga bisa membantu!