提供一个toolTips效果

Posted on Thursday, May 31, 2007 · 10 Comments 

今天给blog加了一个toolTips的样式，也就是改变了默认的title样式，程序写得比较通用，也很简单，只要你页面中的链接title不为空的，样式全都给你换了，效果可以参看本blog，比如 最新评论 那块。

javascript代码如下：

  1. <!--评论tooltips功能-->
  2. <script type="text/javascript" language="javascript">
  3. toolTip = document.createElement("DIV");
  4. toolTip.id = "toolTip";
  5. tip_top = document.createElement("DIV");
  6. tip_top.id = "tip_top";
  7. tip_middle = document.createElement("DIV");
  8. tip_middle.id = "tip_middle";
  9. tip_bottom = document.createElement("DIV");
  10. tip_bottom.id = "tip_bottom";
  11. toolTip.appendChild(tip_top);
  12. toolTip.appendChild(tip_middle);
  13. toolTip.appendChild(tip_bottom);
  14.  
  15. title_content = "";
  16. cStyle = toolTip.style;
  17. cStyle.position = "absolute";
  18.  
  19. document.getElementById("container").appendChild(toolTip);
  20.  
  21. function showTooltips(evt)
  22. {
  23. evt = window.event?window.event:evt;
  24. srcElem = evt.srcElement?evt.srcElement:evt.target;
  25. if(srcElem.tagName.toUpperCase()=="A" && srcElem.title!=""){
  26.    window.title_content = srcElem.title;
  27.    srcElem.title = "";
  28.    tip_middle.innerHTML = window.title_content;
  29.    pos = findPosition(srcElem);
  30.    x=pos[0];y=pos[1];
  31.    cStyle.left = x+"px";
  32.    cStyle.top = y+25+"px";
  33.    cStyle.display = "block";
  34. }
  35.         }
  36.  
  37. function findPosition( oLink ) {
  38.   if( oLink.offsetParent ) {
  39.     for( var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent ) {
  40.       posX += oLink.offsetLeft;
  41.       posY += oLink.offsetTop;
  42.     }
  43.     return [ posX, posY ];
  44.   } else {
  45.     return [ oLink.x, oLink.y ];
  46.   }
  47. }
  48.  
  49. function hideTooltips(evt)
  50. {
  51. evt = window.event?window.event:evt;
  52. srcElem = evt.srcElement?evt.srcElement:evt.target;
  53. srcElem.title= window.title_content;
  54. window.title_content = "";
  55. cStyle.display = "none";
  56. }
  57. document.onmouseover = showTooltips;
  58. document.onmouseout = hideTooltips;
  59. </script>
  60. <!--评论tooltips功能-->

css代码如下：

  1. #toolTip{width:205px;}
  2. #toolTip{display:none;}
  3. #toolTip{position:absolute;color:#333;}   
  4. #tip_top{background:url(images/tip_top.gif) no-repeat top center;height:20px;}
  5. #tip_middle{background:url(images/tip_middle.gif) repeat-y center;padding:0 10px;}
  6. #tip_bottom{background:url(images/tip_bottom.gif) no-repeat top center;height:20px;}

本toolTips效果中共包含了三张图片，分别是


不过本程序可能也会有bug，因为我在绑定事件handler的时候没有考虑那么那么多的兼容性，直接用事件属性绑定的，大家要是觉得不完美，就多加几个判断吧。

Categories: Javascript · Tags: , ,

Comments
10 Responses to “提供一个toolTips效果”
  1. myeos says:
    May 31, 2007 at 4:49 pm

    有的tip显示不完全,请检查下

  2. Andrew says:
    May 31, 2007 at 4:50 pm

    @myeos
    那是可能是由于你没有加载css样式导致的

  3. myeos says:
    May 31, 2007 at 5:09 pm

    报错:
    document.getElementById(“container”).appendChild(toolTip);
    为空或不是对象

    是这样使用的
    test tip

  4. 盛传 says:
    May 31, 2007 at 7:49 pm

    背景图片加载有延时

  5. 娃娃爱天下 says:
    June 1, 2007 at 10:10 am

    都看不懂你写的东东，技术含量太高了挖

  6. zerodaily says:
    June 1, 2007 at 12:20 pm

    收下，慢慢研究一下

  7. 冰客王子 says:
    June 2, 2007 at 11:49 pm

    我也使用以下

  8. Andrew says:
    June 4, 2007 at 11:40 pm

    @myeos
    那是因为你的DOM里面没有container这个容器

  9. tooltips says:
    October 16, 2007 at 7:56 pm

    我觉得站长兄应该把代码全部公开.html部分的调用也很重要啊.

  10. killjin says:
    December 5, 2007 at 12:02 am

    是么。。。嚒嚜

Leave A Comment

Bad Behavior has blocked 951 access attempts in the last 7 days.