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/AVvXsEho5smlQwTPp9WpM5hyozrGfOJ-COWO-X8mGudzmddZE5UlAIQ-9SQ0pggnyPIKsfzndJ_kZMp2I5ZtHQW6Uu4Dk2FEIhDtMQZq4djSqo6woBS7mx86fGYaLcciCNuLprieb42XQqnScaLQ/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mNAeIHtXblSlZKw4V-k_iic8FfIQVgBD39cT10hHZo0HXtiKJXymV3nYMlkUU4bIh9pq_BgKF4t4H1daTp3PjlwSfpNk-x4lPMhu5-SaWDdXfAfnAsj4wfWW9ilEBaZ9dG1daWUjOgdj/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mNAeIHtXblSlZKw4V-k_iic8FfIQVgBD39cT10hHZo0HXtiKJXymV3nYMlkUU4bIh9pq_BgKF4t4H1daTp3PjlwSfpNk-x4lPMhu5-SaWDdXfAfnAsj4wfWW9ilEBaZ9dG1daWUjOgdj/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/AVvXsEi4mNAeIHtXblSlZKw4V-k_iic8FfIQVgBD39cT10hHZo0HXtiKJXymV3nYMlkUU4bIh9pq_BgKF4t4H1daTp3PjlwSfpNk-x4lPMhu5-SaWDdXfAfnAsj4wfWW9ilEBaZ9dG1daWUjOgdj/s1600/Image+4.png&amp;apos;' onmouseover='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5smlQwTPp9WpM5hyozrGfOJ-COWO-X8mGudzmddZE5UlAIQ-9SQ0pggnyPIKsfzndJ_kZMp2I5ZtHQW6Uu4Dk2FEIhDtMQZq4djSqo6woBS7mx86fGYaLcciCNuLprieb42XQqnScaLQ/s1600/Image+5.png&amp;apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mNAeIHtXblSlZKw4V-k_iic8FfIQVgBD39cT10hHZo0HXtiKJXymV3nYMlkUU4bIh9pq_BgKF4t4H1daTp3PjlwSfpNk-x4lPMhu5-SaWDdXfAfnAsj4wfWW9ilEBaZ9dG1daWUjOgdj/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.