Bisa Ngeklik di <area> yang Kamu Suka

Kalau kalian simak sidebar blog ini bagian kanan, ada planet-planet yang menggoda untuk diklik. Nah bagemana itu cara membuatnya? Kok kita bisa mengarahkan klik-klikan semau kita?

Gampang ternyata. HAHAHA!

Gambar di atas ga bisa diklik.
Cuma buat thumbnail doang HAHAHA

Tapi awalnya JELAS nggak gampang. Aku muter-muter cari caranya ndik google. Kata kuncinya apa? Aku diam-diam view source blognya theyulianzone dot com. Lalu nemu kata kunci <area>. Waaah, namanya tukang belajar di google, kata kunci itu HAL YANG SANGAT AMAT PENTING! Karena dengan kata kunci yang tepat, google akan dengan gampang mencarikan solusinya!

Nemulah web belajar HTML sejuta umat: w3schools.com

Lalu belajar bab <area> itu di sini.

Apakah saya langsung bisa? JELAS ENGGHAK! HAHAHAHA! Saya lalu mengeklik link ijo “Try it Yourself” dan taraa.. Aku langsung sedikit mudeng. CUMA SEDIKIT LO YAH!!!

Nih aku jelaskan dikit:

Kalian bisa ngeklik Matahari (yang gambar kuning gedhe), Planet Merkurius dan Venus untuk melihatnya dalam bentuk utuh dan lebih besar. Nah, kok bisa gitu ya? Kok bisa milih bagian mana yg kita klik ya. CANGGIH YA? HAHAHA *aku koyok wong ndeso ya*

Yuk, kita jelentrekkan kodenya di bawah ini:

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name=”planetmap”>

<area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”http://www.w3schools.com/tags/sun.htm” target=”_blank”>
<area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”http://www.w3schools.com/tags/mercur.htm” target=”_blank”>
<area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”http://www.w3schools.com/tags/venus.htm” target=”_blank”> </map>

Tambah mumet ya? SAMA! HAHAHAHA

Mari kita petani satu-satu:

• http://www.w3schools.com/tags/planets.gif adalah link gambarnya. Jadi gambarnya satu doang. Tapi bisa diklik di area macam-macam. Gitu maksudnya tutorial ini.
• width=”145″ height=”126″ adalah lebar dan tinggi gambar. Halah kayaknya hal ini gak perlu dijelaskan harusnya. Hihihi.
• usemap sama map name itu harus sama. Misal namanya planetmap
• shape=”rect” adalah area pengeklikan kita berbentuk persegi. Alias kotak.
• coords=”0,0,82,126″ adalah 0 piksel lebar, 0 piksel tinggi, 82 piksel lebar, 126 piksel tinggi.Kenapa kok 0,0 karena area pengeklikan dimulai dari pojok kiri atas. Makanya koordinatnya 0,0. Kalau dimulainya dari mepet kiri melorot kebawah 10 piksel, berati kodenya 0,10. Gitu. Paham khan?
  Lalu 82 dan 126 itu lebar dan tinggi perseginya. Udah manut aja deh HAHAHA.

  Saking besarnya matahari (sun), makanya area pengeklikkan dibikin persegi karena menyerupai persegi.

  Nih saya gambarkan ilustrasinya:
  

• shape=”circle” adalah area pengeklikan kita berbentuk lingkaran. Alias sirkel. Halah mbulet. Eh iya, alias mbulet!
• coords=”90,58,3″ adalah 90 piksel lebar (diitung dari mepet kiri gambar ke kanan sampe pusat [sumbu?] lingkaran merkurius), 58 piksel tinggi (diitung dari mepet atas gambar), 3 piksel jari-jari lingkaran. Planet merkuriusnya khan kecil banget tuh. Jari-jarinya cuma 3 piksel. Kasian ya.
• Untuk planet Venus pun juga sama. Coords=”124,58,8″ itu adalah 124 piksel lebar dari kiri, 58 piksel dari atas. Lalu jari-jari planet venusnya 8 piksel.
• Untuk href=”http://…” itu link tujuan. Ah kalian sudah pada tahu kalo yg ini. Trus target=”_blank” itu kalo diklik kiri, link tujuan akan muncul pada new tab. Ah kalian juga sudah pada tahu hal ini.

