4 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/AVvXsEhlJSitrFdPH3tzK6XEAnYf-_bgyO1jDaIuX-3LtxwJjxujjlt8X-FeHRb0XZXi3uKRr6fUliJ5G9TjYKmnKPN9MUYiaSdvCDzzwatMNd8bjikpLA_NWXLt0IXl0VpYWMRH5enkaTRhuD04/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG1mCUWRxYXLu3572x6IcwDTgkqDi6mh9Tn8AQt9dteXuyphqDlFan_jew2Ybl4dCXAH9gyI5MNzBS-z6zn0u5J1J0L5JyP3JtPwLhs3K8df6TSPaYxn3rklspIVxritSlBr4HkXUWpqt_/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG1mCUWRxYXLu3572x6IcwDTgkqDi6mh9Tn8AQt9dteXuyphqDlFan_jew2Ybl4dCXAH9gyI5MNzBS-z6zn0u5J1J0L5JyP3JtPwLhs3K8df6TSPaYxn3rklspIVxritSlBr4HkXUWpqt_/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/AVvXsEhG1mCUWRxYXLu3572x6IcwDTgkqDi6mh9Tn8AQt9dteXuyphqDlFan_jew2Ybl4dCXAH9gyI5MNzBS-z6zn0u5J1J0L5JyP3JtPwLhs3K8df6TSPaYxn3rklspIVxritSlBr4HkXUWpqt_/s1600/Image+4.png&amp;apos;' onmouseover='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJSitrFdPH3tzK6XEAnYf-_bgyO1jDaIuX-3LtxwJjxujjlt8X-FeHRb0XZXi3uKRr6fUliJ5G9TjYKmnKPN9MUYiaSdvCDzzwatMNd8bjikpLA_NWXLt0IXl0VpYWMRH5enkaTRhuD04/s1600/Image+5.png&amp;apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG1mCUWRxYXLu3572x6IcwDTgkqDi6mh9Tn8AQt9dteXuyphqDlFan_jew2Ybl4dCXAH9gyI5MNzBS-z6zn0u5J1J0L5JyP3JtPwLhs3K8df6TSPaYxn3rklspIVxritSlBr4HkXUWpqt_/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.