Gambar Bertukar Bila Cursor Dilalukan

Agak lama juga saya tidak kongsikan satu kaedah untuk menjadikan blog menarik dibaca. In Sha Allah, kali ini saya nak kongsikan satu tip atau kaedah bagi membolehkan gambar anda bertukar bila cursor tetikus dilalukan. Contoh boleh anda lihat dalam entri ini seterusnya. Dan saya akan huraikan beberapa kelebihan menggunakan tips ini.

Ada masa kita lihat blog nampak bosan dengan gambar statik. Jadi, menerusi tips ini, anda akan memberikan sedikit efek pada gambar yang membolehkan ia kelihatan lebih menarik daripada biasa. Selain itu, dengan menggunakan efek ini, anda boleh menyampaikan maksud gambar dengan lebih baik - terutama ketika melakukan Wordless Wednesday.

Gambar Bertukar Bila Cursor Dilalukan

Cuba lihat contoh di bawah ini.

Disediakan dua gambar ini. Gambar ini boleh anda letakkan dalam satu blog khas untuk anda sahaja, bagi menyimpan gambar-gambar tertentu seperti ini bagi digunakan dalam blog utama anda.

Apabila saya menggunakan tips yang saya katakan tadi, ia akan jadi seperti ini.

Ok. Nampak tak kelebihan di situ. Anda boleh berikan maksud atau tajuk gambar tersebut dengan hanya satu laluan tetikus. Malah, anda boleh memberikan kelebihan untuk pengunjung klik pada gambar dan pautan kepada entri lain atau ke blog lain.

<a href="URL Tertentu" target="_blank"><img src="URL Gambar Pertama" onmouseover="this.src='URL Gambar Kedua'" onmouseout="this.src='URL Gambar Pertama'" /></a>

Cara ini juga boleh anda gunakan untuk paparkan iklan-iklan kreatif anda. Saya pernah menggunakan cara ini untuk iklan ChurpChurp dan juga 8Share, dan alhamdulillah, ia berjaya menghasilkan klik dan income.

Ia juga boleh menarik perhatian pengunjung untuk baca entri-entri lama anda, dengan menggunakan gambar mouse-over ini. Hanya tukar URL Tertentu dengan URL entri yang anda mahu promosikan, atau boleh sahaja digunakan untuk pengiklanan dalam blog.

Tidak mahu gambar link ke mana-mana pautan ... hanya buang tag a dalam kod tersebut menjadi seperti ini:

<img src="URL Gambar Pertama" onmouseover="this.src='URL Gambar Kedua'" onmouseout="this.src='URL Gambar Pertama'" />

Selamat mencuba.