Simple Mouseover Effect Code For Images ~ Log-Tutorial

Blogger Hack Widgets Simple Mouseover Effect Code For Images

Simple Mouseover Effect Code For Images

Unknown 8:10 AM

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/AVvXsEhjBiFbYVbHGl4NMcjwOmirpDmRW7HxpTAoxpNVEr3IFVk67GnTRRnINXiZnlkdmJqdrmEnwnOAP0Pxp1W5HDThKen3zw1dZPyThyphenhyphenWhjrt3RIZIF1qrNrb886ciKOo36RpqJ3LtJ6o5d5WW/s1600/Image+5.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-QCBXsJfl9LJGQDVp6-WI_Z08I2yBao2gXWYwkQ7eDbWxeJilGdsY94GAU5tEidbJNQhujhkGWsRDJNT8MOrxwfcMn2iTgymGRBfsXQLeYjVBJvQ2p31YdwEhQIPOsUqQOePZnYoqsMQ/s1600/Image+4.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-QCBXsJfl9LJGQDVp6-WI_Z08I2yBao2gXWYwkQ7eDbWxeJilGdsY94GAU5tEidbJNQhujhkGWsRDJNT8MOrxwfcMn2iTgymGRBfsXQLeYjVBJvQ2p31YdwEhQIPOsUqQOePZnYoqsMQ/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=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-QCBXsJfl9LJGQDVp6-WI_Z08I2yBao2gXWYwkQ7eDbWxeJilGdsY94GAU5tEidbJNQhujhkGWsRDJNT8MOrxwfcMn2iTgymGRBfsXQLeYjVBJvQ2p31YdwEhQIPOsUqQOePZnYoqsMQ/s1600/Image+4.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBiFbYVbHGl4NMcjwOmirpDmRW7HxpTAoxpNVEr3IFVk67GnTRRnINXiZnlkdmJqdrmEnwnOAP0Pxp1W5HDThKen3zw1dZPyThyphenhyphenWhjrt3RIZIF1qrNrb886ciKOo36RpqJ3LtJ6o5d5WW/s1600/Image+5.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-QCBXsJfl9LJGQDVp6-WI_Z08I2yBao2gXWYwkQ7eDbWxeJilGdsY94GAU5tEidbJNQhujhkGWsRDJNT8MOrxwfcMn2iTgymGRBfsXQLeYjVBJvQ2p31YdwEhQIPOsUqQOePZnYoqsMQ/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.

About Admin MC3

Relax and enjoy, don't be rush.

Related Post