Advertisement
Format Gambar Dengan MAP HTML
Format gambar yang ditambahkan dalam dokumen HTML, diantaranya dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag <img> yang sering digunakan diantaranya src, align, width, height, alt dan penulisan skrip secara umum adalah sebagai berikut :
<IMG SRC = ”directori
gambar / nama gambar” atribute=”nilai atribut”>
|
Gambar dengan map memungkinkan untuk memasang beberapa
link dalam satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah
halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar.
Untuk membuat image map, harus ditambahkan
atribut USEMAP pada tag image.
<IMG SRC =
”directori gambar / nama gambar” usemap="#planetmap">
|
Tampilan gambar dengan map merupakan suatu area pada
gambar /image yang dapat diberi hyperlink area yang biasanya disebut
”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti
rectangle, polygon dan lain sebagainya. Map sendiri dapat diartikan sebagai
peta. Untuk membuat image map digunakan tag <map> dan <area>.
Perintah <map>
dapat didukung oleh berbagai browser, diantaranya internet explorer, mozilla firefox,
opera, google chrome maupun safari.
Tag <map> digunakan
untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah
gambar
map adalah
gambar merupakan area yang dapat diklik. Nama dari gambar yang dibutuhkan pada
penulisan atribut pada tag
<map>.Hal
ini dikaitkan dengan <img> usemap atribut dan menciptakan hubungan antara gambar dan map nya.
Bagian dari tag <map> berisi sejumlah elemen <area>, yang
mendefinisikan suatu
lokasi/daerah saat
diklik di gambar map dapat
menghubungkan ke gambar lainnya yang sudah ditentukan.
Format penulisan gambar
map
Penulisan skript secara umum adalah
sebagai berikut :
<map name =”nama map”>
<area shape = ”type” coords=”value”
href=”link”>
</map>
|
Keterangan:
Nama map à nama
dari map yang nantinya akan dipanggil oleh <image usemap>
Area shape à jenis
shape yang digunakan untuk menggambarkan area dari gambar map. Adapun jenis
shape map yan dapat digunakan adalah
Tipe
Shape
|
Keterangan
|
Default
|
Semua area image
|
Rect
|
Area kotak tertentu
|
Poly
|
Area poligon
|
Circle
|
Area lingkaran tertentu
|
Aturan untuk menuliskan nilai untuk menentukan koordinat
pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel
di bawah ini
Tipe
Shape
|
Keterangan
|
Rect
|
left-x,
top-y, right-x, bottom-y
|
Circle
|
center-x, center-y, radius
|
Poly
|
x1, y1, x2, y2, ...xn, yn.
|
Berikut adalah contoh penulisan kode program
untuk menampilkan gambar map, dimana tag<area> menggunakan atribut shape
<html>
<body>
<p>Klik
gambar matahari atau salah satu planet yang terlihat lebih detail</p>
<img
src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
<map
name="planetmap">
<area shape="rect"
coords="0,0,82,126" alt="Sun"
href="sun.htm">
<area shape="circle"
coords="90,58,3" alt="Mercury"
href="mercur.htm">
<area shape="circle"
coords="124,58,8" alt="Venus"
href="venus.htm">
</map>
</body>
</html>
|
Pada
kode program untuk menampilkan gambar
dengan map
Bila kode program diatas dijalankan
maka pada browser akan muncul gambar seperti dibawah ini. Gambar akan
menampilkan gambar matahari beserta 2 planet disekitarnya. Bila diklik misalnya
planet A maka akan muncul gambar D yang merupakan gambar detail planet A.
Gambar 14.2 tampilan gambar dengan map
Pada HTML 5 ada beberapa atribut baru dan ada pula
atribut HTML4.01 yang tidak berlaku pada HTML 5. Berikut adalah daftar atribut
yang berhubungan dengan gambar map
Atribut
|
Nilai
|
Keterangan
|
Berupa teks, misal
Alt=”planet”
|
Aternatif
teks tertentu untuk menunjukan href
|
|
Titik
koordinat
coords="0,0,82,126"
|
Berisi nilai koordinat
dari shape/bentuk area yang ditentukan
|
|
Nama file
|
Hyperlink
dari target untuk download
Ini
baru di HTML 5
|
|
URL
|
Target hyperlink untuk
area
|
|
language_code
|
Bahasa
tertentu dari target URL
Ini
baru di HTML 5
|
|
media
query
|
Media/perangkat tertentu
untuk target URL
baru di HTML 5
|
|
value
|
Tidak
didukung dalam HTML5.
|
|
alternate
author bookmark help license next nofollow noreferrer prefetch prev search tag |
baru di HTML 5
hubungan tertentu antara
dokumen yang sedang aktif dengan target URL
|
|
default
rect circle poly |
Shape/bentuk
yang digunakan sebagai area
|
|
_blank
_parent _self _top framename |
Target URl
|
|
MIME_type
|
Tipe
MIME sebagai target URL
baru di
HTML 5
|
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon