Draw On It

March 15th 2010 | Posted by Hari Mulya

Gambar atau image ternyata tak cuma bisa diberi 1 link, tapi bisa lebih dari satu link. Bahkan sebagai bonusnya kita bisa membuat link dengan bentuk kotak, lingkaran, ataupun berbentuk poligonaL. MisaLnya saja gambar di bawah ini, gambar tersebut berukuran 450 x 450 pixeL, sengaja saya beri tambahan beberapa bentuk dua dimensi untuk memudahkan sahabat menemukan link yang saya buat.

Penambahan link pada gambar dengan cara seperti ini memang agak rumit dan membutuhkan sedikit perhitungan. Saat menambahkan gambar pada haLaman bLog, kita tinggaL menambahkan code berikut:

<img src="gambar.jpg" alt="ini gambar" width="450" height="450" border="0" usemap="#linkbanyak"/>
<map name="linkbanyak">
<area shape="rect" coords="35,50,185,150" href="#linkdisini" alt="kotak" />
<area shape="poly" coords="200,166,312,154,272,254,255,234,175,297,139,254,216,190" href="#linkdisini" alt="panah" />
<area shape="circle" coords="350,350,50" href="#linkdisini" alt="lingkaran" />
</map>

shape: adaLah bentuk link yang akan digunakan sebagai link, bisa berupa kotak (rect), lingkaran (circLe) atau poligonaL (poLy). Sedangkan isi dari tag coords daLam satuan pixeL pada masing-masing shape itu kira-kira seperti ini:

rect : coords="x1,y1,x2,y2", dimana x1,y1 adaLah koordinat titik pojok kiri atas dan x2,y2 adaLah koordinat titik pojok kanan bawah.

circle : coords="x1,y1,x2,y2,x3,y3,…,xn,yn", dimana x1,y1 adaLah koordinat titik awaL shape dan xn,yn adaLah koordinat titik akhir shape.

poly : coords="x1,y1,r", dimana x1,y1 adaLah koordinat titik tengah lingkaran dan r adaLah panjang jari-jari lingkaran.

Draw On It

kotak panah lingkaran

Incoming Search Terms:

font 3 dimensi, border pojok, menambah font pada blog, gambar teka-teki, gambar border pojok, font untuk blog, font 3 demensi, gambar pojok, gambar pojok border, bikin font dari gambar, gambar tekateki

Related Posts

31 Responses to “Draw On It”

wah.. infonya manteb..
tapi saya lom ngerti ikz..

jangan cuma dibaca, Dab.. tapi diresapi… :D

.-= fai_cong´s last blog : Award yang selesai dan PR yang tidak tau rumusnya =-.

[Reply]

Sangat cocok untuk link pada peta atau hal lain yang butuh keterangan mendetail…

Tapi…
Hmmmmmmmmmmm……..

kok ‘hhmmm’ Pak?
bukankah iLmu matematika bisa digunakan di sini?

.-= marsudiyanto´s last blog : Blog On The Blog Ver 1.0 =-.

[Reply]

wih keren deh..kalo mau bikin peta bisa sekalian pake keterangannya nih

lebih mudah lagi kaLo pake tool yang bisa menggambar map area itu…

.-= Reza Fauzi´s last blog : Membuat Game Online Seperti Travian Sendiri Yuk! =-.

[Reply]

Mbok ojo nganggo itung2an!

kaLo pake tool/software ga usah pake itung2an, Dab..
tinggaL digambar di atas image…

*nek nganggo itung2an, kowe ora nyandak…

[Reply]

Wuiiih keren hasilnya…Tapi tetep ora ngartos aku…

pantesan ga ngartos, lha wong ngidamnya lalapan… :D

.-= Rita Susanti´s last blog : NgiDaM… =-.

[Reply]

Rita Susanti | March 15th, 2010 at 14:50

Hmmm juga…
masih mending atuh om ngidam lalapan, daripada ngidam html, kan kasian yg nyari ntar gak bakal dapat, dan gak bisa dimakan pula :D

ga bisa dimakan tapi bisa bikin kenyang lho, mBa..
tanya aja Pak Mars… :D

.-= Rita Susanti´s last blog : NgiDaM… =-.

[Reply]

apa karena saya suka lalapan juga ya? sama seperti Rita, tetep ora ngartos :)

mungkin karena saya juga memakai kaLimat-kaLimat ajaib yang susah dimengerti… :D

[Reply]

