js实现鼠标悬停文字上显示图片

js部分

 <script language="javascript"> 
    function showPic(e,sUrl){ 
                            var x,y; 
                            x = e.clientX; 
                            y = e.clientY; 
                            document.getElementById("Layer1").style.left = x+2+'px'; 
                            document.getElementById("Layer1").style.top = y+2+'px'; 
                            document.getElementById("Layer1").innerHTML = " + sUrl + "\">"; 
                            document.getElementById("Layer1").style.display = ""; 
                            } 
                            function hiddenPic(){ 
                            document.getElementById("Layer1").innerHTML = ""; 
                            document.getElementById("Layer1").style.display = "none"; 
                        } 
    script>

html部分:需要注意的是,用于显示图片的DIV需要放在body第一子节点,不然会出现定位错误

<body>
    <div id="box" class="col-md-4 col-md-offset-4">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="text-info" colspan="4">
                        天涯书城书目
                    th>
                tr>
                <tr>
                    <th>书名th>
                    <th>作者th>
                    <th>售价th>
                    <th>书类th>
                tr>
            thead>
            <tbody>
                <tr onmouseout="hiddenPic()" onmousemove="showPic('img/0.png')">
                    <td>
                        新华字典
                    td>
                    <td>
                        新华出版社
                    td>
                    <td>
                        32.5
                    td>
                    <td>
                        工具书
                    td>
                tr>
            tbody>
        table>
    div>
    <div id="Layer1" style="display:none;position:absolute;z-index:1;">div>
body>

以上就是全部代码。

转载自:http://www.cnblogs.com/s021368/articles/1738372.html

你可能感兴趣的:(JavaScript)