Minggu, 22 November 2015
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 :
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:
Jika 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.
Keterangan
kode program diatas:
·
<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
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
|
alt
|
Berupa teks, misal Alt=”planet”
|
Aternatif teks tertentu untuk menunjukan
href
|
coords
|
Titik koordinat coords="0,0,82,126"
|
Berisi nilai koordinat dari
shape/bentuk area yang ditentukan
|
Download
|
Nama file
|
Hyperlink dari target untuk download Ini baru di HTML 5
|
Herf
|
URL
|
Target hyperlink untuk area
|
herflang
|
language_code
|
Bahasa tertentu dari target URL Ini baru di HTML 5
|
Media new
|
media query
|
Media/perangkat tertentu untuk target URL baru di HTML 5
|
Noherf
|
value
|
Tidak didukung dalam HTML5.
|
Rel
|
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
|
Shape
|
Default,
rect,
circle,
poly
|
Shape/bentuk yang digunakan sebagai area
|
Target
|
_blank,
_parent,
_self,
_top,
framename
|
Target URL
|
type
|
MIME_type
|
Tipe MIME sebagai target URL baru di HTML 5
|
Dan
begitulah cara membuat tampilan gambar map pada HTML. Bagian tersulit dari
menampilkan gambar map yaitu menentukan koordinat dari gambar yang akan kita
pakai. Kalau boleh jujur saya sendiripun kurang mengerti tentang menampilkan
gambar map diHTML. Tapi untuk lebih gampang menentukan koordinat gambar kalian
bisa menggunakan aplikasi Microsoft Expression. aplikasi ini akan membantu
kalian menentukan koordinatnya sehingga memudahkan kalian untuk memasukan
gambar map pada HTML. Sekian dan terimakasih~
Keren..!!
BalasHapus