[HTML9] Top Menu

 

Search

Creat simple image rollover - HTML code

Here is simple image rollover code, no JavaScript and complex coding. Only small copy and paste CCS code which can be used anywhere on webpage or blogs.

What is image rollover?
“Rollover Image” is image that can change when mouse is over them. I attract the viewer attention.

How image rollover work?
Rollover image are made up of two images. One appear without mouse over and another after mouse over at same place (normally of same width and height). It gives rollover or changing effect in image.
Hence for creating rollover always two image is required image-1(IMG-1) and image-2(IMG-2).

Example: Take the mouse over on below image.



Code-1 : CCS with HTML


<!-- image rollover code by http://saypoint.blogspot.com -->
<style type="text/css">
.rollover a {     display : block;
                     width : **px;
                     height : **px;
                     background-image:url( IMG-1 ); }

.rollover a:hover { display : block;
                      width : **px;
                      height : **px;
                      background-image:url( IMG-2 ); }
</style>

<div class="rollover" > <a href="#"></a> </div>

Note:   
1.    Copy and paste the code where you want image rollover to appear.
2.    Put exact width and height of image in the place of “ ** ”.
3.    Upload both the image on any photo FTP server or use Picasa Web Albums of Google and get its image links.
How to use Picasa Web Albums as photo FTP:  Read more >>

4.    Put the image link URL (address) in place of IMG-1 and IMG-2 respectively in code.
5.    Put URL of the link page in place of " # ", where to go after click of image. (leave as it is if not required)


Code-2 : HTML only

<!-- image rollover code by http://saypoint.blogspot.com -->
<a href="#" ><img src=" URL_IMG-1 " onmouseover="this.src=' URL_IMG-2 '" onmouseout="this.src=' URL_IMG-1 '"  /></a>

Note:   
1.    Copy and paste the code where you want image rollover to appear.
2.    Upload both the image on any photo FTP server or use Picasa Web Albums of Google and get its image links.
How to use Picasa Web Albums as photo FTP:  Read more >>
3.    Put the image link URL (address) in place of URL_IMG-1 and URL_IMG-2 respectively in code.
4.    Put URL of the link page in place of " # ", where to go after click of image. (leave as it is if not required)
5.    URL_IMG-1 used twice where as URL_IMG-2 used once.

61 comments :

Anonymous said...

Thanx for code, used and working fine..

Wenogk said...

thanx 4 the code it works perfectly!

Anonymous said...

Thanks for the code! As said earlier - it works perfectly!
I plan to use it on Craiglist, where I cannot use Javascript,
to show before and after images.

Mark B said...

Update:
After creating my advertisement for Craigslist, I posted it, only to find the rollovers did not work. I was stunned, because they worked great in Dreamweaver. I used complete URL's on the image requests.

Craigslist automatically places rel=nofollow tags to any links included in your ads. Would this affect the rollovers? Is there a work around? Craigslist strips out all CSS & JavaScript and even some HTML coding, so I was really excited to find your method of creating rollovers.

Ebonix said...

The HTML version of this code WILL NOT take you to your link when ever you click on it. The roll over effect works perfectly, but when you click on the rollover image it simply loads a blank page? I havn't altered the code and I know the URL or '#' in this case are infact correct. If you can get it working please email me at edictionent@gmail.com I REALLY need this code to work... thanks

storage devices said...

This code is awesome. Currently I work for Dell and thought your post is really impressive, We will surely implement this code to create image rollover. Thanks fo sharing with us.

Unknown said...

Hey, thanks! This worked great... for awhile. It worked when i put the image in a post, but when i tried to make roll-over social media icons and put them on my (Blogger) sidebar, the pictures disappeared, leaving a "missing image" icon in its place that didn't disappear when i moved the mouse away. Can you help? :(

Emma said...

Hi,
It rollover, but 2nd image means, mouse hover don't show in the css code and html code...I want to use css...how to fix this ?

Tomas Arana said...

it doesn't work for me. Im typing it as it is, even tried a few alts, but nothing. I dont even know why I'm using raw HTML, its been years... and I remember this used to work, it just doesn't anymore. Oh well. guess I will have to use TOOLS again.

Tania said...

THANK YOU SO MUCH!
I've spent about 3 hours trying to figure out an easy way to do this, the first thing that's worked!!!!

Anonymous said...

what if i wanna use more than 1 example on one page.... ?

Unknown said...

I'm looking for some simple HTML that will allow a word rollover. Move your mouse over a word and presto: an image of your choosing and size appears!

Help me: aubejay@yahoo.com

Anonymous said...

Nice code but i need to open in new tab in clicking the image

Unknown said...

Only Shows First Image, But when Pointing Mouse Over Image, It Does Not Display The Second Image. Done Everything Right????

Anonymous said...

html is so hard

Anonymous said...

Great code, it works. But I have another question: How can I control where the second (large) immage appear om the side? It is the right size but it is shown in the top of my page instead of the middle?

Anonymous said...

Its me again :) How to get the second (large) image in the front of the page? Thank you so much :)

Michelle said...

Thank-you, works great, your post was so much easier to understand & use than other ones I tried.

