# Overlay an Image on Rollover [edit]

This can be seen in action on aptana.tv:

Before:

Hover:

## 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>
Retrieved from "http://aptana.com/docs/index.php/Overlay_an_Image_on_Rollover"