咖喱碗糕`

`∧ ∧︵
ミ^ō^ミ灬)~ ~我是只可爱的狐狸```
http://freedom2130.cnblogs.com
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

很酷的TOOLTip

Posted on 2006-04-25 00:34  刹那间我存在  阅读(635)  评论(0编辑  收藏  举报

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>tip</title>
<script language="javascript">
var baseUrl="http://love.sosgoo.com"
var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src=baseUrl+"tip_top1.gif" style="display:none">') //write out pointer image

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") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtip(thecolor){
    if (ns6||ie){
        var tip='';
        if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
        var o=event.srcElement;
        if(o.tip==null && o.tip==null){
            enabletip=true
            return false}
        tip=o.tip
        tip=tip.replace(/\n/g,"<br>")// 换行符
        tipobj.innerHTML=tip.replace(/\r/g,"<br>")// 回车符
        enabletip=true
        return false
    }
}

function positiontip(e){
if(!enabletip) return false;
var nondefaultpos=false
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 winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX: winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
var s=''
s='窗口宽度='+winwidth+'\t窗口高度='+winheight+'\tevent.clientX='+event.clientX+'\tevent.x='+event.x+'\tevent.clientY='+event.clientY+'\tevent.y='+event.y
s+='\<br>DIV宽度tipobj.offsetWidth='+tipobj.offsetWidth+'\t层到最右边距离('+rightedge+')='+winwidth+'-'+event.clientX+'-'+offsetfromcursorX
msg.innerHTML=s
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
    //hidetip();
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=curX-tipobj.offsetWidth+"px"
    tipobj.filters.item('DXImageTransform.Microsoft.Shadow').Direction =225
   
    pointerobj.style.left=curX-offsetfromcursorX-offsetdivfrompointerX+"px"
    pointerobj.src=baseUrl+'tip_top2.GIF'
    //nondefaultpos=true
    //showtip();
}
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+offsetfromcursorX-offsetdivfrompointerX+"px"
    tipobj.filters.item('DXImageTransform.Microsoft.Shadow').Direction =135
    pointerobj.style.left=curX+offsetfromcursorX+"px"
    pointerobj.src=baseUrl+"tip_top1.gif"
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
    tipobj.style.top=curY-tipobj.offsetHeight-offsetdivfrompointerY-offsetfromcursorY+"px"
    //nondefaultpos=true
    pointerobj.style.top=curY-offsetdivfrompointerY-offsetfromcursorY-1+"px"
    if(rightedge>tipobj.offsetWidth)
        {pointerobj.src=baseUrl+"tip_bottom1.GIF"
        tipobj.filters.item('DXImageTransform.Microsoft.Shadow').Direction =45}
    else
        {pointerobj.src=baseUrl+"tip_bottom2.GIF"
        tipobj.filters.item('DXImageTransform.Microsoft.Shadow').Direction =315}
}
else{
    tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
    pointerobj.style.top=curY+offsetfromcursorY+"px"
}
pointerobj.style.display="block"
tipobj.style.display="block"

/*if (!nondefaultpos)
    pointerobj.style.display="block"
else
    //pointerobj.style.display="block"
    pointerobj.style.display="none"
*/
}

 

function hidetip(){
if (ns6||ie){
enabletip=false
tipobj.style.display="none"
pointerobj.style.display="none"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip
</script>
<style type="text/css">
<!--
body,table,td {
    font-family: "新宋体", "宋体";
    font-size: 12px;
}
#dhtmltooltip {white-space: nowrap;
    BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; DISPLAY: none; PADDING-LEFT: 2px; Z-INDEX: 100;
         FILTER: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=5);
         LEFT: -300px; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: lightyellow
}
#dhtmlpointer {
    DISPLAY: block; Z-INDEX: 101; LEFT: -300px; POSITION: absolute
}
.style1 {color: red}

-->
</style>
</head>

<body>
<TABLE cellSpacing=1 cellPadding=2 width="100%" border=0>
  <TBODY>
    <TR>
      <TD width="19%"><A onmouseover=showtip()
                              onmouseout=hidetip()
                              href="http://web:83/collect/Guest_ShowRes.asp?ID=29
                              target=_blank
                              tip="·发布者:yxl<br>·所属单位:问题出在,当链接出现在最右边和最下边时<br>·发布日期:<font color=red>2005-4-19</font><br>·点击次数:<font color=red>150</font><br>·下载次数:<font color=red>29</font><br>·是否新课标:否<br>·教材版本:人教版<br>·所属科目:语文<br>·资源类型:教学辅助材料<br>·资源格式:audio/MP3<br>·资源简介:<font color=red>资源上传</font>">请高手帮我看看</A></TD>
      <TD width="56%"><span class="style1">最右边和最下边都有问题</span></TD>
      <TD width="25%" align="right"><A onmouseover=showtip()
                              onmouseout=hidetip()
                              href="#"
                              target=_blank
                              tip="·发布者:yxl<br>·所属单位:问题出在,当链接出现在最右边和最下边时<br>·发布日期:<font color=red>2005-4-19</font><br>·点击次数:<font color=red>150</font><br>·下载次数:<font color=red>29</font><br>·是否新课标:否<br>·教材版本:人教版<br>·所属科目:语文<br>·资源类型:教学辅助材料<br>·资源格式:audio/MP3<br>·资源简介:<font color=red>资源上传</font>">请高手帮我看看</A></TD>
    </TR>
    <TR>
      <TD height="100">&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
    </TR>
    <TR>
      <TD height="300" colspan="3"><div id="msg"></div></TD>
    </TR>
    <TR>
      <TD width="19%" height="25">&nbsp;</TD>
      <TD width="56%" align="center">&nbsp;</TD>
      <TD width="25%" align="right"><A onmouseover=showtip()
                              onmouseout=hidetip()
                              href="#"
                              target=_blank
                              tip="·当链接在很右边的时候这个层会出现多行">鼠标移到这里看看</A></TD>
    </TR>
    <TR valign="bottom">
      <TD width="19%" height="200"><A onmouseover=showtip()
                              onmouseout=hidetip()
                              href="#"
                              target=_blank
                              tip="·这里会明闪一下。<br>层先会在下面显示一下<br>再跑到上面">鼠标移到这里看看</A></TD>
      <TD width="56%" align="center">&nbsp;</TD>
      <TD width="25%" align="right"><A onmouseover=showtip()
                              onmouseout=hidetip()
                              href="#"
                              target=_blank
                              tip="·发布者:yxl<br>·所属单位:问题出在,当链接出现在最右边和最下边时<br>·发布日期:<font color=red>2005-4-19</font><br>·点击次数:<font color=red>150</font><br>·下载次数:<font color=red>29</font><br><font color=blue>这里左右移动层会变大</font>"> 鼠标移到这里看看</A></TD>
    </TR>
  </TBODY>
</TABLE>
</body>
</html>