Format Tampilan Gambar Dengan Map
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> sanggup 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 dipakai tag <IMG> dengan dilengkapi atribut img. Atribut tag <img> yang sering dipakai diantaranya src, align, width, height, alt dan penulisan skrip secara umum yaitu sebagai berikut :
<IMG SRC = ”directori gambar / nama gambar” atribute=”nilai atribut”>
Tag <map> dipakai untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map yaitu gambar merupakan area yang sanggup diklik. Nama dari gambar yang diperlukan pada penulisan atribut pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan membuat kekerabatan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah elemen <area>, yang mendefinisikan suatu lokasi/daerah dikala diklik di gambar map sanggup menghubungkan ke gambar lainnya yang sudah ditentukan.
A. Format Penulisan Gambar Map
Penulisan skript secara umum yaitu sebagai berikut :
<map name =”nama map”>Keterangan :
<area shape = ”type” coords=”value” href=”link”>
</map>
- Nama map yaitu nama dari map yang nantinya akan dipanggil oleh <imageusemap>
- Area shape yaitu jenis shape yang dipakai untuk menggambarkan area dari gambar map. Adapun jenis shape map yan sanggup dipakai yaitu Default (semua area image), Rect (area kotak tertentu), Poly (area poligon), dan Circle (area bundar tertentu).
Aturan untuk menuliskan nilai untuk memilih koordinat pada image yang mempunyai kegunaan sebagai area hyperlink sanggup 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 yaitu pola penulisan aba-aba jadwal untuk menampilkan gambar map, dimana tag memakai 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>
| Program | Keterangan |
|---|---|
| <img src="planets.gif"> | Menampilkan gambar “planets.gif” |
| <map name="planetmap"> | memberi nama map=planetmap untuk lalu 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 gres dan ada pula atribut HTML4.01 yang tidak berlaku pada HTML 5. Berikut yaitu daftar atribut yang berafiliasi dengan gambar map
| Atribut | Nilai | Keterangan |
|---|---|---|
| alt | Berupa teks, misal Alt=”planet” | Aternatif teks tertentu untuk membuktikan href |
| coords | Titik koordinat coords="0,0,82,126" | Berisi nilai koordinat dari shape/bentuk area yang ditentukan |
| download | Nama file | Hyperlink dari sasaran untuk download. Ini gres di HTML 5 |
| href | URL | Target hyperlink untuk area |
| hreflang | language_code | Bahasa tertentu dari sasaran URL. Ini gres di HTML 5 |
| media | media query | Media/perangkat tertentu untuk sasaran URL. Baru di HTML 5 |
| nohref | 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 sasaran URL |
| shape | default, rect, circle, poly | Shape/bentuk yang dipakai sebagai area |
| target | _blank, _parent, _self _top, framename | Target URl |
| type | MIME_type | Tipe MIME sebagai sasaran URL. Baru di HTML 5 |
Komentar
Posting Komentar