Perpustakaan Anshori

Antara Mas.. Wahyu.. dan Anshori…

Coordinate on HTML Image Map Area Tag

Posted by anshoriwahyu on March 27, 2011


Pamulang… Nyambung lagi dari tulisan gw sebelomnya mengenai HTML Image Map Area Tag yang sedikit gw bahas tentang gimana cara bikin beberapa link di Image. Berhubung mata dah gag kuat lagi buat nulis lanjutan mengenai gimana cara menentukan coordinate di atribut shape, jadi gw tutup dulu tulisannya. Disini gw sambung lagi cara untuk menentukan coordinate di ketiga atribute shape tersebut.

Mungkin ada beberapa cara untuk menentukan letak titik coordinate itu, tapi disini yang mau gw share cuma dua cara yang gw ketahui. Beberapa bulan sebelumnya gw emang udah mau pelajarin ini tag, tapi masi bingung ajah gimana caranya nentuin coordinate. Cara pertama sih gw temuin itu pake nambahin atribut ismap di tag image <img ismap=”ismap” />. Tapi pas tadi malem gw nulis tentang HTML Image Map Area Tag, gw penasaran untuk cari coordinate pake software Adobe Photoshop. n akhirnya ketemu juga cara nentuin coordinate image pake Adobe Photoshop.

Adobe Photoshop

Ni jadi software yang berguna buat gimana cara nentuin coordinate image yang mau dipake di atribute shape. Berhubung banyak yang pake OeS wendow, jadinya image editor Adobe Photoshop yang gw pilih. Kalo pengguna LINUX OeS penggunaannya itu pake GIMP, tapi lum tau bisa juga gag kalo dipake buat nentuin coordinate. Kalo di Photoshop aja bisa, masa sih GIMP gag bisaπŸ˜‰

Shape Rect (Persegi empat)

coords=”x1,y1,x2,y2β€³

Penggunaan shape rect ini seperti yang udah gw jelaskan sebelumnya digunakan untuk OBJECT yang berbentuk PERSEGI EMPAT. Di contoh gw di tulisan sebelumnya tag yang gw tulis kek gini <area shape=”rect” coords=”22,10,109,85β€³ href=”link” alt=”anshoriDOTnet” target=”_blank” />, value atau nilai coords=”22,10,109,85″ itu maksute “x1(22),y1(10),x2(109),y2(85)”. Gampangnya lagi x1,y1 itu sudut kiri atas dari persegi empat itu dan x2,y2 itu sudut kanan bawah dari persegi emat itu. Lebih jelasnya coba liat di image ini…

Coba perhatikan, Gambar tersebut adalah coordinate x1,y1 dari atribute coords dari shape rect.. Yang patut diperhatikan adalah jangan lupa untuk ubah tab di kanan atas (no.2) menjadi tab INFO. Keterangan no 1 adalah krusor mouse yang menunjuk ke koordinat x1,y1 atau gampangnya itu kiri atas dari persegi empat. Keterangan no tiga adalah keterangan koordinat dari image sudut kiri atas dari gambar persegi empat tersebut.

Nah untuk koordinat x2,y2 itu menunjuk ke sudut kanan bawah dari persegi empat tersebut, intinya itu jangan lupa untuk ngerubah tab yang berada di kanan atas dari yang defaultnya itu navigator rubah ke tab yang info. Semoga untuk koordinat shape rect ini udah cukup jelas yah, sekarang lanjut ke shape berikutnyaπŸ˜‰

Shape Poly (Persegi yang lebih dari tiga sudut)

coords=”x1,y1,x2,y2,x3,y3….”

Shape poly ini digunakan untuk OBJECT yang memiliki sudut lebih dari TIGA. Sesuai contoh sebelumnya, gw gunain SEGITIGA. Yang contoh penulisannya kek gini <area shape=”poly” coords=”147,83,186,12,230,84β€³ href=”link” alt=”anshoriDiary” target=”_blank” /> lebih jelasnya ituΒ  “x1(147),y1(83),x2(186),y2(12),x3(230),y3(84)”. Nah sekarang lebih diperjelas lagi liat di image…

