Advanced Search

Return to Snippet

Revision: 9738
at November 19, 2008 07:06 by kcmr
Initial Code 
The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.

We need to wrap the image in a <span> element with the following styles:
   display: block;
   width: "same as visible area of each state (normal or hover) of the image";
   height: "same as visible area of each state of the image";
   overflow: hidden;
   position: relative; // IE needs it

The <img> element is wrapped by an <a> element. We need the following styles to the a:hover:
   position: relative;
   top:  "negative position same as height of the image visible area"

HTML code:
   <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>

CSS code:
   span.img-rollover{
   width: 20px; 
   height: 20px; 
   display: block; 
   overflow: hidden; 
   position: relative;
   }
   span.img-rollover a:hover{
   top: -20px; 
   position: relative;
   }

Demo at http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/
Initial URL 
http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Image rollover () without javascript

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, html

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML