Today we will let you know how to enable rollover image effect in your blog means when you hover on an image it will change into another image. You might have seen in some websites or in blogs that whenever you bring your mouse cursor on an image, it changes to another image and if you click on that image it sometimes leads you to a particular website. If you too want this rollover image effect for your blog then this article will surely help you. So, without wasting time, let’s start the steps of creating a rollover image effect. Below is the
example of rollover image. Move your cursor to the image and see the hovering effect.
Steps to create a rollover image effect:-
<a href="URL OF THE WEBSITE YOU WANT TO LINK WITH YOUR IMAGE"><img
src="FIRST IMAGE URL"
onmouseover="this.src='SECOND IMAGE URL'"
onmouseout="this.src=’FIRST IMAGE URL'"
/></a>
The above code is the code which we use for the rollover
image effect but it is a raw code means you have to do some changes for its
proper working.
1.) First of all, replace “URL OF
THE WEBSITE YOU WANT TO LINK WITH YOUR IMAGE” from the above code with the url to which you want to redirect the
users. For example, if you want to connect the image with the url of your blog
then replace the above line with your blog url. Example:- www.your-blog-name.blogspot.in (in my
case, i will write www.best1articles.blogspot.in
).
2.) Now type the url of the image in place of “FIRST IMAGE URL”. Note that this url will be the url
of the image which you want to show before hover over it.
Example:- https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/548796_453178611408385_736346270_n.jpg
3.) Place the url of the image in place of “SECOND IMAGE URL” . Note that this url will be the
url of the image which you want to show after you hover over it.
Example:- https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn1/23895_444714578921455_450800211_n.jpg
Now, you are done with your code and can place it anywhere
in HTML of your page or can be place in the Layout->Add a
Gadget->HTML/JavaScript . Hope, you like this article. For any problem,
comment or write us!
Credits:- Yuvraj Salaria