Anonymous said...

your code is great
but the above code for css we have an option to give the size of the block but in HTMLl code we dont have this option what to do if i want to display image in the same size???

Francisco said...

Thanks, this code worked for one of my Magneto Commerce stores. It was easy tom implement. I tried other codes, but they didn't work. Your rolling images worked like a charm.

Anonymous said...

This is FANTASTIC. I dropped several of these into a table so I could line them up into a horizontal navbar. So clean and simple to use. THANK YOU!

Anonymous said...

Works great!
But how would you insert more than 1 rollover image?
I've tried using div tags but its duplicates the first rollover?

Anonymous said...

Just found your page while searching for a simple 'mouse-over'...thanks...looking forward to using it on my blog for my next altered photography posting.

Jordan said...

I. LOVE. YOU!!!!

Unknown said...

(Y) thanks!!

Anonymous said...

ur code sucks!

Anonymous said...

Thanks however the html didnt work only the CSS

Anonymous said...

Code is simple and easy...Thanks!

sian said...

thank you, this was great

Unknown said...

It works on my godaddy V7 site! BUT I get duplicates of my image...instead of just one image and one rollover, i have 6 of each in a tile. How do I show only ONE of each?

Anonymous said...

THANK YOU! just what I was looking for....

Anonymous said...

Porn is the way

Anonymous said...

Thanks for the code. It works..

mcw said...

thankyou so much - I knew there had to be a simple way!

I'm using the HTML only version - out of interest is there a way I can dictate size of both images independently?

Anonymous said...

Thanks for the code..

Tony said...

Excellent! Now using the html code on my homepage 'Music Menu'. No problems. Have to be a bit careful with the inverted commas here and there, that's all! Infinite thanks!

Anonymous said...

Hello, and thank you very much for these tips.
It got me out of a hole!
- Susan

Nitin Maheta said...

Hello,

Thanks for the great tutorial, its really helpful.

Preparing for Peanut said...

This was awesome! My side bar looks fabulous. Thank you!

Anonymous said...

Just a question, Instead of IMG 1, how do I instead have it be text?

Anonymous said...

mo shop luu niem |
kinh nghiem mua iphone |
chua viem dai trang |

Anonymous said...

this doest work at all

Anonymous said...

Code 1 doesn't work for me in wordpress, Code 2 does work. most all the other CSS with html examples i've seen dealing with wordpress sites say you have to add CSS to the theme's CSS file. which i've tried with no luck. but thank you for the Code 2!

Creator's Touch said...

although it was fun to try it out, i was not able to get it to work in my side column widget for html, and help would be great???

Anonymous said...

Great code - worked and saved some hassles - QUESTION.... on firefox it looks great and on IE it has blue lines around the images. Thoughts?

Ron

Unknown said...

hi again.... i got rid of the blue outlines (which were related to links) in IE BUT... now the images have no links. HELP? (very much appreciated)

Anonymous said...

Thanks for both and HTML also works well

Anonymous said...

meme?

Anonymous said...

Code 2 with height and width pls..

Anonymous said...

I want to use several different images on one page with rollovers. What should the CSS be for this?

Unknown said...

Programming is combination of intelligent and creative work. Programmers can do anything with code. The entire Programming tutorials that you mention here on this blog are awesome. Beginners Heap also provides latest tutorials of Programming from beginning to advance level. Be with us to learn programming in new and creative way.

http://forseoblogger.blogspot.com/2016/07/high-pr-image-sharing-sites-list.html said...

this is very nice blog

Unknown said...
This comment has been removed by the author.
Unknown said...

Thanks. Use this to make a rollover image effect here.

Nurul Hikmah S. said...

Thankyou so much. It works :D

Unknown said...

“I” is really the most important word in your question. The answer really depends on how you learn – and it will be different for every other person who asks this question. If you are self-driven and able to chart your own course through Free Code Camp or codecademy and get value from that, that’s a good approach for you. If for some reason you can’t learn effectively from free resources (maybe you feel lost without a clear curriculum set out for you), but for some reason you can learn effectively from Udacity (maybe you love their style of video lectures), then that’s what you should pay for.

web designing training in chennai

Chuckster said...

They both worked great in FireFox, but neither will work in IE... Any thoughts???

Unknown said...

i got more ideas about responsive design. i am also doing and creating evergreen responsive which is take more quality your things are made some idea. keep share more about technical article.
Australia Education Consultants in Chennai

Unknown said...

thanks

Anonymous said...


SQream Technologies provides you with a state of the art software which combines modern GPU

technology (Graphic Processing Units) with the best practices in today’s Big Data platforms,

providing up to 100x faster insights from data.
python course

SQream Technologies provides you with a state of the art software which combines modern GPU

technology (Graphic Processing Units) with the best practices in today’s Big Data platforms,

providing up to 100x faster insights from data.
python course

Ali jan said...

This group has no choice but to help. They rely on low crime rates to attract great companies to the area to promote economic growth. Not only will they be all for your program, they may even use the existence of the program to promote their own recruitment of companies to the area. AWS online course

Post a Comment

Your remarks here!