No chad..........one is for a DHTML mouseover text menu and the other is for a DHTML mouseover tooltips
When both scripts are on the same page the tooltips work but the text menu doesn't........i will post both the scripts below.
Mouseover Tooltips:
<style type="text/css">
.clDescriptionCont {position:absolute; width:200px; visibility:hidden; layer-background-color:#cccccc; z-index:200;}
.clDescription {width:150px; left:0px; top:0px; font-family:verdana,arial,helvetica,sans-serif; overflow:hidden; border: 1px solid #999999; padding:3px; font-size:11px; background-color:#cccccc; layer-background-color:#cccccc;}
.clLinks {position:absolute; left:100px; top:200px; z-index:1;}
.clCaption {position:absolute; left:0px; top:0px; width:157px; height:15px; clip:rect(0px 157px 15px 0px); font-size:11px; font-family:verdana,arial,helvetica,sans-serif; background-color:#999999; layer-background-color:#999999;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
PopupDescriptions
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5"
>-1
this.ie5=(this.ver.indexOf("MSIE 5"
>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6"
>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac"
>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/***************************************************************************************
Variables to set:
***************************************************************************************/
messages=new Array()
//Write your descriptions in here.
messages[0] = "Description of test link 0 asd asd asd asd asd asd asd asd asd asd asd"
messages[1] = "Description of test link 1 asd asd asd asd asd asd asd asd asd as ds asdasd"
messages[2] = "Description of test link 2"
messages[3] = "Description of test link 3"
messages[4] = '<div class="clCaption">Your caption</div><br>Description of test link 4</div>'
//To have more descriptions just add to the array.
fromX = 50 //How much from the actual mouse X should the description box appear?
fromY = -20 //How much from the actual mouse Y should the description box appear?
//To set the font size, font type, border color or remove the border or whatever,
//change the clDescription class in the stylesheet.
//Makes crossbrowser object.
function makeObj(obj){
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
if(!this.evnt) return false
this.css=bw.dom||bw.ie4?this.evnt.style:bw.ns4?this.evnt:0;
this.wref=bw.dom||bw.ie4?this.evnt:bw.ns4?this.css.document:0;
this.writeIt=b_writeIt;
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function b_writeIt(text){
if (bw.ns4){this.wref.write(text);this.wref.close()}
else this.wref.innerHTML = text
}
//Capturing mousemove
var descx = 0
var descy = 0
function popmousemove(e){descx=bw.ns4||bw.ns6?e.pageX:event.x; descy=bw.ns4||bw.ns6?e.pageY:event.y}
var oDesc;
//Shows the messages
function popup(num){
if(oDesc){
oDesc.writeIt('<div class="clDescription">'+messages[num]+'</div>')
if(bw.ie5||bw.ie6) descy = descy+document.body.scrollTop
oDesc.css.left = (descx+fromX)+px
oDesc.css.top = (descy+fromY)+px
oDesc.css.visibility = "visible"
}
}
//Hides it
function popout(){
if(oDesc) oDesc.css.visibility = "hidden"
}
function setPopup(){
if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = popmousemove;
oDesc = new makeObj('divDescription')
}
</script>
</head>
<body marginleft="0" marginheight="0">
<!-- START DELETE -->
<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="/images/logo.gif" width="165" height="54" alt="" border="0" alt="Click to close window"></a></div>
<br><br><br>
<!-- END DELETE -->
<div id="divDescription" class="clDescriptionCont">
<!--Empty div-->
</div>
<div id="divLinks" class="clLinks">
<!-- Just delete this layer, it's just here for the example links -->
<a href="#" onmouseover="popup(0)" onmouseout="popout()">test link 0</a> -
<a href="#" onmouseover="popup(1)" onmouseout="popout()">test link 1</a> -
<a href="#" onmouseover="popup(2)" onmouseout="popout()">test link 2</a> -
<a href="#" onmouseover="popup(3)" onmouseout="popout()">test link 3</a> -
<a href="#" onmouseover="popup(4)" onmouseout="popout()">test link 4</a>
</div>
<script type="text/javascript">setPopup()</script>
----------------------------------------------------
Script 2: Mouseover Text Menu
<style type="text/css">
#divLinks {position:absolute; left:150px; top:150px; visibility:hidden;}
#divLinks a {color:#336699; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; font-weight:700;}
#divMessage {position:absolute; left:150px; width:300px; top:180px; visibility:hidden;}
body {background-color:#ffffff;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
ChangeText
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5"
>-1
this.ie5=(this.ver.indexOf("MSIE 5"
>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6"
>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac"
>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
if(document.layers){ //NS4 resize fix...
scrX= innerWidth; scrY= innerHeight;
onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
/****
Variables to set
****/
msgFont= "arial,helvetiva" // The font for the message
msgFontSize= 12 // Set the fontSize in px
msgFontColor="#000000" // Set the fontColor
msgWidth= "300" // Set the width of the messageblock here for netscape 4
//Set the text you want to display on mouseover here.
messages=new Array()
messages[0]="" //This is the default text that appears when you mouse out.
messages[1]="This is link nr 1, you should really visit it!"
messages[2]="Link nr 2 (this one) is even better!"
messages[3]="This link however, nr3, isn't that good..."
messages[4]="Maybe you should try this one?<br>I'll write some more text to show that it wraps correctly to several lines."
messages[5]="<img src=\"changetext_image.gif\" width=\"56\" height=\"54\" alt=\"\" border=\"0\"><br>As you see, you can put html in here too, like an image."
messages[6]="Later all.."
/********************************************************************************
You don't have to change anything below this
********************************************************************************/
//ChangeText object constructor.
function makeChangeTextObj(obj){
this.css = bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0;
this.writeref = bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0;
this.writeIt = b_writeIt;
}
function b_writeIt(text,num){
if (bw.ns4){
this.writeref.write(text)
this.writeref.close()
}
else this.writeref.innerHTML = messages[num]
}
//The mouoseover function. Calls the writeIt method to write the text to the div.
function changeText(num){
if(bw.bw) oMessage.writeIt('<table width="'+msgWidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td><span style="font-size:'+msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">'+messages[num]+'</span></td></tr></table>', num)
}
//The init function. Calls the object constructor and initiates some properties.
function changeTextInit(){
//Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
bw.opera5 = (navigator.userAgent.indexOf("Opera"
>-1 && document.getElementById)?true:false
if (bw.opera5) bw.ns6 = 0
oMessage = new makeChangeTextObj('divMessage')
oLinks = new makeChangeTextObj('divLinks')
//Setting the style properties of the text layer.
if(bw.dom || bw.ie4){
with(oMessage.writeref.style){fontFamily=msgFont; fontSize=msgFontSize+"px"; color=msgFontColor}
}
//Both layers are hidden by default to prevent users from mousing over them and creating errors while the page loads.
oMessage.css.visibility= "visible"
oLinks.css.visibility= "visible"
}
//If the browser is ok, the init function is called on pageload.
if (bw.bw) onload = changeTextInit
</script>
</head>
<body marginleft="0" marginheight="0">
<!-- START DELETE -->
<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="/images/logo.gif" width="165" height="54" alt="" border="0" alt="Click to close window"></a></div>
<br><br><br>
<!-- END DELETE -->
<div id="divLinks">
<a href="#" onmouseover="changeText(1)" onmouseout="changeText(0)">Link 1</a>
<a href="#" onmouseover="changeText(2)" onmouseout="changeText(0)">Link 2</a>
<a href="#" onmouseover="changeText(3)" onmouseout="changeText(0)">Link 3</a>
<a href="#" onmouseover="changeText(4)" onmouseout="changeText(0)">Link 4</a>
<a href="#" onmouseover="changeText(5)" onmouseout="changeText(0)">Link 5</a>
<a href="#" onmouseover="changeText(6)" onmouseout="changeText(0)">Link 6</a>
</div>
<div id="divMessage">
<font face="arial,helvetica,sans-serif" size="2" color="#000000">
Just place the default text here (this will show always in 3.x browsers)
You have to place this with tables or something instead of layers for backwards compatibility.
</font>
</div>
Thanks
