Senin, 13 April 2020

Format Tampilan Gambar dengan Map

Mantan KA UPTD
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. Perintah <map> dapat didukung oleh pelbagai browser, diantaranya internet explorer, mozilla firefox, opera, google chrome maupun safari. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.

<IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap">

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”>

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.

A. Format Penulisan Gambar Map
Penulisan skript secara umum adalah sebagai berikut :
<map name =”nama map”>
<area shape = ”type” coords=”value” href=”link”>
</map>
Keterangan :
  1. Nama map adalah nama dari map yang nantinya akan dipanggil oleh <imageusemap>
  2. Area shape adalah jenis shape yang digunakan untuk menggambarkan area dari gambar map. Adapun jenis shape map yan dapat digunakan adalah  Default (semua area image), Rect (area kotak tertentu), Poly (area poligon), dan 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 ShapeKeterangan
Rectleft-x, top-y, right-x, bottom-y
Circlecenter-x, center-y, radius
Polyx1, y1, x2, y2, ...xn, yn.

Berikut adalah contoh penulisan kode program untuk menampilkan gambar map, dimana tag 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=" Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar Format Tampilan Gambar dengan Map" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt=" Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar Format Tampilan Gambar dengan Map"
href="sun.htm">
<area shape="circle" coords="90,58,3" alt=" Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar Format Tampilan Gambar dengan Map"
href="mercur.htm">
<area shape="circle" coords="124,58,8" alt=" Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar Format Tampilan Gambar dengan Map"
href="venus.htm">
</map>
</body>
</html>
 Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar Format Tampilan Gambar dengan Map
Pada kode program untuk menampilkan gambar dengan map.
ProgramKeterangan
<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
AtributNilaiKeterangan
altBerupa teks, misal Alt=”planet”Aternatif teks tertentu untuk menunjukan href
coordsTitik koordinat
coords="0,0,82,126"
Berisi nilai koordinat dari shape/bentuk area yang ditentukan
downloadNama fileHyperlink dari target untuk download. Ini baru di HTML 5
hrefURLTarget hyperlink untuk area
hreflanglanguage_codeBahasa tertentu dari target URL. Ini baru di HTML 5
mediamedia queryMedia/perangkat tertentu untuk target URL. Baru di
HTML 5
nohrefvalueTidak didukung dalam HTML5
relalternate, 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
shapedefault, rect, circle, polyShape/bentuk yang digunakan sebagai area
target_blank, _parent, _self
_top, framename
Target URl
typeMIME_typeTipe MIME sebagai target URL. Baru di HTML 5