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/AVvXsEhRyo6Ftv5NgOQWHhfMTgSDDk_YClzuioPNaMPKBn6prfi6xOyBnfW_Cdj6fGWtORtcSicxViyXWZuHP1lpl0nPzM9jvm6nLNE2g4gNtqZWmKkEmLeODONEpVwhh9qfyKm-9uLnv6ccLvj6/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMrmmXbwdTYRbzuzHtDhJLKDa2rkZ-b0LZcDbyPVjLm1XoXG7bwh2iS1lGR53oFGxtsMbB_ruF5ybQS2EL_h3FiJyRmlLLBKUR6yLJtp5XR_alQykMWBxNYNN5k-kWJcQxJAhL8RjtIs2/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMrmmXbwdTYRbzuzHtDhJLKDa2rkZ-b0LZcDbyPVjLm1XoXG7bwh2iS1lGR53oFGxtsMbB_ruF5ybQS2EL_h3FiJyRmlLLBKUR6yLJtp5XR_alQykMWBxNYNN5k-kWJcQxJAhL8RjtIs2/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/AVvXsEiYMrmmXbwdTYRbzuzHtDhJLKDa2rkZ-b0LZcDbyPVjLm1XoXG7bwh2iS1lGR53oFGxtsMbB_ruF5ybQS2EL_h3FiJyRmlLLBKUR6yLJtp5XR_alQykMWBxNYNN5k-kWJcQxJAhL8RjtIs2/s1600/Image+4.png&amp;apos;' onmouseover='this.src=&amp;apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRyo6Ftv5NgOQWHhfMTgSDDk_YClzuioPNaMPKBn6prfi6xOyBnfW_Cdj6fGWtORtcSicxViyXWZuHP1lpl0nPzM9jvm6nLNE2g4gNtqZWmKkEmLeODONEpVwhh9qfyKm-9uLnv6ccLvj6/s1600/Image+5.png&amp;apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMrmmXbwdTYRbzuzHtDhJLKDa2rkZ-b0LZcDbyPVjLm1XoXG7bwh2iS1lGR53oFGxtsMbB_ruF5ybQS2EL_h3FiJyRmlLLBKUR6yLJtp5XR_alQykMWBxNYNN5k-kWJcQxJAhL8RjtIs2/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.