Today The Topic Is That “How To Show Different Image On Mouse Over Or Hover On A Static Image Using Pure HTML Code And Even Without CSS Code With Also A URL Link Placed On Both Of Them?”. we all know that a rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites.When you use this effect with an image or Picture you add to your blog the image will change to differant image once you hover your cursor over it.It’s also a very easy to use and can have so many uses. Here’s a preview of a rollover image, Place your cursor over the image to see it change. The image is also a clickable link so you can use it as a link on your blog. Making Rollover Effect Image This is the code we use to make the image.
You can use this code anywhere like in posts, template, gadgets, widgets etc. It will remain working as it is to be built. there are many features of this code that you must know about it before getting this code as well as you must have a view on live demo so you can easily understand what am I trying to say. Sio with out any delay just do it now.
Table of Contents
Features:
1.) Pure HTML Code.
2.) No CSS Code.
3.) Also Linkable/Clickable.
4.) HTML DOM Effect Enable.
5.) Quick To Load And Easy To Install.
6.) Two Images Will Be Used.
7.) Chnage Image On Mouse Over.
8.) Will Be Back After Mouse Out.
9.) Short Code.
10.) Can Be Used Anywehere.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<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>
Customization:
1.) Change The TARGET URL GOES HERE With Your Desired URL.
2.) Change The URL OF FIRST IMAGE GOES HERE With Your Main Image That Will Be Visible Before And After The Hover.
3.) Change The URL OF SECOND IMAGE GOES HERE That Will Be Only Visible On Hover.
4.) You Can Add This Code Also In BlogPost etc.
5.) Save And Done.
nice your site thanks for sharing love you all teme good work keep it up
Hacking Softwares
You Are Welcome Here, Thanks For Liking, Be-With Us To Get More…
This will really help me to improve the special effects on my site. Thanks for the informative post. I’ll implement it soon.
Thanks For Visiting Us Again And Checking Out Our Tip, Yes It Can Also Bring A Change To Your Site/Blog. Must Give A Try Atleast…