Format Tampilan Gambar dengan Map
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 pelbagai 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 (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap).
|
<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" coords="0,0,82,126"
|
è
|
Penentuan
area map dan koordinat area
|
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.
|
Tampilan map pertama kali
|
|
A
|
|
D
|
|
B
|
|
C
|
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 pelbagai browser,
diantaranya internet explorer, mozilla firefox, opera, google chrome maupun
safari.
Gambar 14.1 browser yan mendukung tag <map>
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 (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap).
|
<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" coords="0,0,82,126"
|
è
|
Penentuan
area map dan koordinat area
|
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.
|
Tampilan map pertama kali
|
|
A
|
|
D
|
|
B
|
|
C
|
|
Tampilan map setelah A diklik
|
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
|
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
|
0 Response to "Format Tampilan Gambar dengan Map"
Post a Comment