更改标签title样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
.tool { filter:alpha(opacity=90) shadow(color=#bbbbbb,direction=150); }
.header1 { font-weight:bold; padding:2px 6px 2px 6px; font-size:12px; background-color:#0066FF; color:#FFFFFF; text-align:left; }
.msg1 { font-size:11px; padding:2px 8px 4px 8px; background-color:#FFFFCC; text-align:left; }
.header2 { font-weight:bold; padding:2px 6px 2px 6px; font-size:12px; background-color:#0066FF; color:#FFFFFF; text-align:right; }
.msg2 { font-size:11px; padding:2px 8px 4px 8px; background-color:#FFFFCC; text-align:right; }
</style><script type="text/javascript">
var pltsPop = null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
var pltsPopbg = "#ffff00";
var pltsPopfg = "#111111";
var pltsTitle = "";document.write('<div id=titleDiv1 style="display: none; position: absolute; z-index:10001"></div>');
var titleDiv;function pltsinits()
{
    document.onmouseover = plts;
    document.onmousemove = moveToMouseLoc;
}
function plts(e)
{
    var o = null;//firefox不支持
if(!document.all) o = e.target;
else o = event.srcElement;
if(!o) return;
    if(o.alt!=null && o.alt!=""){ o.dypop=o.alt;o.alt=""; };
    if(o.title!=null && o.title!=""){ o.dypop=o.title;o.title=""; };
    pltsPop = o.dypop;
    if(pltsPop&&typeof(pltsPop)!="undefined")
    {
titleDiv = document.getElementById('titleDiv1');
titleDiv.style.display = '';
        titleDiv.style.left = '-1000px';

        var Msg = pltsPop.replace(/\n/g,"<br>");
        Msg = Msg.replace(/\0x13/g,"<br>");
        var re = /\{(.[^\{]*)\}/ig;
        if(!re.test(Msg)) pltsTitle = "[wikimetro.org]";
        else
        {
            re = /\{(.[^\{]*)\}(.*)/ig;
            pltsTitle = Msg.replace(re,"$1") + " ";
            re = /\{(.[^\{]*)\}/ig;
            Msg = Msg.replace(re,"");
            Msg = Msg.replace("<br>","");
        } //↖↗↘↙ content = "<table id=toolTipTalbe1 class=tool><tr><td><table cellspacing='0' cellpadding='0' width='200'>"
+ "<tr id=trTop1><td id=tdTop1>"+pltsTitle+"</td></tr>"
+ "<tr><td id=msg1>"+Msg+"</td></tr>"
+ "<tr id=trBot1 style='display:none'><td id=tdBot1>"+pltsTitle+"</td></tr>"
+ "</table></td></tr></table>";

        titleDiv.innerHTML = content;
        document.getElementById('toolTipTalbe1').style.width = Math.min(titleDiv.clientWidth,document.body.clientWidth/2.2);
        moveToMouseLoc(e);
    }
else
{
titleDiv = document.getElementById('titleDiv1');
titleDiv.innerHTML = "";
titleDiv.style.display = "none";
titleDiv = null;
}
return true;
}function moveToMouseLoc(e)
{
    if(!titleDiv)return true;
var trTop = document.getElementById('trTop1');
var trBot = document.getElementById('trBot1');
var tdTop = document.getElementById('tdTop1');
var tdBot = document.getElementById('tdBot1');
var msg = document.getElementById('msg1');    var MouseX = (document.all) ? event.x : e.pageX;
    var MouseY = (document.all) ? event.y : e.pageY;
    var popHeight = titleDiv.clientHeight;
    var popWidth = titleDiv.clientWidth;
    if(MouseY+pltsoffsetY+popHeight > document.body.clientHeight)
    {
        popTopAdjust = -popHeight-pltsoffsetY*1.5;
        trTop.style.display = "none";
        trBot.style.display = "";
    }
    else
    {
        popTopAdjust = 0;
        trTop.style.display = "";
        trBot.style.display = "none";
    }
    if(MouseX+pltsoffsetX+popWidth > document.body.clientWidth)
    {
        popLeftAdjust = -popWidth-pltsoffsetX*2;
        tdTop.className = "header2";
        tdBot.className = "header2";
msg.className = "msg2";
    }
    else
    {
        popLeftAdjust = 0;
        tdTop.className = "header1";
        tdBot.className = "header1";
msg.className = "msg1";
    }
    titleDiv.style.left = MouseX + pltsoffsetX + document.body.scrollLeft + popLeftAdjust +"px";
    titleDiv.style.top = MouseY + pltsoffsetY + document.body.scrollTop + popTopAdjust +"px";
    return true;
}
pltsinits();
</script>
</head><body><span title="kuai kan">kuai kan</span>
<p><a href='#' title="asjkl jask dfjasjdkf asdf">asdf</a></p>
<p><a href="#" title="title de nei tong">title content</a></p>
</body>
</html>
主要就是重写onmouseover事件
我BLOG上有
shoushi.blogcn.com
http://www.shineblog.com/user6/stayhere/archives/2007/823895.shtml

调试易

更改标签title样式

解决方案 »