Krusor tikus gw lagi menunjuk ke koordinat sudut pertama (x1,y1), berhubung di sebelumnya gw dah nulis jelasnya (semoga!!) tentang sudut. Jadi disini gw tulis singkat ajah. Berhubung yang gw gunain disini itu objeknya adalah SEGITIGA, jadi hanya ada tiga sudut yang gw tulis. (x1,y1,x2,y2,x3,y3). Kalo timbul pertanyaan “bisa gag kalo jumlah sudutnya itu ada SEJUTA sudut?” jawabannya “BISA!!!” Bisa gila kalo mau detail nyari satu persatu kordinat sudut ampe SEJUTA SUDUT!!! Heuheuheuheuheu. Semoga untuk shape poly ini juga cukup jelas… AMIN… Sekarang kita lanjut ke shape circle…πŸ˜‰

Shape Circle (Bulatan, bunderan, atau Lingkaran)

coords=”x,y,r”

Shape poly ini lebih simple, coz hanya terdiri dari tiga value atau nilai. Just x,y,r, tapi kudu bener2 diperhatiin banget! Coz gw sempet salah kaprah mengartikan ini!!! x,y itu menuju ke TITIK PUSAT LINGKARAN TERSEBUT, dan r itu mengacu kedaerah radius TITIK PUSAT lingkaran sampai ke batas lingkaran tersebut. Jelasnya coba intip lagi image ini…

Sebelumnya untuk keterangan yang 305,10 dilewati dulu yah, sekarang ke nentuin koordinat x,y dulu. Coba perhatikan krusor tikus yang menunjuk ke titik tengah LINGKARAN!! Koordinat itu yang menunjukan nilai dari (x,y) dan yang ada disitu angka 40, itulah nilai dari (r). Darimana sih dapet nilai 40 itu? Ok, di contoh gw itu titik pusat memberi nilai “x(305),y(50)” untuk contoh disini gw ngambil value atau nilai dari y(50)! (r) itu adalah value atau nilai radius lingkaran dari titik tengah ke batas lingkaran tersebut. Coba liat keterangan value atau nilai 305,10! Disini yang gw ambil itu nilai dari (y), nilai (y) dari titik pusat lingkaran adalah 50 dan batas lingkaran itu adalah 10. Jadi nilai r adalah 50(y titik pusat)-10(y batas lingkaran)=40… jadi nilai dari contoh yang gw tulis adalah coords=”306(x),50(y),40(r)β€³

Gimana penjelasan untuk penentuan koordiat di tiga shape itu? Semoga jelas yah apa yang gw tulis. Sekarang lanjut cara kedua untuk menentukan koordinat dari tag <map> ini, yang menggunakan cara penambahan atribut ismap di dalam tag <img> yang dikurung oleh tag <a>…

Ismap attribute

Penambahan atribut ismap di tag <img /> dibantu oleh dummy dari tag <a href> bisa membantu untuk memudahkan menentukan koordinat dari image itu. Coba liat contoh script yang gw gunain ini

<a href=”#”><img ismap=”ismap” src=”linkimage” /></a>

Tag <a> itu hanya sebagai dummy buat ngebantu atribute ismap munculin koordinat dari image tersebut.

Yup… Cukup sekian dan terimakasih kalo udah sempet membaca sampe sini, kalo ada kesalahan dalam penulisan ataupun kesalahan dalam script harap maklum yah. Soale gw ini bukannya pribadi yang bisa menulis yang baik dan benar. Ditambah pula kalo pengetahuan dalam bidang script gw itu belajar dibantu google, dosen2 gw gag ngajari tentang script sih… Heuheuheuheuheuheu… happy bloging

Sumber : http://www.elated.com/articles/creating-image-maps/

8 Responses to “Coordinate on HTML Image Map Area Tag”

  1. Putra Eka said

    Wah kek gini ya bikin link banyak di gambar, keren. Thanks tutorialnya mas

  2. waaah, ciamik… emang paling mantep bikin tutor yang susah dicari orang.. numpang nyimak masπŸ˜€

  3. mas, ini satuan koordinatnya apa ya? pixel, inchi centimeter, point atau apa? soalnya dari tadi nyocokin ke gambar ngga berhasil2.. makasih sebelummnya..

  4. sss said

    treus kalo cara kasih teks di dalam shape itu gimane ya bro??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: