HOW: popup message when mouse over a text link
Hi.
It so happens I'm trying to write a script to do this and more. Actually,
I'm trying to simulate the Windows Help 'tip boxes' that pop up when you
click an active word. Below is a good start, I think. Note that, so far,
this is written for IE, and possibly only 5.0+ . Also, to change the size of
the box, several values have to be changed. Eventually, this will all happen
'automatically' via script. Oh, and the stuff in the <object> tags at the
bottom was cut and paste from a Windows Help page.
But I have a couple questions of my own if ANYONE could offer any help.
1. Where does the 'client' in event.clientX etc. come from? I saw it in
another script using dhtml positioning. I could find no reference in JScript
or ECMA script...And is there another way to acomplish the same? (It needs
to allow scrolling without affecting positioning...)
2. How can the mouseOver and mouseOut event handlers in the <a> tag be
incorporated into the script, so as to write the code once? Not to mention
cross-browser...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>pop up tip box</title>
<script language="JavaScript">
/*
This script written by: Ken E. Zahler.
*/
var overLink = true;
function enableTip(status)
{
if(status == true)
{
overLink = true;
}
else
{
overLink = false;
}
Quote:
}
function showTip()
{
if(document.all && overLink == true)
{
document.all.tip.style.left = event.clientX - 200 +
document.body.scrollLeft;
document.all.tip.style.top = event.clientY + 7 + document.body.scrollTop;
document.all.tip.style.visibility = "visible";
document.all.shaddow.style.left = event.clientX - 195 +
document.body.scrollLeft;
document.all.shaddow.style.top = event.clientY +13 +
document.body.scrollTop;
document.all.shaddow.style.visibility = "visible";
}
Quote:
}
function hideTip()
{
if(document.all && overLink == false)
{
document.all.tip.style.visibility = "hidden";
document.all.shaddow.style.visibility = "hidden";
}
Quote:
}
</script>
<style type="text/css">
#tip {position: absolute; visibility: hidden}
.tipBox {background-color: #FFFFFF; layer-background-color: #FFFFFF;
border-color: #000000; border-width: 1px; border-style: solid; padding: 8;
width: 400; font-family: Verdana; font-size: 8pt; letter-spacing: -1px;
line-height: 11pt}
#shaddow {position: absolute; visibility: hidden}
.shaddowBox {background-color: #888888; layer-background-color: #888888;
background-image: URL(shaddow.gif); border-style: none; padding: 0; width:
401; height: 48}
link {font-family: Verdana; font-size: 8pt; color: #0000FF}
a:link {font-family: Verdana; font-size: 8pt; color: #0000FF}
v:link {font-family: Verdana; font-size: 8pt; color: #0000FF}
</style>
</head>
<body bgcolor="#D0C0D0" onClick="hideTip()">
<div class="shaddowBox" id="shaddow">
</div>
<div class="tipBox" id="tip">
The taskbar is the bar on your desktop that includes the <b>Start</b>
button. Buttons representing programs currently running on your computer
appear on this bar.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript: void('')" onClick="showTip()";
onMouseOver="enableTip(true)"; onMouseOut="enableTip(false)";
name="tipLink"; style="position: relative; left: 250">
taskbar
</a>
<br><br><br><br><br><br><br><br>
<OBJECT id=hhctrl type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
HSPACE=250>
<PARAM name="Command" value="WinHelp, Popup">
<PARAM name="Text" value="Text: taskbar">
<param NAME="fONT" VALUE="VERDANA,8,0x000800,underline">
<PARAM name="Item1" value="windows.hlp">
<PARAM name="Item2" value="WIN_TRAY_TASKBAR_DEF">
</OBJECT>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
