2 Blogger | Simple Mouseover Effect Code For Images

For a last couple of days I have been observing my blog's incoming traffic analytics through Clicky, and found most of the visitors were searching for "image mouse over" or "hover image" or similar keywords and phrases, while my blog was not carrying any post specifically to provide them with some codes to be used with any desired images or images to get such effect and rather then this it was some of the widgets I do have here are included with such codes that were catching attention of the search engines and drawing traffic to my blog, which may not be easier for some of the fellow bloggers to understand. Therefore, I decided to share an easiest code you can use to get this effect with any image on all major browsers but IE.

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/AVvXsEiXdLj6rt-6uOsEOu7BkCTEb0W3hKpPhqXxT6v35MIO4-IEKSDS9nL45a5ON6hJ5G3wbYbjJqMchQ22u-cfAjjWBqVox7trz7l3kmoYnJQ1pmSXmkbvQHfoyRdK9Vm-QBZPchIEgZ_Pe3za/s1600/image02.jpg'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg'" />

• 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/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg&amp;apos;' onmouseover='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdLj6rt-6uOsEOu7BkCTEb0W3hKpPhqXxT6v35MIO4-IEKSDS9nL45a5ON6hJ5G3wbYbjJqMchQ22u-cfAjjWBqVox7trz7l3kmoYnJQ1pmSXmkbvQHfoyRdK9Vm-QBZPchIEgZ_Pe3za/s1600/image02.jpg&amp;apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-ia-IjH0AZCw8em5ggZWVLq0oXhozjE3kUtAmR3YW_ifqi8rrXpoUFqST7RH91E-CJn-KCWKhZBabmruegEHYkEF9sDkuYJKN44f2g9bHQStejN4Ekmh9XRmTYQiBGis4N1UdotGquBR/s1600/image01.jpg'/>

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.