10
今天给blog加了一个toolTips的样式，也就是改变了默认的title样式，程序写得比较通用，也很简单，只要你页面中的链接title不为空的，样式全都给你换了，效果可以参看本blog，比如 最新评论 那块。
javascript代码如下：
- <!--评论tooltips功能-->
- <script type="text/javascript" language="javascript">
- toolTip = document.createElement("DIV");
- toolTip.id = "toolTip";
- tip_top = document.createElement("DIV");
- tip_top.id = "tip_top";
- tip_middle = document.createElement("DIV");
- tip_middle.id = "tip_middle";
- tip_bottom = document.createElement("DIV");
- tip_bottom.id = "tip_bottom";
- toolTip.appendChild(tip_top);
- toolTip.appendChild(tip_middle);
- toolTip.appendChild(tip_bottom);
- title_content = "";
- cStyle = toolTip.style;
- cStyle.position = "absolute";
- document.getElementById("container").appendChild(toolTip);
- function showTooltips(evt)
- {
- evt = window.event?window.event:evt;
- srcElem = evt.srcElement?evt.srcElement:evt.target;
- if(srcElem.tagName.toUpperCase()=="A" && srcElem.title!=""){
- window.title_content = srcElem.title;
- srcElem.title = "";
- tip_middle.innerHTML = window.title_content;
- pos = findPosition(srcElem);
- x=pos[0];y=pos[1];
- cStyle.left = x+"px";
- cStyle.top = y+25+"px";
- cStyle.display = "block";
- }
- }
- function findPosition( oLink ) {
- if( oLink.offsetParent ) {
- for( var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent ) {
- posX += oLink.offsetLeft;
- posY += oLink.offsetTop;
- }
- return [ posX, posY ];
- } else {
- return [ oLink.x, oLink.y ];
- }
- }
- function hideTooltips(evt)
- {
- evt = window.event?window.event:evt;
- srcElem = evt.srcElement?evt.srcElement:evt.target;
- srcElem.title= window.title_content;
- window.title_content = "";
- cStyle.display = "none";
- }
- document.onmouseover = showTooltips;
- document.onmouseout = hideTooltips;
- </script>
- <!--评论tooltips功能-->
css代码如下：
- #toolTip{width:205px;}
- #toolTip{display:none;}
- #toolTip{position:absolute;color:#333;}
- #tip_top{background:url(images/tip_top.gif) no-repeat top center;height:20px;}
- #tip_middle{background:url(images/tip_middle.gif) repeat-y center;padding:0 10px;}
- #tip_bottom{background:url(images/tip_bottom.gif) no-repeat top center;height:20px;}
本toolTips效果中共包含了三张图片，分别是
不过本程序可能也会有bug，因为我在绑定事件handler的时候没有考虑那么那么多的兼容性，直接用事件属性绑定的，大家要是觉得不完美，就多加几个判断吧。