bunda sukses besar , gak ngerti sama sekali, ya sudah menyimak saja dgn tertib sambil melongo he he
salam

seLamat Bunda.. semoga sukses seLalu… :D

.-= bundadontworry´s last blog : Tanda Tanda Sombong =-.

[Reply]

keren! give me more tutz :)

more..more..more… :D

.-= fanz´s last blog : Jilbab =-.

[Reply]

bentar2, terus bagaimana jika membuat banner 125×125? dengan banyak link di dalamnya? hehe, ntar gak muat. hohoho.

lagian siapa juga yang mau pasang banyak link di gambar yang sekeciL itu? :lol:

[Reply]

softwarenya pake apa bro biar nggak mumet ngitungnya ?

[Reply]

wah, komenku kok ilang, mas hari, hehe …. pingin praktik juga nih cara memodifikasi image seperti ini.

saya cari-cari di rumahnya Akismet ga ada, Pak..
mungkin nyasar :D

monggo dipraktekkan

[Reply]

kalau masalah kode-kodean seperti ini saya lom begitu ngeh mas

saya juga masih beLajar kok, Mas…

[Reply]

Keren mas mulya.

Kalau di html atau di dreamweaver kita kenal dengan istilah image map ya mas.

kita memang harus bisa menentukan koordinat x,y, atau z atau r dll sebagainya

mantap mas atas tutornya

terus berbagi ya

iya, bener, mBa..
pake Dreamweaver lebih mudah..
makasih…

[Reply]

makasihh infona mas hari
ternyata satu gambar bisa dimasukin bbeberapa link yaw hehe,, saya save kode html na yaw untuk trial

berkunjung dan ditunggu kunjungan baliknya he
salam blogger
makasih
:D

you’re weLcome..
segeramenuju TKP..
saLam bLogger…

[Reply]

Hmmm, masih ada aroma belum mandi niyh.. **diaahhhh, suruh Hari mandi..!**

beuh.. ga mandinya kaLo liburan doank Bundo..
tu juga ga mesti..
lha hari ini kn kerja..
jadi musti mandi..
*lagian diah lebih suka kaLo aku ga mandi kok, Bun… :lol:

[Reply]

seandainya bundo ngerti cara bikin image mape ini dari kemarin, tentu dengan mudah hari bisa menemukan bundo.

mengapa dengan PD nya Bundo pikir Hari sudi menemui Bundo? :D
sebagai sesama lelaki, aku merasa tersakiti dengan sendaL yang Bundo lempar ke meja Kyaine… :)

[Reply]

jumialely | March 17th, 2010 at 15:23

Saya juga mau di image map sama bundo, wakakakaka, kapan masang Map di medan Bundo. Kan Deket :D

[Reply]

keren mas infonya
salam

[Reply]

wah terimakasih banyak mas karena sudah mau berbagi ilmu…

[Reply]

walah…makin keren, makin ketinggalan aja,nih

[Reply]

Kalo menggunakan tool seperti dreamweaver membuat area shape akan lebih mudah… tinggal drag, kemudian isikan linknya…

saya juga biasanya pake DW..
kaLo manuaL emang lebih suLit…

Salam kenal sob

saLam kenaL juga, Dab…

[Reply]

pernah nih saya menggunakan trik ini waktu bikin website yang ada petanya. Tapi kalau ndak pakai program macam dreamweaver, agak mabok juga tuh ngitung koordinatnya.

Tapi penjelasan disini cukup detail… :D

[Reply]

waduh, rumit juga ya mas …
jadi bingung, hehe..

[Reply]

wah kaosnya keren desainnya mas..
pengen bikin kaos juga ah pake nama domain juga

[Reply]

Hmmmmm…harus dpelajari pelan2, tapi di copy dulu ya mas biar lebih khusuk mempelajarinya.
terima kasih tip yang bermanfaat.
salam hangat dari Surabaya

[Reply]

hmm…berbagi memang tidak pernah rugi. terima kasih om atas infonya
.-= Khatulistiwa´s last blog : Lintas Berita membuat saya frustasi =-.

[Reply]

otak saya kok ga nyampe ya Har… kacian deh gue.. !!

mudah kok… :D

Hari banyak ngasih tutorial… sekali lagi.. kerennn… !

[Reply]

wah, rumit beneran….

[Reply]

Is there 1 Wpress plugin that all web sites really should have ?!?.

[Reply]

Leave a Reply:

Name (required):
Mail (will not be published) (required):
Website:
Comment (required):