Membuat menu pada bidang gambar
Mungkin sudah jarang sekali kita temui menu sebuah web yang hanya dibuat dengan gambar sehingga banyak pilihan menu/link halamannya diletakkan pada gambar itu juga. Umumnya sekarang gambar hanya digunakan pada bagian tertentu saja dan ukurannya pun tidak terlalu besar.
Kali ini saya akan berbagi tentang bagaimana membuat menu/hyperlink pada sebuah bidang gambar, sehingga dalam satu gambar bisa diletakkan lebih dari satu menu. Istilah teknisnya mapping gambar.
Misal kita punya sebuah gambar seperti berikut :
Dalam gambar diatas terdapat banyak menu yang harus dihubungkan dengan halaman laimya. Bagaimana caranya??
Langkah pertama adalah memasukkan gambar dengan perintah berikut :
<img src="contoh-menu-gambar.jpg" width="400" height="300" border="0" usemap="#menu-utama" alt="Contoh menu" />
Jika anda lihat perintah memasukkan gambar diatas, ada tambahan dari perintah biasanya yaitu usemap, usemap digunakan sebagai identitas bidang gambar yang akan dijadikan tempat menghubungkan banyak menu.
Setelah gambar kita masukkan, maka sisipkan kembali perintah berikut :
<map name="menu-utama" id="menu-utama">
<area shape="rect" coords="116,60,175,121" href="#" alt="Menu 1" title="Menu 1" />
<area shape="rect" coords="222,81,280,142" href="#" alt="Menu 2" title="Menu 2"/>
<area shape="rect" coords="56,166,113,224" href="#" alt="Menu 3" title="Menu 3" />
<area shape="rect" coords="173,183,232,242" href="#" alt="Menu 4" title="Menu 4" />
<area shape="rect" coords="282,181,338,238" href="#" alt="Menu 5" title="Menu 5" />
<area shape="circle" coords="48,49,39" href="#" alt="Menu Circle" />
<area shape="poly" coords="302,40,308,73,372,98,372,39,329,18" href="#" />
</map>
Meletakkannya boleh disembarang tempat dalam <body> dan setelah perintah gambar diatas. Perintah diatas berfungsi untuk mengarahkan koordinat letak menu yang akan dibuat pada bidang gambar. Berikut penjelasanya :
- map name : ini disesuaikan dengan nilai usemap yang sudah diletakkan pada perintah gambar sebelumnya. Sama juga dengan nilai id.
- area shape : ini terdiri dari 3 pilihan, rect (rectangle) untuk link bentuk kotak, circle untuk link bentuk linkaran, dan terakhir poly untuk link bentuk bebas (bisa terdiri dari banyak koordinat).
- coords : ini diisi dengan nilai koordinat pada area gambar. Koordinat bisa terdiri dari beberapa kombinasi titik tergantung jenis shape yang dipilih.
- href : diberi nilai tujuan halaman/filenya, alt : alternate-text dan title : text yang muncul saat cursor dilewatkan
Penentuan nilai coords pada gambar
Kalau shape yang anda pilih rect berarti kita harus menentukan 4 titik yaitu coords="x1,y1,x2,y2"
x1 merupakan titik awal secara horizontal dari 0 sampai dengan seukuran lebar gambar (titik kiri atas).
y1 merupakan titik awal pada posisi vertikal (titik kiri bawah)
x2 merupakan titik akhir horizontal (titik kanan atas)
y2 merupakan titik akhir pada posisi vertikal (titik kanan bawah)
Lihat gambar berikut :
Jika yang anda pilih circle berarti anda harus menentukan 3 titik yaitu coords="x,y,radius", seperti gambar berikut :
dan kalau anda memilih poly maka harus menentukan titik x1,y1,x2,y2,x3,y3,x-n,y-n,....... Untuk jenis poly tidak terbatas titik koordinat (x-n,y-n) contoh dalam gambar berikut :
Jadi hasil akhir bidang gambar setelah ditambahkan perintah dengan cara diatas akan menghasilkan seperti menu gambar berikut :
Coba anda arahkan mouse melewati menu-menu yang ada pada gambar. Tingkat kesulitanya mungkin terletak pada penentuan koordinat letak menu, tapi jika anda hati2 dan sabar tentunya pasti bisa melakukannya.
Cara lain, jika tidak ingin manual bisa menggunakan web editor visual seperti dreamweaver.
Semoga Bermanfaat dan selamat mencoba.
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **
