Thursday, October 29, 2009

How to make a Rollover / Mouse Over image link

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 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 a rollover image is quick and easy heres the steps :

This is the code we use to make the image.

<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>

You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked.

In the above code change the following:

1.TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.
Example : http://www.spiceyupourblog.com

2.URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here this is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3.URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there, this is the image that appears when your cursor hovers over it.
Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png


We Are Nearly Finished - If you need more help or have an opinion or suggestion Please leave a comment Below.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.


Once the changes are made your done you can place the image in your blog posts/sidebar or anywhere html can be used.

Another Cool Effect For Your Images Is The Opacity Blurred Hover Effect Check It out.

Thats it a nice easy trick that can be used in so many ways, Do you like it ?




Jump To Comments

Subscribe To The Rss Feed Or Recieve The Latest Posts By Email

Get The Latest Full Posts By Email - It's Free
Write About Or Link To This Post On Your Blog - Easy Links :
Link Directly To This Post :

Link To The Homepage :
Hey ! People That Read This Post Also Loved These Posts
Still Looking For Something ?
Search This Blog
Custom Search
Comments : We are using Discus comments so you have more options when commenting.
If your asking a question or looking for extra help make sure to subscribe to comments by Mail and you will be notified when i reply.
blog comments powered by Disqus
 

Recommended Money Makers

1. Info Barrel Paid To Write, if you can write a blog you can write for I.B.

1. Xomba Paid To Write, Another great paid to write articles website

3. Chitika Ads For Your Blog, work well alongside AdSense

4. Aw Surveys Paid Surveys, Get paid to take surveys and referr new members.

Thanks For Calling

free counters

Admin Options : Home | Layout

Random Post List From The Archive

Who Writes This Stuff ?

Hi Im Paul Crowe,

I have an insane interest in how things work.I've been a Blogger for a long time but after an almost 2 year break i've come back with Spice Up Your Blog.

Working on Blogger design, Widgets, Gadgets and all things to do with improving the Blogger experience.Throw in some Writing and Promotion methods and we have our selves a Blog !

You cant keep a good man down..

View My Full About Me Page

Latest From Info Barrel

Want To Join In ?

Write A Guest Post On Spice Up Your Blog !
It's Easy Just Click Here For Details

Blog Archive