当前位置:编程文档 >> JSP >> js实现页面鼠标提示效果
首页

js实现页面鼠标提示效果

所属类别:JSP
推荐指数:★★☆
文档人气:9
本周人气:3
发布日期:2008-7-3
    本来是要用ajax技术实现的页面提示,就是把鼠标放图片上,就显示相关的提示信息。因为要动态地显示与图片相关的提示信息,所以需要用ajax实现异步提取数据库中的信息。
   但是如果你需要显示的是静态的图片相关信息,那就不需要用到ajax了,只用js就可以了,下面就是一个示例代码:

<script language=\"javascript\">...
var datatablebody;
var datadiv;
var curelement;
function getdetail()...{
    datatablebody = document.getElementById(\"databody\");
    datadiv = document.getElementById(\"popup\");
    setdata();      //设置要显示的数据
    }
    
function setdata(data)...{
    cleardata();
    setoffsets();
    var content = \"你要显示的提示信息\";
    var row = createrow(content);       //创建一个tr
    datatablebody.appendChild(row);   //将创建的tr放入table中
    }
    
function createrow(data)...{
    var row,cell,txtnode;
    row = document.createElement(\"tr\");     //动态生成一个tr
    cell = document.createElement(\"td\");    //动态生成一个td
    cell.setAttribute(\"bgcolor\",\"#fffafa\");       //设置背景颜色
    cell.setAttribute(\"border\",\"0\");                //设置边框大小
    txtnode = document.createTextNode(data);   //创建一个文本节点
    cell.appendChild(txtnode);                   //将文本节点放入单元格cell
    row.appendChild(cell);                         //将单元格cell放入生成的tr中
    return row;
    }
    
function setoffsets()...{
    datadiv.style.border = \"black 1px solid\";
    var top =0;
    while(curelement)...{
        top += curelement[\"offsettop\"]; [Page]
        curelement = curelement.offsetparent;
    }
    datadiv.style.left = 50 + \"px\";         //设置要显示提示框的左端位置
    datadiv.style.top = top + \"px\";        //设置顶部位置
    }

function cleardata()...{                   //鼠标移开时,清除动态生成的tr
    var ind = datatablebody.childNodes.length;
    for(var i = ind-1;i>=0;i--)...{
        datatablebody.removeChild(datatablebody.childNodes[i]);
    }
    datadiv.style.border = \"none\";
}
</script>

<img src=\"eclipse.ico\" onmouseover=\"getdetail();\"  onmouseout=\"cleardata();\"/>

<div style=\"position:absolute;\" id=\"popup\">
<table bgcolor=\"#fffafa\" border=\"0\" cellpadding=\"2\" cellspacing=\"2\">
<tbody id=\"databody\">
</tbody>
</div>

文档说明:

     

相关文档


读取评论列表……