[HTML9] Top Menu

 

[HTML5] Ads(SP-UP-LNK-728x15)

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.

68 comments :

Post a Comment

Your remarks here!

[HTML4]Ads(SP-M-BOX-468x60)

 

[HTML3]YouMayLike-LinkWithin