MATERI IMAGE MAPPING HTML ~ Sipudt

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 tag.. Gag ribet kok bikinnya, cukup mudah. Disini gw mau shared gimana simplenya bikin Fungsi HTML 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…

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… 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….

”anshoriDOTnet”

http://www.anshori.net” alt=”anshoriDOTnet” target=”_blank” />
http://ghenkvee.blogspot.com” alt=”anshoriDiary” target=”_blank” />
http://www.killerjo.net” alt=”iseng” target=”_blank” />

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

Di Fungsi Image tag.. (ingat jangan lupa tanda #)

Ni isi standar dari fungsi syntax

Udah cukup paham? Sekarang nyambung ke fungsi Tag .. Sebelumnya jangan lupa untuk kasih nama tag yang kudu ati-ati mahamin apa yang gw tulis…

Di tag 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 . 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, poly, circle, dan default.
Shape Rect

Perhatiin penggunaan tag shape rect yang gw pake di contoh… *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 bentuknyaKOTAK (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..

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…

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

About Admin

Manusia Shift Dua.

MATERI IMAGE MAPPING HTML

About Admin

Related Post