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 :
Thanx for code, used and working fine..
thanx 4 the code it works perfectly!
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.
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.
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
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.
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? :(
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 ?
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.
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!!!!
what if i wanna use more than 1 example on one page.... ?
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
Nice code but i need to open in new tab in clicking the image
Only Shows First Image, But when Pointing Mouse Over Image, It Does Not Display The Second Image. Done Everything Right????
html is so hard
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?
Its me again :) How to get the second (large) image in the front of the page? Thank you so much :)
Thank-you, works great, your post was so much easier to understand & use than other ones I tried.
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???
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.
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!
Works great!
But how would you insert more than 1 rollover image?
I've tried using div tags but its duplicates the first rollover?
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.
I. LOVE. YOU!!!!
(Y) thanks!!
ur code sucks!
Thanks however the html didnt work only the CSS
Code is simple and easy...Thanks!
thank you, this was great
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?
THANK YOU! just what I was looking for....
Porn is the way
Thanks for the code. It works..
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?
Thanks for the code..
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!
Hello, and thank you very much for these tips.
It got me out of a hole!
- Susan
Hello,
Thanks for the great tutorial, its really helpful.
This was awesome! My side bar looks fabulous. Thank you!
Just a question, Instead of IMG 1, how do I instead have it be text?
mo shop luu niem |
kinh nghiem mua iphone |
chua viem dai trang |
this doest work at all
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!
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???
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
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)
Thanks for both and HTML also works well
meme?
Code 2 with height and width pls..
I want to use several different images on one page with rollovers. What should the CSS be for this?
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.
this is very nice blog
Thanks. Use this to make a rollover image effect here.
Thankyou so much. It works :D
“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
They both worked great in FireFox, but neither will work in IE... Any thoughts???
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
thanks
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
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!