Cara membuat maps area coords pada gambar di html || tag Area HTML
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Hi warganet kali ini saya akan share cara membuat map area (tag map) pada gambar dengan mudah.
pertama kita harus tau fungsi Tag <map> dan tag <area> merupakan 2 tag yang saling berhubungan, digunakan untuk pemetaan dalam gambar dan bisa dituliskan url di dalamnya. Tag map memiliki atribut name, nama map. Nama map tidak boleh pakai spasi. Tag area memiliki atribut yang umum digunakan; di antaranya; href (url target), shape (bentuk map), target (dibuka dalam tab sama atau tab baru di browser, _blank, _self), dan coords (koordinat).
Untuk titik koordinat (coords) nilainya bergantung pada atribut shape (bentuk map) dan berhubungan dengan pelajaran matematika, jika shape bernilai circle, maka nilai koordinatnya x, y, dan r. X dan y nilai pusat lingkaran sedangkan r untuk nilai jari-jari. Shape polygon nilai koordinatnya x dan y, untuk setiap titik di poligon: x1, y1, x2, y2, x3, y3, dan sebagainya. Untuk shape rect (rectangle) penulis tidak tahu bagaimana cara memberi nilainya, soalnya tidak pintar matematika, tetapi intinya mengikut pelajaran matematika.
CONTOH :
<img src="file/TGS.PNG" width="573" height="430" alt="laptop" usemap="#menu" />
<map name=" menu">
<area shape="rect " coords=" 86,52,484,274" alt="monitor" href="monitor.html" />.
PENJELASAN
TAG <img src="alamat gambar" with="lebar gambar" height="tingggi gambar" alt="kata kunci" usemap="#nama map pada gambar pakai # hastag"/>
<map name="nama map tampa hastag">
<area shape="area bentuk" coords="kordinat gambar" href="untuk membuka html"/>
Cara mengukur kordinat pada gambar menggunakan photoshop
Buka gambar yang akan digunakan sebagai peta dengan Adobe Photoshop.
Tentukan bentuk dari shape pada objek gambar (anda bisa menggunakan Rectangle Tool, Ellipse Tool, atau Polygon Tools)
Arahkan pointer mouse pada titik sumbu koordinat yang akan diambil dan baca hasilnya pada Panel Info (Tekan F8) kemudian tulis sumbu X dan sumbu Y pada attribut coords.
Pindahkan pointer mouse pada titik sumbu koordinat lainnya untuk menentukan titik sumbu X dan titik sumbu Y berikutnya.
Untuk contoh pembuatan map area bisa di download di bawah
![download[4]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMfl1Yf5CBlVzVNJSqfG-7uU_D4OYzSPHNq5ha9sTDzZJKotdQzGThzYVgaVp2obr99ndBfgY4NlbOzYGWBD0GjyNJgW5nMEU6RIv5I7evcPyZt1M-PF606pEDPrCuyRZQQe44LAIkYk/s320/Download-Now-Button-Red-PNG.png)
Sekian tutor kali ini semgoa bermanfaat
Tentukan bentuk dari shape pada objek gambar (anda bisa menggunakan Rectangle Tool, Ellipse Tool, atau Polygon Tools)
Arahkan pointer mouse pada titik sumbu koordinat yang akan diambil dan baca hasilnya pada Panel Info (Tekan F8) kemudian tulis sumbu X dan sumbu Y pada attribut coords.
Pindahkan pointer mouse pada titik sumbu koordinat lainnya untuk menentukan titik sumbu X dan titik sumbu Y berikutnya.
Untuk contoh pembuatan map area bisa di download di bawah
Sekian tutor kali ini semgoa bermanfaat
وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