Forum Moderators: open
Clark.
Signature: I hate javascript :)
I know if you put title="place tip here" you get it, but it doesn't "stay" even if you leave the cursor there. I vaguely remember there was an html code to do this, but I don't remember it nor am I sure if it works on all major browsers? This would obviate the need for javascript.
You'd need to create a layer (a floating div) that is shown at the right place whenever the user's mouse hovers over some 'sensitive' area. If you don't feel like coding your own script: there must be several scripts out there that do the job. If you're interested, I can dive into my rahter chaotic archive and dig up something I wrote a while ago.
<style type="text/css">
div#helpbox {border: 2px solid #8084F8; background: #fff; position: absolute;
display: none; font-size: smaller; padding: 2px;}
</style>
<script type="text/javascript">
var helptexts = ['first text here', 'second text here', 'third text here'];
function showbox(e) {
if (!e) var e = window.event;
var linkID = e.srcElement? e.srcElement.id : this.id;
var helpbox = document.getElementById('helpbox');
helpbox.innerHTML = '<h1>HELP</h1>' + helptexts[linkID.substr(4) - 1];
helpbox.style.display = 'block';
var posx = (typeof e.pageX!= 'undefined')? e.pageX
: e.clientX + (document.documentElement? document.documentElement.scrollLeft
: document.body.scrollLeft);
var posy = (typeof e.pageY!= 'undefined')? e.pageY
: e.clientY + (document.documentElement? document.documentElement.scrollTop
: document.body.scrollTop);
helpbox.style.top = posy - 20 + 'px';
helpbox.style.left = posx + 10 + 'px';
}
function hidebox() {
document.getElementById('helpbox').style.display = 'none';
}
function init() {
var hrefs = document.getElementsByTagName('a');
for (var i = 0; i < hrefs.length; i++) {
if (hrefs[i].id.substr(0,4) == 'help') {
if (hrefs[i].attachEvent) {
hrefs[i].attachEvent('onmouseover', showbox);
hrefs[i].attachEvent('onmouseout', hidebox);
} else if(hrefs[i].addEventListener) {
hrefs[i].addEventListener('mouseover', showbox, false);
hrefs[i].addEventListener('mouseout', hidebox, false);
}
}
}
}
</script>
</head>
<body>
<table cellspacing=10>
<tr>
<td><a href="#" id="help1">...#1...</a></td>
<td><a href="#" id="help2">...#2...</a></td>
<td><a href="#" id="help3">...#3...</a></td>
</tr>
</table>
.
.
.
<div id="helpbox"></div>
<script type="text/javascript">
init();
</script>
</body>
Edit the first line of the script, the one with 'var helptexts = ...'.
The help texts will appear in a DIV with the ID 'helpbox'. You can apply any style you like, as long you keep the 'position: absolute; display: none;'.
In your html, put the helpbox somewhere at the end. After that, call the function init(), which attaches the onmouseout and onmouseover event handlers to the links that have IDs called 'help#'.
The function showbox() simply picks the right text from the array of texts you defined, puts it into the helpbox, and sets the display property to 'block'. The initial position of the box is relative to the position of the mouse pointer.
It's been tested to work in Opera, Firefox and IE6; it might even work in IE5 and 5.5.
undefined"
Does this line:
helpbox.innerHTML = '<h1>HELP</h1>' + helptexts[linkID.substr(4) - 1];
Mean that I can only choose between 3 texts? To go up or down do I just change the (4) to whatever number?
