Membuat Link pada Gambar dengan Map

A. Tujuan
1. Mampu memasukkan file gambar ke dalam halaman web.
2. Mampu memberikan link pada bagian tertentu dari gambar.
3. Memahami fungsi map untuk membuat link.

B. Materi
Membuat link pada bagian gambar membutuhkan beberapa tag html, antara lain:
1. <img>
Tag ini digunakan untuk memasukkan gambar pada halaman web.
Atribut yang digunakan pada tag img antara lain:
a. src untuk menentukan file gambar yang akan dimasukkan ke dalam halaman web.
b. width untuk menentukan lebar gambar.
c. height untuk menentukan tinggi gambar.
d. usemap
Atribut usemap digunakan untuk mereferensikan nama sebuah elemen map. Nilai pada
atribut usemap diawali dengan tanda #. Tanda # menunjukkan bahwa kita
menggunakan sebuah alamat web. Nilai setelah tanda # harus sama dengan nilai dari
atribut name pada tag map. Contoh: usemap=#kartun

Contoh penulisan atribut dan nilai pada tag img:
<img src=gambar.jpg width=400 height=300 usemap=#kartun>

2. <map>
Elemen map menetapkan bagian tertentu dari gambar tersebut yang berfungsi sebagai link
hyperteks. Atribut yang digunakan dalam tag map adalah name. Atribut name
berfungsi untuk memberikan nama tag map. Nilai pada atribut name sama dengan nilai
pada atribut usemap pada elemen img, tetapi tanpa tanda #.
Contoh: <map name=kartun>

3. <area>
Elemen area digunakan untuk mendefinisikan daerah di dalam gambar yang akan
dijadikan link dan menghubungkan ke suatu alamat Web. Tag area diletakkan di
antara tag map. Atribut yang digunakan pada tag area antara lain:

a. shape
Atribut shape memiliki tiga nilai "rect", "circle" atau "poly". Nilai rect digunakan
untuk membuat area link yang berbentuk segi 4. Nilai circle digunakan untuk
membuat area link yang berbentuk lingkaran. Nilai poly digunakan untuk
membuat area link yang berbentuk polygon atau area yang terdiri dari banyak
titik.




b. coords
Atribut coords digunakan untuk memasukkan koordinat untuk daerah pada
gambar yang akan dijadikan link. Untuk mendefinisikan nilai pada atribut coords,
ditentukan berdasarkan tiga jenis shape.
rect: batas kiri-x, batas atas-y, batas kanan-x, batas bawah-y
circle: titik tengah-x, titik tengah-y, jari-jari
poly: x
1
,y
1
, x
2
,y
2
, ... x
n
,y
n

Contoh penulisan:
1) pada bentuk rect: coords=120, 50, 150, 100
2) pada bentuk circle: coords=100, 50, 30
3) pada bentuk rect: coords=120,50, 150,60, 100,80

c. href
Atribut href digunakan untuk mendefinisikan alamat web yang dituju dari area
link yang dibuat.
Contoh menuliskan tag area:


Untuk menentukan koordinat dari suatu gambar, cara yang lebih mudah adalah
menggunakan bantuan software untuk edit gambar, misalnya Ms. Paint. Contoh tampilan
Ms. Paint: gambar, dan informasi titik koordinat gambar.



Titik pada gambar
Titik koordinat (x,y)px Ukuran Gambar
Contoh script untuk memasukkan gambar dan membuat bagian gambar menjadi link:


Contoh koordinat:
pada bentuk rect: coords=kiri-x, atas-y, kanan-x, bawah-y
Perhatikan gambar berikut untuk mencari koordinat bentuk rect:

Bentuk penulisan koordinat:
coords=124, 139, 182, 184
pada bentuk circle: coords=titik tengah-x, titik tengah-y, jari-jari
Untuk menentukan koordinat titik tengah x dan y, letakkan kursor pada bagian tengah
lingkaran.
Jari-jari adalah jarak antara titik tengah x dengan titik x pada tepi lingkaran
Batas Kiri x
Batas Atas y
Batas Bawah y
Batas kanan x

coords=94, 60, 37
pada bentuk rect: coords=x
1
,y
1
, x
2
,y
2
, ... x
n
,y
n


coords=43,125, 79,150, 66,192, 20,192, 7,151

C. LATIHAN
1. Buat kelompok yang terdiri dari 2 orang.
2. Carilah 1 gambar di harddisk laptop.
3. Bukalah gambar tersebut pada Ms. Paint
4. Buka software editor (Notepad, notepad++, atau adobe dreamweaver)
5. Masukkan file gambar yang Anda pilih ke dalam halaman web. (gunakan tag img).
Ukuran width dan height gambar disesuaikan dengan dengan ukuran gambar yang
tertera pada Ms. Paint.
6. Buatlah link dengan bentuk lingkaran, polygon, dan segi empat pada bagian gambar
menggunakan tag map dan tag area, seperti contoh script di atas.

---Selamat Mengerjakan---