Thursday, November 17, 2016

Kode html menambah Gambar dengan Map

Advertisement

Format Gambar Dengan MAP HTML

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

<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


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.

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

[[ Berikutnya >> Hyperlink Html>>

Artikel Terkait

Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.

Terima Kasih.

EmoticonEmoticon