Blog Belajar HTML: Tag map dan Tag area HTML

Tag <map> dan tag <area> merupakan 2 tag yang saling berhubungan, digunakan untuk pemetaan dalam gambar dan bisa dituliskan url di dalamnya. Tag map memiliki atribut name, nama map. Nama map tidak boleh pakai spasi. Tag area memiliki atribut yang umum digunakan; di antaranya; href (url target), shape (bentuk map), target (dibuka dalam tab sama atau tab baru di browser, _blank, _self), dan coords (koordinat).

Untuk titik koordinat (coords) nilainya bergantung pada atribut shape (bentuk map) dan berhubungan dengan pelajaran matematika, jika shape bernilai circle, maka nilai koordinatnya x, y, dan r. X dan y nilai pusat lingkaran sedangkan r untuk nilai jari-jari. Shape polygon nilai koordinatnya x dan y, untuk setiap titik di poligon: x1, y1, x2, y2, x3, y3, dan sebagainya. Untuk shape rect (rectangle) penulis tidak tahu bagaimana cara memberi nilainya, soalnya tidak pintar matematika, tetapi intinya mengikut pelajaran matematika.

Penentuan kapan harus menggunakan circle, polygon atau rect tergantung dari bentuk gambar, jika lingkaran gunakan circle, jika poligon gunakan polygon, jika persegi panjang gunakan rect.

Langkah pengunaan:
- Siapkan gambar, ukuran kecil saja misalnya 149x97px, beri nama misalnya imgmap.jpg. Jika ingin sama dengan gambar yang digunakan penulis, download saja gambar ini, (klik kanan > Save images as):

- Tampilkan gambar dengan tag <img>
- Tulis tag map
- Sertakan atribut usemap pada tag img
- Tentukan shape, koordinat dan link tujuan pada gambar
- Selesai.

Contoh: map.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Map</title>
        </head>
    <body>
    
    <map name="mapku">
    <img src="imgmap.jpg" usemap="#mapku" />
    <area shape="circle" coords="80,30,20" href="http://tipspengetahuan.com" target="_self" />
    </map>
    </body>
</html>

Jika diarahkan kursor ke gambar tadi dan pas dengan koordinat maka muncul tanda link pada kursor dan jika diklik akan mengarah ke atribut href dalam contoh ini ke website tipspengetahuan.com.

Catatan: Pemberian nilai lingkaran untuk x y dan r di atas mungkin tidak valid. Penulis hanya berusaha memberikan gambaran saja. Yang dipelajari di sini ilmu tentang map (html) bukan belajar matematika. Contoh penulisan tag map dan area bisa dilihat di sini (contoh dari situs lain).

^Baca juga: Tag <aside> HTML5.

Referensi tulisan:

<map>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 24 September 2014.
<area>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 24 September 2014.

About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Wednesday, September 24, 2014

Tag map dan Tag area HTML

No comments:

Post a Comment