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

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

  3. yos says:

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

  4. elmoudy says:

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

  5. Plesiran says:

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

  6. Khatulistiwa says:

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

  7. ceuceu says:

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

    mudah kok… :D

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

  8. adin says:

    wah, rumit beneran….

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

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