Perpustakaan Anshori

Antara Mas.. Wahyu.. dan Anshori…

HTML Image Map Area Tag

Posted by anshoriwahyu on March 27, 2011


Pamulang… Pernah gag nemuin Image yang di tempelin fungsi Link? Pasti banyak kan yah, tapi disini maksud gw ntu Image yang ditaro fungsi link tapi gag keseluruhan dari image itu yang nyambung ke fungsi link. Jadi misal ada Image n didalemnya ada gambar yang kalo di klik baru menuju ke Link tujuan, sedangkan kalo krusor nyorot ke gambar yang gag ada fungsi link-nya gag ikut kesambung sama link tujuan.

Kalo di HTML namanya itu HTML <map> tag.. Gag ribet kok bikinnya, cukup mudah. Disini gw mau shared gimana simplenya bikin Fungsi HTML <map> tag tersebut… Oh iya hampir lupa, Kebanyakan yang udah expert itu masukin JAVASCRIPT di fungsi ini. Tapi untuk sementara fungsi JAVASCRIPTnya gw sampingin dulu, Jadi ini itu PYUR HTML Code…

Buat contohnya disini gw taro Image buat tutorialnya… Image yang simple jadi biar gag terlalu ribet nantinya buat gw nulis penjelasannya…😉

anshoriDOTnet

anshoriDOTnet anshoriDiary iseng

Okeh… Coba deh sorot ketiga gambar di dalem image ntu (kotak,segitiga,bunderan)… Semua itu terdiri dari IMAGE TUNGGAL… Tapi bisa dimasukin beda link di beda gambar… Kalo di gambar KOTAK MERAH di klik nanti nyambung ke website pribadi gw http://www.anshori.net&#8230; Digambar SEGITIGA HIJAU gw kasi link ke web diary gw ghenkvee.blogspot.com… Untuk gambar BUNDERAN BIRU gag usah di klik yah iseng ajah naro link ke situs porno. Heuheuheuheuheu… please jangan di klik…

Yup sampe disini dah cukup jelas tentang Fungsi HTML Image Map Area ini… Okeh langsung gw sambung ke HTML Code-nya….

<img  usemap=”#ganteng” src=”images/area.png” alt=”anshoriDOTnet” width=”375″ height=”100″ />
<map name=”ganteng”>
<area shape=”rect” coords=”22,10,109,85″ href=”http://www.anshori.net&#8221; alt=”anshoriDOTnet” target=”_blank” />
<area shape=”poly” coords=”147,83,186,12,230,84″ href=”http://ghenkvee.blogspot.com&#8221; alt=”anshoriDiary” target=”_blank” />
<area shape=”circle” coords=”306,50,40″ href=”http://www.killerjo.net&#8221; alt=”iseng” target=”_blank” />
</map>

Itu Fungsi HTML yang gw pake… Disini gw mau jelasin satu persatu lahan dan perlahan….😛

<img  usemap=”#ganteng” src=”images/area.png” alt=”anshoriDOTnet” width=”375″ height=”100″ />

Di Fungsi Image <img ini ada tambahan atribut usemap yang disini gw masukin ID #ganteng, yang fungsinya itu nyambungin ke fungsi <map> tag.. (ingat jangan lupa tanda #)

<map name=”ganteng”>

Ni isi standar dari fungsi syntax <map>

<map name="map-name">

<area	shape="area shape"
	coords="area coordinates"
	href="area hyperlink" or nohref="nohref"
	target="hyperlink target"
	title="area title"
        alt="alternate text"/>

<area	shape="area shape" ...

</map>

Udah cukup paham? Sekarang nyambung ke fungsi Tag <img>.. Sebelumnya jangan lupa untuk kasih nama tag <map pake nama atribut dari usemap di tag <img. Di bagian tag <area> yang kudu ati-ati mahamin apa yang gw tulis…

Di tag <area> ini gag perlu kan gw tulis penjelasan tentang atribut untuk href,target,title, n alt? Soale atribut itu familiar banget digunain di tag yang lainnya diluar tag <area>. Disini gw mau kasi penjelasan untuk atribut shape n coords, dimana kedua atribut itu kudu bersinambungan penggunaanya. Penggunaan atribut shape ini dibagi empat value atau nilainya, yaitu rect, polycircle, dan default.

