鼠标划过 显示图片

 1 <style type="text/css">
 2         
 3         /*table中偶数行*/ 
 4 
 5         .tabEven {
 6             background: #eee;
 7         }
 8         
 9         /*table中奇数行*/ 
10 
11         .tabOdd {
12             background: #fff;
13         }
14         .out {
15 position:absolute;z-index:1; 
16 background:#333; 
17 margin:10px auto;
18 width:100%;
19 }
20 .in {
21 background:#fff; 
22 border:3px solid #333;
23 padding:10px 5px;
24 position:absolute;z-index:1; 
25 top:-2px;
26 left:-2px;
27 }
28 
29         
30 </style>
 

javascript
 <script src="js/ShowHidPic.js" type="text/javascript" language="javascript"></script>
<script language="javascript" type="text/jscript" src ="js/jquery.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $("#tabPaiPin tr:even").addClass("tabEven");
            $("#tabPaiPin tr:odd").addClass("tabOdd");
        });
        //]]>
    </script> 
 

ShowHidPic.js用于显示，隐藏图片
// 用于显示，隐藏图片

function showPic(sUrl){ 
var x,y; 
x = event.clientX; 
y = event.clientY; 
document.getElementById("Layer1").style.left = x; 
document.getElementById("Layer1").style.top = y; 
//document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">"; 
//<div class="out"> <div class="in" > <img src="attachments/month_0606/120066278273.jpg" alt="" /> </div></div>
document.getElementById("Layer1").innerHTML = "<div class=\"out\"> <div class=\"in\" ><img src=\"" + sUrl + "\"> </div></div>"; 
document.getElementById("Layer1").style.display = "block"; 
} 
function hiddenPic(){ 
document.getElementById("Layer1").innerHTML = ""; 
document.getElementById("Layer1").style.display = "none"; 
} 

 

<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>

应用：<td><a href="#"  src="temp/01.gif"  onmouseout="hiddenPic();" onmousemove="showPic(this.src);" >gxtf091129zaxiang.001</a></td>