Links in the web often touch the text effect of the link hint, is when the mouse through the URL link, immediately pop-up a hint layer (DIV), hint link content and so on related text. Although I know it was implemented with hidden DIV, I didn't know how to do it. Yesterday found a JS file, you can easily handle. Collect it.
js file code is as follows (Mouse_on_title.js):
<!--
//*********** default settings definition. *********************
tpopwait=50; Stay twait and show the prompts.
tpopshow=6000; Show tshow seconds to turn off prompts
showpopstep=20;
popopacity=95;
fontcolor= "#000000";
bgcolor= "#EDEDED";
bordercolor= "#007db5";
//*************** internal variable definition *****************
Spop=null;curshow=null;tfadeout=null;tfadein=null;tfadewaiting=null;
document.write ("<style type= ' text/css ' id= ' Defaultpopstyle ' >");
document.write (". Cpoptext {background-color:" + bgcolor + "; color:" + FontColor + "; border:1px "+ bordercolor +" SOLID;FONT-COLOR:FONT-SIZE:12PX; padding-right:4px; padding-left:4px; height:20px; padding-top:2px; padding-bottom:2px; Filter:alpha (opacity=0)} ");
document.write ("</style>");
document.write ("<div id= ' dypoplayer ' style= ' position:absolute;z-index:1000; ' class= ' cPopText ') ></div > ");
function Showpopuptext () {
var o=event.srcelement;
Mousex=event.x;
Mousey=event.y;
if (o.alt!=null && o.alt!= "") {o.dypop=o.alt;o.alt= ""};
if (o.title!=null && o.title!= "") {o.dypop=o.title;o.title= ""};
if (o.dypop!=spop) {
Spop=o.dypop;
cleartimeout (curshow);
cleartimeout (tfadeout);
cleartimeout (Tfadein);
Cleartimeout (tfadewaiting);
if (spop==null | | spop== "") {
dypoplayer.innerhtml= "";
dypoplayer.style.filter= "Alpha ()";
dypoplayer.filters.alpha.opacity=0;
}
else {
if (o.dyclass!=null) Popstyle=o.dyclass
else popstyle= "Cpoptext";
curshow=settimeout ("Showit ()", tpopwait);
}
}
}
function Showit () {
Dypoplayer.classname=popstyle;
Dypoplayer.innerhtml=spop;
Popwidth=dypoplayer.clientwidth;
Popheight=dypoplayer.clientheight;
if (mousex+12+popwidth>document.body.clientwidth) popleftadjust=-popwidth-24
else popleftadjust=0;
if (mousey+12+popheight>document.body.clientheight) poptopadjust=-popheight-24
else poptopadjust=0;
Dypoplayer.style.left=mousex+12+document.body.scrollleft+popleftadjust;
Dypoplayer.style.top=mousey+12+document.body.scrolltop+poptopadjust;
dypoplayer.style.filter= "Alpha (opacity=0)";
fadeout ();
}
function fadeout () {
if (dypoplayer.filters.alpha.opacity<popopacity) {
Dypoplayer.filters.alpha.opacity+=showpopstep;
tfadeout=settimeout ("fadeout ()", 1);
}
else {
dypoplayer.filters.alpha.opacity=popopacity;
tfadewaiting=settimeout ("FadeIn ()", tpopshow);
}
}
function FadeIn () {
if (dypoplayer.filters.alpha.opacity>0) {
dypoplayer.filters.alpha.opacity-=1;
tfadein=settimeout ("FadeIn ()", 1);
}
}
Document.onmouseover=showpopuptext;
-->
when applied, add to <head></head> between pages:
<script language=javascript src= "Mouse_on_title.js" ></SCRIPT>
Add the title attribute to a link that requires a hint layer, such as:
//<a href= "target" title= "hint text content" > Test </a>
in fact, if you do not add the above JS file, the hint layer effect can also come out. That is, the speed is relatively slow, the hint layer effect is more monotonous.
