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>

