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 mendefinisikansebuahtampilan gambar map pada
sisi client-side. Sebuah gambar mapadalah
gambar merupakanareayang dapat diklik.Nama dari gambaryang
dibutuhkan pada penulisan atribut pada tag <map>.Hal inidikaitkandengan<img>usemapatributdan
menciptakanhubungan antaragambar dan map nya. Bagian dari tag<map>berisi
sejumlahelemen<area>,yang
mendefinisikansuatu
lokasi/daerah saat
diklikdigambar 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 menuliskannilai 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
|
§ <imgsrc="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.
Tag<map>digunakan untuk mendefinisikansebuahtampilan gambar map pada
sisi client-side. Sebuah gambar mapadalah
gambar merupakanareayang dapat diklik.Nama dari gambaryang
dibutuhkan pada penulisan atribut pada tag <map>.Hal inidikaitkandengan<img>usemapatributdan
menciptakanhubungan antaragambar dan map nya. Bagian dari tag<map>berisi
sejumlahelemen<area>,yang
mendefinisikansuatu
lokasi/daerah saat
diklikdigambar 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 menuliskannilai 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
|
§ <imgsrc="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.Tag<map>digunakan untuk mendefinisikansebuahtampilan gambar map pada
sisi client-side. Sebuah gambar mapadalah
gambar merupakanareayang dapat diklik.Nama dari gambaryang
dibutuhkan pada penulisan atribut pada tag <map>.Hal inidikaitkandengan<img>usemapatributdan
menciptakanhubungan antaragambar dan map nya. Bagian dari tag<map>berisi
sejumlahelemen<area>,yang
mendefinisikansuatu
lokasi/daerah saat
diklikdigambar 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 menuliskannilai 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>
|
|
<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
|
§ <imgsrc="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.
<map name =”nama map”>
<area shape = ”type”
coords=”value” href=”link”>
</map>
o
Area
shape merupakan jenis shape yang digunakan untuk menggambarkan area dari gambar
map.
o
Area
shape yang digunakan pada map Default, Rect, Poly, Circle
o
Atribut
yang digunakan pada tag <area> diantaranya alt, coords, download, href, hreflang, media, nohref, rel, shape, target, type
Komentar
Posting Komentar