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

  • Perbedaan form method POST dan GET
    Bagi anda yang sudah terbiasa membuat form dalam HTML pasti sudah sering melihat kode yang tersusun dalam sebuah form, termasuk atribut form yang digunakan. Salah satu atribut yang digunakan dalam form adalah method. Atribut method bisa diberi nilai dengan POST atau GET.
  • Mengenal HTML5
    HTML5 adalah versi terbaru teknologi hypertext/web yang sekarang ini masih dalam tahap pengembangan. HTML5 ini akan menjadi trend teknologi internet masa depan karena sudah diperkaya dengan fitur-fitur ungulan yang tentunya akan menjadi standard pengembangan media informasi berbasis web.
  • Contoh penggunaan HTML5
    Pada tulisan sebelumnya, saya sudah mengenalkan sedikit tentang HTML5 yang meluputi fitur-fitur terbaru serta unggulan yang sudah disediakan dan bisa digunakan asalkan browsernya sudah mendukung. Berikut ini saya akan membuatkan beberapa contoh tag cara penulisan dan penggunaan HTML5.
  • Perbedaan id dan name dalam html
    Dua atribut HTML ini (id dan name) mungkin sedikit bikin bingung karena kurang mengetahui fungsinya. Masing-masing sering digunakan, kadang id dan name digunakan terpisah dan sering pula digunakan bersamaan. Apa Perbedaan id dan name dalam html dan kapan menggunakan id dan kapan menggunakan name?
  • 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.

Kiriman terbaru