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

  • 17 March 2010 at 00:51
    Permalink

    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 😀

    monggo dipraktekkan

    Reply
  • 17 March 2010 at 08:13
    Permalink

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

    saya juga masih beLajar kok, Mas…

    Reply
  • 17 March 2010 at 08:31
    Permalink

    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
  • 17 March 2010 at 10:01
    Permalink

    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
    😀

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

    Reply
  • 17 March 2010 at 10:44
    Permalink

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

    Reply
  • 17 March 2010 at 10:47
    Permalink

    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? 😀
    sebagai sesama lelaki, aku merasa tersakiti dengan sendaL yang Bundo lempar ke meja Kyaine… 🙂

    Reply
    • 17 March 2010 at 15:23
      Permalink

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

      Reply

Leave a Reply