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 :

 contoh menu dalam gambar

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 :
penentuan koordinat rect menu pada gambar

Jika yang anda pilih circle berarti anda harus menentukan 3 titik yaitu coords="x,y,radius", seperti gambar berikut :

 penentuan koordinat circle

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 :

penentuan koordinat poly

Jadi hasil akhir bidang gambar setelah ditambahkan perintah dengan cara diatas akan menghasilkan seperti menu gambar berikut :

Menu Dalam gambar

Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu Circle Menu Poly

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 **

Komentar

Halaman Lainya

  • Karakter dan simbol khusus dalam html
    Umumnya html digunakan hanya untuk menampilkan informasi yang dapat dibaca yang ditampilkan dalam bentuk gambar, tulisan, atau tabel. Sehingga simbol ataupun karakter yang sering digunakan untuk keperluan menuliskan rumus biasanya akan ditampilkan dalam bentuk gambar, padahal sebenarnya html sudah menyediakan karakter/simbol tersebut dengan pengkodean khusus. Simbol dan karakter apa saja yang bisa kita gunakan dalam html? Simak artikel berikut.
  • Membuat tulisan berjalan dengan HTML
    Panduan lengkap dan mudah cara membuat animasi tulisan berjalan dengan HTML
  • Pengertian istilah TAG, ATRIBUT dan VALUE dalam HTML
    Mungkin istilah TAG, ATRIBUT dan VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3 istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah.
  • Cara mengganti background blog atau website
    Untuk mengganti background blog atau website tentunya anda harus punya akses untuk memodifikasi susunan kode halamannya, baik lewat control panel, ftp maupun fasilitas yang sudah disediakan sistem kelola kontent (CMS). Setelah itu baru kita bisa lakukan dengan dua cara berikut
  • Game Online dengan HTML5
    Teknologi HTML5 memang menjadi bahan perbincangan bagi para pengembang web, karena teknologi yang dihadirkan pada versi HTML5 ini memang luar biasa. Bahkan sekarang sudah banyak game/permainan online dibuat dengan HTML5 sehingga bisa dimainkan dengan cukup ringan dan tanpa perlu aplikasi bantu lainya selain browser.

Kiriman terbaru