Nah! Aku udah coba nih. Contohnya ada di bawah ini nih. Keren ya saya! IYA DONG! HAHAHA

Coba kalian arahkan mouse ke tulisan GO di roketnya. Nanti akan muncul tulisan “Menuju Galaksi Ginuk-ginuk”. Kalo kalian klik, maka akan diantar ke dzofar.com. Simpel khan? TAPI MENARIK BANGET LO INI! Iya khan? IYA AJA DEH! *maksa

Yuk, kita preteli kodenya:

<img src="https://4.bp.blogspot.com/--a8D4DsurFw/Ufi6hct4DRI/AAAAAAAAIjc/T8FAERcpgds/s1600/go.png" width="450px" height="450px" alt="salahalamat" usemap="#salahalamat">

<map name=”salahalamat”>

<area shape=”circle” coords=”256,342,24” alt=”Menuju Galaksi Ginuk-ginuk” title=”Menuju Galaksi Ginuk-ginuk” href=”https://dzofar.com” target=”_blank”> </map>

Cara saya mendapatkan angka “256,342,24” itu bagemana? Nah itu yang menjadi pertanyaan besar kita. Apakah saya mengira-ngira? OH TENTU TIDAK. Khan ada PHOTOSHOP! HAHAHAHA.

Caranya guwampang! Ya tinggal crop aja gambarnya dari pojok kanan atas sampe tepat di pusat lingkaran tulisan GO. Lihat gambar di bawah ini:

Lalu enter. Maka gambar akan terpotong. Lalu pilih Image > Image Size. Akan muncul ukuran lebar dan tingginya. Viola!!

Tuh khan udah tahu bocoran ukurannya. Tinggal masukin aja kedua angkanya di coords=”256,342,(jari-jari?)“.

Lalu untuk mengetahui ukuran piksel jari-jari lingkaran GO, caranya juga sama dong ah. Dicrop doang! lalu diintip image sizenya. Lihat gambar di bawah ini ya say:

Jari-jari itu sudah pasti nilai lebar dan tingginya sama. Soalnya jari-jari itu cuma satu angka doang. Pelajaran SD ini vroh. Kamu lulus SD khan? HAHAHA.

Oke semua data sudah diperoleh. Saatnya ditulis ke coords=”256,342,24″ lagi.

Lalu biar pas mouse dideketin trus muncul tulisannya “Menuju Galaksi Ginuk-ginuk”, tinggal tambahkan title=”Menuju Galaksi Ginuk-ginuk”. Udah gitu doang kok. Guwampang khan? HAHA.

Trus untuk pengaplikasian yang shape=”rect”, sudah aku aplikasikan ke BANNER MESEN VECTOR di sidebar kanan tengah itu loh. Saya kepingin area pengeklikannya tepat pada kotak bertuliskan “ORDER VECTOR KLIK DI SINI!!”. Nilai koordinatnya (coords)nya seperti dibawah ini:

 

Cara mengetahui koordinatnya juga dengan cara crop photoshop kayak contoh di atas. Nah, dari data koordinat di atas, didapatkan: coords=”0,442,200,501″

Jadi kalo sampean grayahi area berwarna MERAH (di mana tulisan “ORDER VECTOR KLIK DI SINI!!” berada) pakai mouse, maka akan diantar menuju ke halaman pesan vector. KEREN KHAN?? IYA DOONG!!! HAHAHA…

Btw, kotaknya kok selalu mepet kiri ya? Iya kebetulan aja sih. Padahal kotak pengeklikan bisa di mana aja. Kayak contoh lingkaran ituh. Asal ditentukan koordinatnya, udah beres. Jadi gak harus selalu 0 koordinatnya. Tergantung di mana meletakkan area pengeklikan.

Btw, daripada puyeng, sebenarnya ada cara instantnya. Yaitu dengan mengunjungi www.image-maps.com. Tapi kalian belajar sendiri aja ya. Saya lebih seneng manual aja. Huahaha..

Trus apalagi ya? Kayaknya udah semua deh. Publish aja yuk?