Cara Membuat Gambar Berubah Saat Terkena Kursor

Jika berbicara mengenai tips dan trik untuk mempercantik blog. tentu tidak akan ada habisnya, karena sekarang ini banyak sekali tersebar trik trik maupun tips yang memberikan informasi dan cara cara yang bisa memberikan berbagai informasi yang anda butuhkan. dan untuk kali ini saya akan membahas tips cara membuat gambar berubah saat terkena kursor. 

 

Gambar ini merupakan salah satu hal yang penting dalam sebuah website, krena dengan gambar tersebut, website atau blog kita akan menjadi lebih menarik. Akan lebih menarik lagi bila terdapat variasi gambar, misalnya dengan cara membuat gambar berubah saat terkena kursor.

Berikut ini akan saya jelaskan bagaimana membuat gambar yang dapat berubah saat terkena kursor. Pertama-tama, sediakan 2 gambar. Tentunya, pilih gambar yang agak mirip.

menjadi

Gambar sebelum terkena kursor menjadi gambar setelah kursor.

Sehingga bila gambarnya digabungkan akan menjadi:

Kode HTML untuk gabungan gambar tersebut adalah:

<img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJW958j_86Bclbg1vgtYzeG9JQVJ7hL9Ov71wBSor1hmKMZA1GJzzPuyQmMFqWLgXvqg9EHgxS1iyFjL2q5a34PIDyuZn96XZMlUd2BsRbC_g9OOf7bNJiZivs453jMtr932mW2Apuvm8O/s1600/cooltext-starchem05.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OvWdgY3ccDOFN6zSl7ZaDW04O3jY392p0IJEs3hUkAlgihhfhnPA8p5Yt2g_rPqLZRg35C-b3ZqyITrWunZJHMwH0TqyVaRKQmP6JfcBJJS_CsPzuhm6czQPvXnLfUUv3rnq-yViHbe4/s1600/cooltext-starchem05-2.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJW958j_86Bclbg1vgtYzeG9JQVJ7hL9Ov71wBSor1hmKMZA1GJzzPuyQmMFqWLgXvqg9EHgxS1iyFjL2q5a34PIDyuZn96XZMlUd2BsRbC_g9OOf7bNJiZivs453jMtr932mW2Apuvm8O/s1600/cooltext-starchem05.png" />

Keterangan:

• Teks yang berwarna merah  adalah url gambar sebelum terkena mouse yaitu https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJW958j_86Bclbg1vgtYzeG9JQVJ7hL9Ov71wBSor1hmKMZA1GJzzPuyQmMFqWLgXvqg9EHgxS1iyFjL2q5a34PIDyuZn96XZMlUd2BsRbC_g9OOf7bNJiZivs453jMtr932mW2Apuvm8O/s1600/cooltext-starchem05.png ganti dengan url gambar Anda.
• Teks yang berwarna biru adalah url gambar setelah terkena mouse yaitu https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OvWdgY3ccDOFN6zSl7ZaDW04O3jY392p0IJEs3hUkAlgihhfhnPA8p5Yt2g_rPqLZRg35C-b3ZqyITrWunZJHMwH0TqyVaRKQmP6JfcBJJS_CsPzuhm6czQPvXnLfUUv3rnq-yViHbe4/s1600/cooltext-starchem05-2.png ganti dengan gambar yang Anda inginkan.

Selain cara di atas, terdapat juga cara dengan hover. Tapi untuk cara hover nanti kita akan bahas dipertemuan selanjutnya..!! terima kasih semoga sukses..~~

Artikel Terkait