Tukar Gambar Apabila Dilalukan Cursor

Memasang gambar yang boleh bertukar semasa dilalukan cursor di blog mungkin boleh menambah sedikit kelainan pada blog anda. Dan juga gambar yang disertakan dengan link boleh menarik sedikit perhatian.



Contohnya, cuba lalukan cursor anda pada gambar di bawah. (Dan juga boleh klik untuk ke blog ohbest)





Tutorial adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mahu, url gambar pertama dan url gambar kedua.

<a href="Target link" target="_blank"><img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" /></a>




Contoh untuk kod untuk demo di atas adalah

<a href="http://ohbest.blogspot.com" target="_blank"><img src="http://i.imgur.com/Z5B1M.png" onmouseover="this.src='http://i.imgur.com/PlE1J.jpg'" onmouseout="this.src='http://i.imgur.com/Z5B1M.png'" /></a>



2. Anda boleh post di dalam entri blog anda seperti biasa ataupun boleh letakkan di sidebar.


Senang dan mudah bukan.?.:)


Nota: Jika mahu gambar sahaja tanpa link, kodnya seperti dibawah.

<img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" />



Selamat mencuba.:)



41 comments:

  1. this best bro...best bro...

    ReplyDelete
  2. awesome weh..
    tapi, code yang di bagi kat no 1 tu, ade slack sikit lah..cube try check balek..tq

    ReplyDelete
  3. dah try,, x bley resize la. bley ajar x camna nak resize?? Please.. Tlong ajar kat shoutbox www.twilleries.blogspot

    ReplyDelete
  4. lpas tu, camna nak buat benda ni kat entry blog. dah try, tapi kuar url ja

    ReplyDelete
  5. umi kokmie.
    Thanks coz bagitahu. Tak perasan ada tertinggal lak sebelum ni.
    Thanks.

    ReplyDelete
  6. mcm mane nk wt 'show all' kt dlm bloglist kita? sbb skrg nie bloglist wawa jd panjang sgt n serabut laa plak. klu dpt di 'show all' kan lg cantik..help me plzzz

    ReplyDelete
  7. Wow... best woo macam tuu...

    ReplyDelete
  8. best tapi pix mesti resize dahulu ker?

    ReplyDelete
  9. boleh jg nanti kita coba,
    sekalian nitip promosi yah untuk yang ingin dapat uang tambahan silahkan klik
    http://www.penasaran.net/?ref=sbgjxe
    kerjaan entri data perdata yang di entry kita dapat bayaran 10.000

    ReplyDelete
  10. done ! semadd doe , thanks yaw

    ReplyDelete
  11. menarik yg ni... aku da cuba & sukses.. hehe

    ReplyDelete
  12. Code tu nak paste kat mana?
    Ajar laa, ajar laa :(

    ReplyDelete
  13. salam..mcm mna nk dptkn url dri lam kmputer..cntohnye nak msukkn gmbar dri pc kita seniri

    ReplyDelete
  14. mcmne nk buat kat smua gmba ?tkkn la nk edit smua post kot .

    ReplyDelete
  15. mcm mna nk buat jam pada cursor tu?

    ReplyDelete
  16. dah cuba tak jadi... dah ikut mcm mcm, photo bucket mana satu link yg boleh guna hadoiii pening nampak cam simple tapi separuh gilerr beb

    ReplyDelete
  17. tlg chekkan http://thealmightythecreator.blogspot.com/

    http://feltcreativezone.blogspot.com/

    ReplyDelete
  18. Nak save kat mana? kat template eh?

    ReplyDelete
  19. thank its working!!

    ReplyDelete
  20. salam..mcm mna nk dptkn url dri lam kmputer..cntohnye nak msukkn gmbar dri pc kita seniri
    Tutorial Blog

    ReplyDelete