Ralpharama Archive. The archive is almost 20 years old, this website is no longer maintained.

Home | New Writing | Old Writing | Cooking | Technical | Wine Making | Cocktails
   
 
Misc

Javascript link-hover-box thingy

Hits 46740 | Created 2007-07-05 | Modified 2007-07-05

You know how long I've been trying to figure out how to do a nice little hover-box pop-up when you dither on links?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript hover thingy</title>
<script language="javascript">
<!--
// ** Popup box hover thingy (c)2005 by Ralph Capper
// ** Free for you to use - but please credit me - www.ralpharama.co.uk
// Start trapping mouse

if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;
var ent; // Our floating div
var posx=0; // Our mouseX
var posy=0; // Our mouseY
var offsetX=16; // Offset X away from mouse
var offsetY=16; // Offset Y
var popUp = false; // Is it showing right now??!

// Run upon load
function init() {
// Set up div we will use to hover our text
ent = document.createElement("div");
// Change these to customise your popup
ent.style.color = "#000000";
ent.style.font = "normal xx-small verdana";
ent.style.padding = "1px 1px 1px 1px";
ent.style.background = "#fff588";
ent.style.border = "1px solid black";
// Don't, however, change these
ent.style.left = -100;
ent.style.top = -100;
ent.style.position = 'absolute';
ent.innerHTML = '';
ent.style.zIndex = 10;
document.getElementById("thepage").appendChild(ent);
}
// Keeps mouse x and y in posx and posy

function mtrack(e) {
if (popUp) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
ent.style.left = posx + offsetX;
ent.style.top = posy + offsetY;
}
}
// Change floating div to correct text on mouseover

function doText(t, e) {
popUp = true;
ent.innerHTML = t;
}
// Change back to nothing

function doClear() {
popUp = false;
ent.style.left = -100;
ent.style.top = -100;
ent.innerHTML = "";
}
-->
</script>
</head>
<body onLoad="init();" id="thepage">
<div style="font: normal xx-small verdana;">
<br><br><br>
Is this a link you may be tempted to click on, or, dither around? <a href="http://www.ralpharama.co.uk" onMouseover="doText('Hello World!<br>This is quite nice, eh?', this);" onMouseOut="doClear();">www.ralpharama.co.uk</a>
<br><br><br>
To use, include the javascript, and ensure to add the line:
<br><br>
<body onLoad="init();" id="thepage">
<br><br>
To make a hover-box-link do:
<br><br>
<a href="http://xxxURLxxx" onMouseover="doText('xxxTextxxx', this);" onMouseOut="doClear();">xxxTextLinkxxx</a>
<br><br>
</div>
</body>
</html>




Comment Javascript link-hover-box thingy comment by ian luigi lastra Hits | Last Modified 2009-01-31
can somebody explain this one by one..
Comment Javascript link-hover-box thingy comment by Narcis Hits | Last Modified 2009-04-28
Here's a slight rewrite, with explanations:

// This code is executed first (think JS "constructor")
// Good place to start trapping mouse events
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mouseTrackFunction; //
// Declare variables for our popup box (the attributes)
var popupBox; // Our floating div
var posx = 0; // Our mouseX
var posy = 0; // Our mouseY
var offsetX = 16; // Offset X away from mouse cursor
var offsetY = 16; // Offset Y away from mouse cursor
var popupBoxIsVisible = false; // Is it showing right now?

// Show and Hide functions
function showPopUpBox(x, y)
{
popupBox.style.left = x;
popupBox.style.top = y;
}
function hidePopUpBox() // move the box outside of view
{
popupBox.style.left = -100;
popupBox.style.top = -100;
}

// Function called when HTML page loaded
function init()
{
// Set up div we will use to hover our text
popupBox = document.createElement("div");
// Customize pop up box here:
popupBox.style.color = "#000000"; // black
popupBox.style.background = "#aaffff" // on light blue
popupBox.style.font = "normal small verdana";
popupBox.style.padding = "1px 1px 1px 1px";
popupBox.style.border = "1px solid black";
// Don't, however, change these
popupBox.style.position = 'absolute';
popupBox.innerHTML = ''; // no text in popup box
popupBox.style.zIndex = 10;
document.getElementById("thisHtmlPage").appendChild(popupBox);
hidePopUpBox()
}

// Keeps mouse x and y in posx and posy
function mouseTrackFunction(e)
{
if (popupBoxIsVisible)
{
if (!e) var e = window.event;
// Netscape browser, get screen position
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else // IE browser screen position
if (e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
// Make pop up box visible at mouse cursor + offset
showPopUpBox(posx + offsetX, posy + offsetY);
}
}

// Set text to popup box, enable its display
function displayText(text, e)
{
popupBoxIsVisible = true;
popupBox.innerHTML = text;
}

// Disable popup box
function clearText()
{
hidePopUpBox()
popupBox.innerHTML = "";
popupBoxIsVisible = false;
}
Comment Javascript link-hover-box thingy comment by Hits | Last Modified 2010-09-04
Comment Javascript link-hover-box thingy comment by Sol GH Hits | Last Modified 2011-05-02
Can someone help me please? I have made a page in HTML, normal shizzle and has linkns and stuff but I wanna add this to it so when I hover or dither over a link it comes up with the comment box thingy, but the link you can also click. How would I do this? When I copy and paste it all and put it in there is nothing on my page...
Comment Javascript link-hover-box thingy comment by Jordan C Hits | Last Modified 2011-07-04
Have you put the html targets in? You need to add your target destinations wherever html appears as code and not instruction.
Comment Javascript link-hover-box thingy comment by Hits | Last Modified 2012-07-07
Comment Javascript link-hover-box thingy comment by xxxxx Hits | Last Modified 2012-09-28
dfc dsf

Make a Comment

Name
Comment


Antispam Code (always a number)

Enter Code Above
Submit

Note: All HTML will be removed except for bold and italics. Links will not display. Line breaks are added automatically. Use <pre>...</pre> for code.

Tags

This item has the following tags:
tech javascript hover

Useful? Donate for hosting costs

All content copyright (c) Ralpharama