Advanced Search

Image rollover () without javascript

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.
  2.  
  3. We need to wrap the image in a <span> element with the following styles:
  4.    display: block;
  5.    width: "same as visible area of each state (normal or hover) of the image";
  6.    height: "same as visible area of each state of the image";
  7.    overflow: hidden;
  8.    position: relative; // IE needs it
  9.  
  10. The <img> element is wrapped by an <a> element. We need the following styles to the a:hover:
  11.    position: relative;
  12.    top:  "negative position same as height of the image visible area"
  13.  
  14. HTML code:
  15.    <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>
  16.  
  17. CSS code:
  18.    span.img-rollover{
  19.    width: 20px; 
  20.    height: 20px; 
  21.    display: block; 
  22.    overflow: hidden; 
  23.    position: relative;
  24.    }
  25.    span.img-rollover a:hover{
  26.    top: -20px; 
  27.    position: relative;
  28.    }
  29.  
  30. Demo at http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.