A good hyperlink hover prompt CSS + JS

A good hyperlink hover prompt CSS + JS

[Font: small and big]

Author: Network excerpt Article Source: Internet clicks:

125 Update Time: 8:54:31 hyperlink. The general practice is to give a title attribute so that the title content is displayed when you hover your mouse over the hyperlink. But are you tired of having the same mouse hover effect?

Of course, there are also dazzling Code in this regard, but it is not enough to work on cross-browser. I met a good CSS, which has the same effect in IE and Firefox.

Is the actual running effect:

The Code is as follows:

/*************************************** ***************

Dw_viewport.js
Version date Nov 2003

This code is from dynamic Web Coding
AtHttp://www.dyn-web.com/
Copyright 2003 by Sharon Paine
See Terms of UseHttp://www.dyn-web.com/bus/terms.html
Regarding conditions under which you may use this code.
This notice must be retained in the Code as is!

**************************************** ***************/

VaR viewport = {
Getwinwidth: function (){
This. width = 0;
If (window. innerwidth) This. width = Window. innerwidth-18;
Else if (document.doc umentelement & document.doc umentelement. clientwidth)
This. width = document.doc umentelement. clientwidth;
Else if (document. Body & document. Body. clientwidth)
This. width = Document. Body. clientwidth;
},

Getwinheight: function (){
This. Height = 0;
If (window. innerheight) This. Height = Window. innerheight-18;
Else if (document.doc umentelement & document.doc umentelement. clientheight)
This. Height = document.doc umentelement. clientheight;
Else if (document. Body & document. Body. clientheight)
This. Height = Document. Body. clientheight;
},

Getscrollx: function (){
This. scrollx = 0;
If (typeof window. pagexoffset = "Number") This. scrollx = Window. pagexoffset;
Else if (document.doc umentelement & document.doc umentelement. scrollleft)
This. scrollx = document.doc umentelement. scrollleft;
Else if (document. Body & document. Body. scrollleft)
This. scrollx = Document. Body. scrollleft;
Else if (window. scrollx) This. scrollx = Window. scrollx;
},

Getscrolly: function (){
This. scrolly = 0;
If (typeof window. pageyoffset = "Number") This. scrolly = Window. pageyoffset;
Else if (document.doc umentelement & document.doc umentelement. scrolltop)
This. scrolly = document.doc umentelement. scrolltop;
Else if (document. Body & document. Body. scrolltop)
This. scrolly = Document. Body. scrolltop;
Else if (window. scrolly) This. scrolly = Window. scrolly;
},

Getall: function (){
This. getwinwidth (); this. getwinheight ();
This. getscrollx (); this. getscrolly ();
}

}

/*************************************** *************
Dw_event.js (version date Feb 2004)

This code is from dynamic Web codingHttp://www.dyn-web.com/
See Terms of UseHttp://www.dyn-web.com/bus/terms.html
Regarding conditions under which you may use this code.
This notice must be retained in the Code as is!
**************************************** ***************/

VaR dw_event = {

Add: function (OBJ, etype, FP, Cap ){
CAP = CAP | false;
If (obj. addeventlistener) obj. addeventlistener (etype, FP, CAP );
Else if (obj. attachevent) obj. attachevent ("On" + etype, FP );
},

Remove: function (OBJ, etype, FP, Cap ){
CAP = CAP | false;
If (obj. removeeventlistener) obj. removeeventlistener (etype, FP, CAP );
Else if (obj. detachevent) obj. detachevent ("On" + etype, FP );
},

Domit: function (e ){
E = e? E: window. event;
E. TGT = E. srcelement? E. srcelement: e.tar get;

If (! E. preventdefault) E. preventdefault = function () {return false ;}
If (! E. stoppropagation) E. stoppropagation = function () {If (window. Event) window. event. cancelbubble = true ;}

Return E;
}

}
/*************************************** ***********
Dw_tooltip.js requires: dw_event.js and dw_viewport.js
Version date: March 14,200 5
(Minor changes in position algorithm and timer mechanic)

This code is from dynamic Web coding at dyn-web.com
Copyright 2003-5 by Sharon Paine
See Terms of UseWww.dyn-web.com/bus/terms.html
Regarding conditions under which you may use this code.
This notice must be retained in the Code as is!
**************************************** *************/

VaR tooltip = {
Followmouse: True,
Offx: 8,
Offy: 12,
Tipid: "tipdiv ",
Showdelay: 100,
Hidedelay: 200,

Ready: false, Timer: NULL, tip: NULL,

Init: function (){
If (document. createelement & document. Body & typeof document. Body. appendchild! = "Undefined "){
If (! Document. getelementbyid (this. tipid )){
VaR El = Document. createelement ("Div ");
El. ID = This. tipid; document. Body. appendchild (EL );
}
This. Ready = true;
}
},

Show: function (E, MSG ){
If (this. Timer) {cleartimeout (this. Timer); this. Timer = 0 ;}
This. Tip = Document. getelementbyid (this. tipid );
If (this. followmouse) // set up mousemove
Dw_event.add (document, "mousemove", this. trackmouse, true );
This. writetip (""); // for Mac IE
This. writetip (MSG );
Viewport. getall ();
This. positiontip (E );
This. Timer = setTimeout ("tooltip. togglevis ('" + this. tipid + "', 'visable')", this. showdelay );
},

Writetip: function (MSG ){
If (this. Tip & typeof this. Tip. innerhtml! = "Undefined") This. Tip. innerhtml = MSG;
},

Positiontip: function (e ){
If (this. Tip & this. Tip. Style ){
// Put E. pagex/y first! (For Safari)
VaR x = E. pagex? E. pagex: E. clientx + viewport. scrollx;
Var y = E. Pagey? E. Pagey: E. clienty + viewport. scrolly;

If (x + this. Tip. offsetwidth + this. offx> viewport. Width + viewport. scrollx ){
X = x-This. Tip. offsetwidth-This. offx;
If (x <0) x = 0;
} Else x = x + this. offx;

If (Y + this. Tip. offsetheight + this. offy> viewport. height + viewport. scrolly ){
Y = Y-This. Tip. offsetheight-This. offy;
If (Y <viewport. scrolly) y = viewport. height + viewport. scrolly-This. Tip. offsetheight;
} Else y = Y + this. offy;

This. Tip. style. Left = x + "PX"; this. Tip. style. Top = Y + "PX ";
}
},

Hide: function (){
If (this. Timer) {cleartimeout (this. Timer); this. Timer = 0 ;}
This. Timer = setTimeout ("tooltip. togglevis ('" + this. tipid + "', 'den den ')", this. hidedelay );
If (this. followmouse) // release mousemove
Dw_event.remove (document, "mousemove", this. trackmouse, true );
This. Tip = NULL;
},

Togglevis: function (ID, Vis) {// to check for El, prevent (rare) Errors
VaR El = Document. getelementbyid (ID );
If (EL) El. style. Visibility = vis;
},

Trackmouse: function (e ){
E = dw_event.domit (E );
Tooltip. positiontip (E );
}

}

Tooltip. INIT ();