Mouse Over Image Effect

You can make your blog's presentation more attractive by adding the special effect to the images. When mouse is moved up to the image it changes another image. For Example see the change in the images shown below when you hover mouse on it.

You noticed the change! It works of the basis of the given syntax  

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

1. TARGET URL GOES HERE: Put Your target URL, as I put my twitter link to Target URL. If You want to open it in new window simply write after it target="blank" , see below

<a href="TARGET URL GOES HERE" target="blank">

Example <a href="http://arvindjangid.blogspot.com" target="blank">

2. URL OF FIRST IMAGE GOES HERE : Put your first image URL. This image will appear as default without mouse hovering it. Do not forget to put the same URL after the second image URL, it repeats two times (see in blue color text).

3.URL OF SECOND IMAGE GOES HERE :Put the second image URL. This image will appear only when cursor hover it. 


See the complete example of above twitter image

<a href="http://twitter.com/#!/arvindjangid" target="blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2Oo-A_t8JhOBcXjIZ0THGLJux5vjiTq0hAWkq4j9DrYGz41VqERt1tJBNfBl04pKPiAEKpjPNUeX4FanbfnXIgnM5dJfJLmk4S2UDk3oDNl1LwI9wLggSRxyShPuZBXV_VJZAaZHTLaB/s1600/1.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCUwS9eW-rnmTnGOKPIQWP7BluGa8vUS-nybMsxuoF-6im76h9Jn35Vpm31C-yUMerKxysWXLKRvuf0wvIPMTVMcnqHiLsV7kW9_tE8_Wr3ZIqymHx_YCcsJpEc8d11AfaQmGqwTq1kWr/s1600/1-1.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2Oo-A_t8JhOBcXjIZ0THGLJux5vjiTq0hAWkq4j9DrYGz41VqERt1tJBNfBl04pKPiAEKpjPNUeX4FanbfnXIgnM5dJfJLmk4S2UDk3oDNl1LwI9wLggSRxyShPuZBXV_VJZAaZHTLaB/s1600/1.png" /></a>

Finally the code may be used in blog's sidebar and in HTML also. 

Respective Reader ! If You Like this Please Share it.

Arvind

Baca juga