CSS+JS implementation of an excellent hyperlink mouse hover hint

Source: Internet
Author: User
Tags date return window
css|js| link | Mouse hyperlink, the general practice is to give a title property, so that the user's mouse hover over the hyperlink, it will show the title of the content. But are you tired of the same mouse hover effect?
Of course, there are also very cool code, but only across the browser Kungfu is not enough, hehe. I met a good css, in IE and Firefox browsing the same effect.
The actual effect you can refer to: Campus Recruitment catch ( http://www.xyzp.net/)、 http://www.xyzp.net/index.html

The code is as follows:
/*************************************************************************

Dw_viewport.js
Version Date Nov 2003

This code was from Dynamic Web coding
At http://www.dyn-web.com/
Copyright 2003 by Sharon Paine
Terms of Use at http://www.dyn-web.com/bus/terms.html
Regarding conditions under which you with this code.
This notice must is retained in the code as is!

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

var viewport = {
Getwinwidth:function () {
this.width = 0;
if (window.innerwidth) this.width = window.innerwidth-18;
else if (document.documentelement && document.documentElement.clientWidth)
This.width = Document.documentElement.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.documentelement && document.documentElement.clientHeight)
This.height = Document.documentElement.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.documentelement && document.documentElement.scrollLeft)
THIS.SCROLLX = Document.documentElement.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.documentelement && document.documentElement.scrollTop)
this.scrolly = Document.documentElement.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 coding at http://www.dyn-web.com/
Terms of Use at http://www.dyn-web.com/bus/terms.html
Regarding conditions under which you with this code.
This notice must is 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.target;

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, 2005
(minor changes in position algorithm and timer mechanism)

This code is from Dynamic Web coding at dyn-web.com
Copyright 2003-5 by Sharon Paine
Terms of Use at www.dyn-web.com/bus/terms.html
Regarding conditions under which you with this code.
This notice must is 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 + "', ' visible ')", 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 + "', ' hidden ')", 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 ();

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.