Hari Mulyanto
31

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
Filed in: Blogging, How It Works Tags: , , , , teka teki gambar rumit, border pojok, 

31 Responses to "Draw On It"

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

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

    saya juga masih beLajar kok, Mas…

  3. jumialely says:

    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…

  4. darahbiroe says:

    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…

  5. nakjaDimande says:

    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:

  6. nakjaDimande says:

    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… :)

  7. peri says:

    keren mas infonya
    salam

  8. bayuputra says:

    wah terimakasih banyak mas karena sudah mau berbagi ilmu…

  9. Pojok Pradna says:

    walah…makin keren, makin ketinggalan aja,nih

Leave a Reply

Submit Comment

© 2009-2016 Hari Mulya. All rights reserved. XHTML / CSS Valid.
Your Left Brain Can Analyze It While Your Right Brain Let You Feel It