如何實現(xiàn)這種鼠標提示效果？_動易Cms教程

問題：如何實現(xiàn)這種鼠標提示效果？如圖所示：
風格定義：
/* --增加鼠標效應的css定義開始-- */
.header {
font-family: tahoma, verdana;
font-size: 12px;
color: #ffffff;
font-weight: normal;
background-color:#308701;
}
.selet_bg {
background-color: #ffffff;
}
.f_one {
background-color: #ffffff;
}

在模板中增加以下JS調(diào)用：

plus.js文件代碼（另存為.js文件）：

var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
var pltsPopbg="#ffff00";
var pltsPopfg="#111111";
var pltsTitle="";
document.write(’〈div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"〉〈/div〉’);
function pltsinits()
{
document.onmouseover = plts;
document.onmousemove = moveToMouseLoc;
}
function plts()
{ var o=event.srcElement;
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!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display=’’;
var Msg=pltsPop.replace(/\n/g,"〈br〉");
Msg=Msg.replace(/\0x13/g,"〈br〉");
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))pltsTitle="[www.qq029.cn] 古城大學生網(wǎng)";
else{
re=/\{(.[^\{]*)\}(.*)/ig;
pltsTitle=Msg.replace(re,"$1") " ";
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("〈br〉","");}
var attr=(document.location.toString().toLowerCase().indexOf("list.asp")〉0?"nowrap":"");
var content =
’〈table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=150);" id=toolTipTalbe〉〈tr〉〈td class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:11px;"〉’
’〈tr id=pltsPoptop〉〈th valign=bottom class=header〉〈p id=topleft align=left〉↖’ pltsTitle ’〈/p〉〈p id=topright align=right style="display:none"〉’ pltsTitle ’↗〈/font〉〈/th〉〈/tr〉’
’〈tr〉〈td " attr " class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%"〉’ Msg ’〈/td〉〈/tr〉’

查看更多 動易Cms教程  動易Cms模板