the author's email address is bouncing, so maybe the forum can help me adapt this script-- script is at the end of the post.
I want to have description layers appied to a series of absolutely-positioned links (the links are names, over a background-image of a map). Question is, before I start trial-n-erroring:
do I need a series of <div>s , which are positioned absolutely, and named "object 1", "object2" etc? And then, what do you do to the script to call these objects?
or....
*within* the div "object 1", could you have, instead of the <p>s in the script as it stands, a series of absolutely-positoned divs, or spans, each with the appropriate message ?
<!-- THREE STEPS TO INSTALL DESCRIPTION LAYER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Randy Bennett (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->) -->
<!-- Web Site: <!-- m --><a class="postlink" href="http://home.thezone.net/~rbennett/utility/javahead.htm">http://home.thezone.net/~rbennett/utility/javahead.htm</a><!-- m --> -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! <!-- m --><a class="postlink" href="http://javascript.internet.com">http://javascript.internet.com</a><!-- m --> -->
<!-- Begin
function setupDescriptions() {
var x = navigator.appVersion;
y = x.substring(0,4);
if (y>=4) setVariables();
}
var x,y,a,b;
function setVariables(){
if (navigator.appName == "Netscape") {
h=".left=";
v=".top=";
dS="document.";
sD="";
}
else
{
h=".pixelLeft=";
v=".pixelTop=";
dS="";
sD=".style";
}
}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function popLayer(a){
desc = "<table cellpadding=3 border=1 bgcolor=F7F7F7><td>";
if (a==1) desc += "The JavaScript Source Home Page!";
if (a==2) desc += "Updates on all the latest scripts added to the site!";
if (a==3) desc += "Browser our Table of Contents page!";
if (a==4) desc += "Get JavaScript assistance in our JS forum!";
if (a==5) desc += "Get the answers to our commonly asked JS questions!";
desc += "</td></table>";
if(isNav) {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+25;
document.object1.top=y;
}
else {
object1.innerHTML=desc;
eval(dS+"object1"+sD+h+(x+25));
eval(dS+"object1"+sD+v+y);
}
}
function hideLayer(a){
if(isNav) {
eval(document.object1.top=a);
}
else object1.innerHTML="";
}
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX;
y = (isNav) ? e.pageY : event.clientY;
}
if (isNav){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="setupDescriptions()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">layer hidden off the screen</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptsource.com" onMouseOver="popLayer(1)" onMouseOut="hideLayer(-50)">Home Page</a>
<p>
<a href="http://javascriptsource.com/new.html" onMouseOver="popLayer(2)" onMouseOut="hideLayer(-50)">What's New?</a>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptsource.com/toc.html" onMouseOver="popLayer(3)" onMouseOut="hideLayer(-50)">Site Contents</a>
<p>
<a href="http://javascriptsource.com/forum/" onMouseOver="popLayer(4)" onMouseOut="hideLayer(-50)">JavaScript Forum</a>
<p>
<a href="http://javascriptsource.com/faq/" onMouseOver="popLayer(5)" onMouseOut="hideLayer(-50)">JavaScript FAQs</a>
<p>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.93 KB -->
I want to have description layers appied to a series of absolutely-positioned links (the links are names, over a background-image of a map). Question is, before I start trial-n-erroring:
do I need a series of <div>s , which are positioned absolutely, and named "object 1", "object2" etc? And then, what do you do to the script to call these objects?
or....
*within* the div "object 1", could you have, instead of the <p>s in the script as it stands, a series of absolutely-positoned divs, or spans, each with the appropriate message ?
<!-- THREE STEPS TO INSTALL DESCRIPTION LAYER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Randy Bennett (<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->) -->
<!-- Web Site: <!-- m --><a class="postlink" href="http://home.thezone.net/~rbennett/utility/javahead.htm">http://home.thezone.net/~rbennett/utility/javahead.htm</a><!-- m --> -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! <!-- m --><a class="postlink" href="http://javascript.internet.com">http://javascript.internet.com</a><!-- m --> -->
<!-- Begin
function setupDescriptions() {
var x = navigator.appVersion;
y = x.substring(0,4);
if (y>=4) setVariables();
}
var x,y,a,b;
function setVariables(){
if (navigator.appName == "Netscape") {
h=".left=";
v=".top=";
dS="document.";
sD="";
}
else
{
h=".pixelLeft=";
v=".pixelTop=";
dS="";
sD=".style";
}
}
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function popLayer(a){
desc = "<table cellpadding=3 border=1 bgcolor=F7F7F7><td>";
if (a==1) desc += "The JavaScript Source Home Page!";
if (a==2) desc += "Updates on all the latest scripts added to the site!";
if (a==3) desc += "Browser our Table of Contents page!";
if (a==4) desc += "Get JavaScript assistance in our JS forum!";
if (a==5) desc += "Get the answers to our commonly asked JS questions!";
desc += "</td></table>";
if(isNav) {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+25;
document.object1.top=y;
}
else {
object1.innerHTML=desc;
eval(dS+"object1"+sD+h+(x+25));
eval(dS+"object1"+sD+v+y);
}
}
function hideLayer(a){
if(isNav) {
eval(document.object1.top=a);
}
else object1.innerHTML="";
}
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX;
y = (isNav) ? e.pageY : event.clientY;
}
if (isNav){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="setupDescriptions()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">layer hidden off the screen</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptsource.com" onMouseOver="popLayer(1)" onMouseOut="hideLayer(-50)">Home Page</a>
<p>
<a href="http://javascriptsource.com/new.html" onMouseOver="popLayer(2)" onMouseOut="hideLayer(-50)">What's New?</a>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://javascriptsource.com/toc.html" onMouseOver="popLayer(3)" onMouseOut="hideLayer(-50)">Site Contents</a>
<p>
<a href="http://javascriptsource.com/forum/" onMouseOver="popLayer(4)" onMouseOut="hideLayer(-50)">JavaScript Forum</a>
<p>
<a href="http://javascriptsource.com/faq/" onMouseOver="popLayer(5)" onMouseOut="hideLayer(-50)">JavaScript FAQs</a>
<p>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.93 KB -->