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
§
<img src="planets.gif"> è menampilkan gambar
“planets.gif”
|
§ <map
name="planetmap">
|
è
|
memberi nama map=planetmap untuk kemudian planetmap
tersebut dipanggil oleh tag<img usemap=”#planetmap”> untuk ditampilkan
pada halaman web sebagai gambar map.
|
§
<area shape="rect" è Penentuan area map dan koordinat area coords="0,0,82,126"
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.
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
|
baru di HTML 5
|
|||
|
|
||||
|
|
author bookmark help license next nofollow
noreferrer prefetch prev search tag
|
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
|
|||
1 komentar:
Write komentarmma-mma-mma-mma - youtube channel - Videoodl
Replymma-mma. youtube channel. mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mmma mma mma mma youtube mp3 mma mma mma mma mma mmma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mmma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma mma m
Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :
1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon