![[Valid Atom 1.0]](http://lh6.ggpht.com/_jBvkQPEhOmc/S9hrJQkUUAI/AAAAAAAABPk/-TgraFCmW9I/s800/valid-atom.png "Validate my Atom 1.0 feed")
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.
19 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???
Post a Comment
Please give your comment!