Shape Rect

Perhatiin penggunaan tag shape rect yang gw pake di contoh… <area shape=”rect” coords=”22,10,109,85″ href=”link” alt=”anshoriDOTnet” target=”_blank” /> *untuk atribut yang ga di BOLD diabaikan ajah…

shape rect atau bahasa kerennya ntu rectangular shape alias PERSEGI PANJANG (pokoknya yang segi empat) digunain untuk OBJECT yang bentuknya KOTAK (bukan kubus, soale kubus punya banyak sudut yang digunainnya pake shape poly) yang value atau nilai coords ditentuin oleh x1,y1,x2,y2 pixel images tersebut. atributnya ditulis macam ini coords=”x1,y1,x2,y2″ sudut kiri atas dan sudut kanan bawah persegi empat itu.

Shape Poly

Yang kedua sekarang perhatiin penggunaan tag shape poly yang juga gw pake di contoh.. <area shape=”poly” coords=”147,83,186,12,230,84″ href=”link” alt=”anshoriDiary” target=”_blank” />

Nah lho… kok untuk atribut coords ini valuenya banyak? Yup shape poly ini yang bahasa kerennya polygon shape alias PERSEGI BANYAK digunain untuk OBJECT yang sudutnya itu lebih dari tiga sudut. Value atau nilainya itu dituliskan x1,y1,x2,y2,x3,y3,…… dst xn,yn ditentukan dari tiap sudut object tersebut. Atributnya ditulis kek gini coords=”x1,y1,x2,y2,x3,y3….”

Shape Circle

Shape yang ketiga coba liat lagi penggunaan tag shape circle yang gw pake di contoh… <area shape=”circle” coords=”306,50,40″ href=”link” alt=”iseng” target=”_blank” />

Ini yang paling simple, shape circle sesuai namanya digunain untuk OBJECT yang bentuknya itu BULAT atau BUNDAR. Yang value atau nilainya itu dituliskan x,y,r dari titik tengah kemudian besarnya radius dari BULATAN,BUNDARAN, atau LINGKARAN tersebut. Atributnya ditulis kek gini coords=”x,y,r”

Shape Default

Nah kalo yang ini gag ngarti dah gw kudu tulis apaan… Maap maap mohon maap, bukannya males tapi emang bener2 gag tau shape default ini buat apaan. Gw jg gag pernah make. Heuheuheuheuheu🙂

Yup, sekian dulu tulisan ringan n gag bermutu ini. Untuk penjelasan tentang gimana caranya untuk nentuin koordinat imagenya di pending dolo yah, coz waktu udah menunjukkan pukul 2:17 pagi… Disambung pas gw bangun nanti deh… Semoga bermanfaat😉

 

Sumber yang akhirnya bikin gw ngerti sama tag HTML map: http://www.elated.com/articles/creating-image-maps/


14 Responses to “HTML Image Map Area Tag”

  1. […] HTML Image Map Area Tag […]

  2. AaEzha said

    weks…mantap euy..
    jarang neh yang ngebahas ini😀

    • Tengkiu zha.. ada lagi yang mangtaps, pake javascript… tapi rada ribet, belum ketemu titik terangnya. kudu bener2 teliti. koordinatnya jg banyak banget

  3. septi said

    thanks banget informasinya gannnn.. bingung apa pengertian dari image map,, akhirnya nemu juga ni…

  4. g_82 said

    Thank’s a lot my bro, don’t forget to update always your articles for we all.

  5. afrizalh said

    cara mengetahui titk-titk koordinatnya gimana ya om ?

  6. Andi said

    gimana caranya nampilin teks di tag om? misalnya pada area lingkaran di gambar pengen ane kasih tulisan gitu caranya gimana om? udah muter2 google gak ketemu2 nih.

  7. Saya masih bingung dengan cara penomeran coords nya gan
    bisa dijelaskan?🙂

    Terima kasih

  8. seumpama kalau pengen nampilin hrefnya ke map gimana mas ?

    • maksudnya gimana yah??? href link kah??? dimasukin ke bagian tag area…

      <area shape="rect" coords="22,10,109,85″ href=”http://www.anshori.net” alt=”anshoriDOTnet” target=”_blank” />

      CMIIW

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: