Draw On It

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

31 thoughts on “Draw On It

  • 19 March 2010 at 09:54
    Permalink

    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
  • 19 March 2010 at 11:02
    Permalink

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

    Reply
  • 19 March 2010 at 14:00
    Permalink

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

    Reply
  • 19 March 2010 at 14:55
    Permalink

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

    Reply
  • 19 March 2010 at 17:07
    Permalink

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

    Reply
  • 21 March 2010 at 15:18
    Permalink

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

    mudah kok… 😀

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

    Reply

Leave a Reply