A better, more flexible alternative to JavaScript rollover images

[lAZLf]

I wanted everyone to know that there is a better alternative to JavaScript rollover images that uses simple CSS.

 

HTML:

<div class="rolloverdiv">
      <a href="#"  class="rolloverimg"></a>
</div>

 

the CSS:

.rolloverdiv {
      height:150px;
      width: 150px;
}

.rolloverimg {
      background: url(imgname.extension);
      width:100%;
      height:100%;
      display:block;
      cursor: pointer;
}

.rolloverimg:hover {
      background: url(secondimgname.extension);
}

 

This should be a healthier, simpler alternative to JavaScript rollover images.