Mapping Image

-
Image map adalah image yang di dalamnya ada satu atau lebih area yang berbentuk link.
Lihat contoh image map dibawah:
WP list
Di dalam image di atas terdapat empat link berbeda.
Code lengkap image map:
<body>

<img src="https://jujucode.files.wordpress.com/2014/08/map-image2.png" alt="WP list" usemap="#wplist" />

<map name="wplist"> 
<area title="wordpress.org" alt="wordpress.org" coords="40,28,256,59" shape="rect" href="http://wordpress.org/" target="" /> 
<area title="WP theme" alt="WP theme" coords="40,78,257,106" shape="rect" href="http://wordpress.org/themes/" target="" /> 
<area title="WP plugin" alt="WP plugin" coords="40,124,258,155" shape="rect" href="http://wordpress.org/plugins/" target="" /> 
<area title="WP codex" alt="WP codex" coords="41,168,256,195" shape="rect" href="http://codex.wordpress.org/Main_Page" target="" /> 
</map>

</body>

Tag area

Tag area berguna untuk menentukan area pada image yang akan diberi link.
Ada beberapa atribut yang harus ada di dalam tag area, yaitu: shape, coords, alt dan href.
Code tag area:
<area alt="" coords="" shape="" href="" target="" />

Atribut shape

Atribut shape berguna untuk menentukan bentuk dari area yang ada pada gambar.
Syntax
<area shape="default|rect|circle|poly">
Daftar pilihan atribut shape:
AtributPenjelasan
defaultSeluruh image akan menjadi area
rectArea berbentuk segi empat
circleArea berbentuk lingkaran
polyArea berbentuk polygonal atau persegi banyak

Atribut coords

Atribut coords berguna untuk menentukan coordinate sebuah area pada sebuah image.
Syntax
<area coords="value">
Detail value dari coords bisa kamu lihat pada table dibawah:
AtributPenjelasan
x1,y1,x2,y2Khusus untuk atributshape="rect" (Coordinate pada left-top, right-bottom)
x,y,radiusKhusus untuk atributshape="circle" (x,y adalah titik tengah dari lingkaran lalu diikuti besar dari radius lingkaran)
x1,y1,x2,y2,…,xn,vnKhusus untuk atributshape="poly" (Jika pasangan dari coordinate terakhir dan pertama tidak sama maka browser akan menambahkan coordinate terakhir untuk menutup polygon)
Pasangan coordinate pertama yaitu 0,0 adalah pada ujung kiri atas image.

Atribut name dan usemap

Atribut name dan usemap berguna untuk menghubungkan image dan image map yang sudah dibuat.
Atribut name hampir sama dengan atribut id yaitu berguna untuk memberi nama atau label pada sebuah elemen yang nantinya elemen tersebut bisa dipanggil atau diakses menggunakan nilai dari atribut id tersebut. Perbedaannya adalah atribut id lebih cocok digunakan untuk CSS dan Javascript sedangkan atribut name lebih cocok digunakan untuk server side seperti web form.
Syntax
wordpress.orgWP themeWP pluginWP codex
<img usemap="#mapname" />
<map name="mapname">

Komentar

Posting Komentar

Postingan populer dari blog ini

Pengamanan Data pada Aplikasi Web

-
10 kelemahan security teratas pada aplikasi web - Masukan (input) yang tidak tervalidasi - Broken Access Control - Pengelolaan Autentikasi dan Session yang tidak baik - Cross site scripting - Buffer overflows - Injections flaws - Penyimpanan yang tidak aman - Denial of Service - Pengelolaan konfigurasi yang tidak aman 1.Input yang tidak divalidasi Aplikasi web menerima data dari HTTP request yang dimasukkan oleh user Hacker dapat memanipulasi request untuk menyerang keamanan situs Hal – hal yang harus diperhatikan ketika mengelola validasi Tidak cukup hanya bergantung pada script client side yang biasa digunakan untuk mencegah masukan form ketika ada input yang invalid Penggunaan kode validasi untuk memeriksa masukan tidak mencukupi 2. Broken Access Control Pada aplikasi yang membedakan akses dengan menggunakan perbedaan ID, hanya menggunakan satu halaman untuk memeriksa user Jika user berhasil melewati halaman login, maka dia bebas melakukan apa saja Permasalah...
Baca selengkapnya

SISTEM KOMPUTER KELAS XI

-
Gambar
SISTEM INPUT-PROSES- OUTPUT   A.       SISTEM,FUNGSI DAN STRUKTUR MASUKAN Sistem I/O adalah operasi yg diperoleh melalui sejumlah perangkat eksternal   dengan menggunakan link.      a)        PIRANTI MASUKAN(INPUT DEVICE) Adalah perangkat keras komputer yang berfungsi sebagai alat untuk memasukkan data atau perintah ke dalam komputer. Contoh:keyboard      b)       PIRANTI KELUARAN(OUTPUT DEVICE) Adalah perangkat keras komputer yang berfungsi untuk menampilkan keluaran sebagai hasil pengolahan data. Keluaran dapat berupa hard-copy (kekertas), soft-copy (ke monitor), ataupun berupa suara. Contoh:scanner .        A.       MODUL I/O      Ø   Merupakan peralatan antarmuka (interface) bagi sistem bus atau switch sentral dan mengontrol satu atau lebih perangkat peripheral.     ...
Baca selengkapnya

Ketergantungan fungsional

-
Gambar
Functional dependency  atau ketergantungan fungsional adalah suatu konsep yang menjelaskan tentang relationship/asosiasi/hubungan antara atribut-atribut dalam suatu relasi.  Functional dependency (ketergantungan fungsional) menggambarkan hubungan kaitan antara atribut-atribut dalam relasi, dikatakan fungsional dependent karena nilai dari suatu atribut digunakan oleh atribut yang lain. Simbol untuk menyatakan functional dependent adalah ⇒ dibaca secara fungsional menentukan. Contoh : A ⇒ B (A secara fungsional menentukan B) Artinya bahwa A secara fungsional menentukan B atau B bergantung pada A Contoh : Tabel Nilai Ketergantungan fungsional dari tabel Nilai di atas adalah : NIM  ⇒  NamaMhs NIM menentukan Nama Mahasiswa karena NIM yang sama menunjukkan nama Mahasiswa yang sama. {Matakuliah,NIM}  ⇒ NilaiHuruf Kenapa harus Matakuliah dan NIM kok tidak NIM saja atau Matakuliah saja .  Karena kalau hanya NIM saja satu NIM dapat memiliki ...
Baca selengkapnya