<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
.div_style_hidden{
width:200px; 
height:270px; 
z-index:111;
BORDER-TOP: #6600FF 2px solid;
BORDER-BOTTOM: #6600FF 2px solid;
BORDER-LEFT: #6600FF 2px solid;
BORDER-RIGHT: #6600FF 2px solid;
}
</style>
<!-- 以下代码放到head间-->
<SCRIPT>
function mouseover(obj) //鼠标
{
document.all.div_style.style.visibility = 'visible';
document.all.div_pic.src = 'aa.jpg'; //要显示的图片
flash();
}
function mouseout(obj) //鼠标移出事件
{
document.all.div_style.style.visibility = 'hidden';
}
var light    = 0; //亮度
var time_out = null;
function flash() //渐变效果
{
light += 10;
if (light == 100) {
clearTimeout(time_out);
light = 0;
return;
}
document.all.div_pic.filters.alpha.opacity = 0 + light; //改变图片样式
time_out = setTimeout("flash()",100); //在此修改渐变时间
}
</SCRIPT>
<div id="div_style" class='div_style_hidden' style='position:absolute;left:450px;top:0px;visibility:hidden;'> 
<table width="100%" height="106%" border="3" cellspacing="0" cellpadding="0">
<tr>
<td width="60%"  align='center'><img src='' id='div_pic' style="filter:alpha(opacity=0)"></td>
</tr>
</table>
</div>
<!-- 以上代码放到head间 --></head><body>
<!-- 以下实例代码参照写就行 -->
<input id='aaa' type='button' value='sljfsldfjsd' onmouseover='mouseover(this)' onmouseout='mouseout(this)' style='cursor:hand'>
</body>
</html>