Overlay an Image on Rollover

This can be seen in action on aptana.tv:

Before:

Image:rollover_before.png

Hover:

Image:rollover_after.png

The HTML

<a href="file.html" target="_blank">
   <img alt="" src="images/overlay.png" class="overlay"/>
   <img src="images/thumnail.png" alt="View Video" class="thumbnail"/>
</a>

The CSS

<style type="text/css">

.overlay {
   display:none;
   padding:0;
   border: 1px solid #333333;
   margin:0;
   position:absolute;
   height:150px;
   width:150px;
   z-index:2;
}

.thumbnail{
   position:relative;
   left:1px;
   z-index:0;
   height:150px;
   width:150px;
   border: 1px solid #333333;
}

.thumbnail:hover, .thumbnail.over{
   border: 1px solid #333333;
}

</style>

The JavaScript

<script language="JavaScript" type="text/javascript">
       var isIE = (navigator.appVersion.toLowerCase().indexOf('msie 6.0') != -1);
       
       function onmouseoverHover(element){
           if(isIE){
               element.getElementsByTagName('a')[0].getElementsByTagName('span')[0].style.display = "inline";
           }else{
               element.getElementsByTagName('a')[0].getElementsByTagName('img')[0].style.display = "inline";
           }            
       }

       function onmouseoutHover(element){
           if(isIE){
               element.getElementsByTagName('a')[0].getElementsByTagName('span')[0].style.display = "none";
           }else{
               element.getElementsByTagName('a')[0].getElementsByTagName('img')[0].style.display = "none";
           }
       }
</script>