Mouseover Effect For Images

Simple Mouseover Effect Code For Images

DEMO: Hover mouse over the image!

Here are the codes:

• If you have to place image with mouseover effect through "Add & Arrange Page Elements" section on Blogger use this code (this code may work on IE);
  

Code:

<img alt='Image01' onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgnRmLHh6oWMbhnz39iX0kv39qNvKXaSq8uRwzsvn8sDxSb0WtnAAxTx_pa8XxW1YV5VzgpijxkiBIJcOGRYRa1nvdDTYyHHBgAD63q5AQbRwyavWL5NBxkNKOFLSnYQ9hOYRpPIANhtH/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2IW6-0s-U6nkvkGYUQxh16MH7D38eDHxjrtklFtEiGvJadPE_aWYcy_gvdsEEUAYvy5AKA8p0vpxzf_CJGCmt-lrqXAwAuYRkhyoFdtFABickNAyZpFLNBFJ-fWFl1_pZlZMN3cEuTOG/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2IW6-0s-U6nkvkGYUQxh16MH7D38eDHxjrtklFtEiGvJadPE_aWYcy_gvdsEEUAYvy5AKA8p0vpxzf_CJGCmt-lrqXAwAuYRkhyoFdtFABickNAyZpFLNBFJ-fWFl1_pZlZMN3cEuTOG/s1600/Image+4.png'" />

• If you have to place image with mouseover effect through "Edit HTML" section on Blogger use this code (this code may not work on IE);
  

Code:

<img alt='Image01' onmouseout='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2IW6-0s-U6nkvkGYUQxh16MH7D38eDHxjrtklFtEiGvJadPE_aWYcy_gvdsEEUAYvy5AKA8p0vpxzf_CJGCmt-lrqXAwAuYRkhyoFdtFABickNAyZpFLNBFJ-fWFl1_pZlZMN3cEuTOG/s1600/Image+4.png&amp;apos;' onmouseover='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgnRmLHh6oWMbhnz39iX0kv39qNvKXaSq8uRwzsvn8sDxSb0WtnAAxTx_pa8XxW1YV5VzgpijxkiBIJcOGRYRa1nvdDTYyHHBgAD63q5AQbRwyavWL5NBxkNKOFLSnYQ9hOYRpPIANhtH/s1600/Image+5.png&amp;apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2IW6-0s-U6nkvkGYUQxh16MH7D38eDHxjrtklFtEiGvJadPE_aWYcy_gvdsEEUAYvy5AKA8p0vpxzf_CJGCmt-lrqXAwAuYRkhyoFdtFABickNAyZpFLNBFJ-fWFl1_pZlZMN3cEuTOG/s1600/Image+4.png'/>

In the above codes replace the RED texts with the URL of the main image and the BLUE texts with the URL of the hover image.

http://bdlab.blogspot.com/2010/08/simple-mouseover-effect-code-for-images.html#more