Belajar HTML Untuk Pemula Level 6


Halo sobat lautan, semoga sehat selalu ya. 
Sudah lama sekali lautan tidak upload artikel tentang pemrograman. Dan pemrograman yang akan kita pelajari adalah pemrograman website, yakni bahasa HTML. Pada artikel sebelumnya, kita telah mempelajari tentang image related element. Semoga pembaca setia masih pada lengket di ingatan ya. Jika belum, anda bisa membaca ulang artikel di bawah ini

Baca juga : Belajar HTML untuk pemula level 5

Ya, artikel kali ini akan membahas tentang map. Ada 3 bahasan sih sebenarnya, yakni map element, area element, atribut usemap. Pelajaran kali ini sangat berhubungan dengan image related element. Karena disini, kita akan mempelajari tentang image map. Buat yang belum tau, image map adalah memetakan bagian-bagian gambar untuk dijadikan sebagai link. Salah satu atribut dalam tag <img> untuk membuat adalah usemap.

Untuk dapat membuat image map, kita memerlukan tag <map> dan tag <area>. Di bawah ini adalah hasil dari image map yang telah dibuat..



Mungkin, ini terlihat seperti memberikan title pada tag <img>, namun tidak demikian. Agar lebih jelas, lautan akan memberikan tanda pada setiap titik yang telah lautan beri agar menampilkan kata lautan-it.



Apabila lingkaran hitam, merah dan kuning diatas terdapat kursor, maka akan menampilkan kata lautan-it. O iya, akhir akhir ini mimin dapa saran dari temen deket, agar kode atau script yang di tampilin dalam bentuk gambar saja agar lebih rapi. Lautan mengiyakan hal itu, dan berikut adalah script untuk membuat image map di atas..



Di sini terlihat lautan memberikan atribut tambahan usemap="#map" pada tag <img> untuk mengaitkan gambar dari tag <img> dengan peta gambar yang ada pada tag <img>. Selanjutnya tag <map> memiliki atribut name dengan isi atau value map, name = "map". Nilai atribut name pada tag <map> harus sama dengan nama nilai atribut usemap pada tag <img>. 

Di dalam tag <map> terdapat tag <area>. Tag ini digunakan untuk menandai bagian-bagian atau area dalam gambar. Script diatas, menggunakan 3 area, jadi yang kita perlukan adalah 3 buah tag <area>. Di masing masing tag, terdapat atribut shape, coords, href, dan title.

Atribut shape berguna untuk membuat bentuk area. Nilai yang bisa digunakan untuk mengisi atribut ini adalah rect, circle, poly, dan default. Nilai ini berpasangan dengan atribut coords yang berguna untuk menentukan titik-titik area.MUngkin kita telah tau bentuk apa yang akan terjadi bila memakai nilai rect (persegi panjang), circle (lingkaran), poly (poligon).
Nah, untuk nilai default akan membuat seluruh bidang gambar menjadi area.

Untuk penjelasan titik koordinat, HTML menggunakan pernyataan dalam bentuk x,y. Titik 0,0 pada kiri gambar, dan titik 400,300 berada disisi kanan bawah, semua itu tergantung pada dimensi lebar pixel yang digunakan. 

Atribut coords untuk shape="rect" adalah berbentuk x.1, y.1, x.2, y.2, dimana x.1, y.1 menunjukkan titik koordinat awal, sedangkan sisanya titik koordinat akhir. Contoh pada script adalah coords="250,175,400,300".

Atribut coords untuk shape="circle" adalah berbentuk, x,y,r, Koordinat x,y adalah titik pusat lingkaran, sedangkan r adalah besar jari-jari lingkaran. Contoh pada script adalah coords="200,150,50". 

Yang terakhir untuk shape="poly" adalah berbentuk x.1, y.1, x.2, y.2,x.3, y.3, x.4,y.4, …dan seterusnya. Bisa digunakan untuk area dalam bentuk yang tak karuan, selama koordinat terakhir berimpitan dengan koordinat awal, agar poligon tertutup. Fitur image map ini sangat berguna untuk membuat gambar peta dimana pengunjung langsung bisa berinteraksi dengan gambar.

Untuk mengetahui titik koordinat, kita tinggal menggunakan aplikasi seperti Paint. 



Ya, begitulah fitur image map yang bisa kita gunakan. Artikel selanjutnya akan membahas Figure Element dan Figcaption Element.

Post a Comment

0 Comments