首页 > 技术文章 > 漂亮的链接悬停提示效果

zhaozzm 2015-04-17 10:24 原文

<html>
    <head>
    <title>漂亮的链接悬停提示效果丨影院座椅|天津kiddy</title>
    <style type="text/css">
    body{  font-size:9pt; color:#333333; line-height:140%;}
    #dhtmltooltip{
    position: absolute;
    width: 150px;
    border: 2px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }
    </style>
    </head>
    <body>
    <div id="dhtmltooltip"></div>
    <p align="center">
    <script type="text/javascript">
    /***********************************************
    * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }
    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetxpoint+"px"
    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight)
    tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    else
    tipobj.style.top=curY+offsetypoint+"px"
    tipobj.style.visibility="visible"
    }
    }
    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }
    document.onmousemove=positiontip
    </script>
    </p>
    <div align="center">
    <table border="1" width="500" height="35" cellspacing="5" cellpadding="2" bgcolor="#F7F7F7" style="border-collapse: collapse" bordercolor="#C0C0C0">
    <tr>
    <td>
    <p align="center">
    <a onMouseover="ddrivetip('网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力','#e3f1b1', 200)" ; onMouseout="hideddrivetip()" target="_blank" href="http://www.langqiaohome.com/">
    #</a>
    <a onMouseover="ddrivetip('友情链接交换平台,免费发布友情链接交换交易信息。', '#cccccc', 105)" ; onMouseout="hideddrivetip()" target="_blank" href="http://www.shuaikangyiye.com/">#</a>
    <a onMouseover="ddrivetip('珊珊影视在线,最新的电影站在线观看,最全的电影站。', '#e0eff5', 250)" ; onMouseout="hideddrivetip()" target="_blank" href="http://www.tssljc.com">#</a></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

 

推荐阅读