In the end of the HTML that makes the calendar appear, just add the following code:
<DIV ID="[:blue]unique event identifier" STYLE="position: absolute; z-index: 20; visibility: hidden; top: 0px; left: 0px;">
<TABLE BORDER="0" WIDTH="30%"><TR><TD BGCOLOR="#000000">
<TABLE BORDER="0" WIDTH="100%"><TR><TD BGCOLOR="#FFFFFF">
[:blue]The event info you want to include</TD></TR></TABLE>
</TD></TR></TABLE>
</DIV>
This will cauuse the layer to be displayed in a nice black border (the table effects). There are other ways to accomplish this, but that will work.
For the links on the calendar, add the following to the <A> tag:
onMouseOver="show('[:blue]The ID you gave the layer for this event'); return true;" onMouseOut="hide('[:blue]The ID you gave the layer for this event'); return true;"
Note you can have more events in the onMouseOver and onMouseOut if you want, just make sure those are listed.
Finally, include the following at the top of the page:
[:blue]<SCRIPT LANGUAGE="JavaScript">
<!--
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
function show ( name )
{
x = currentX;
y = currentY + 20;
if ( NS4 )
{
var docWidth = document.width;
var docHeight = document.height;
var layerWidth = document.layers[name].clip.width;
var layerHeight = document.layers[name].clip.height;
if ( ( currentX + layerWidth ) >= docWidth )
{
x = ( currentX - layerWidth );
}
else
{
x = currentX;
}
if ( ( currentY + layerHeight ) >= docHeight )
{
y = ( currentY - layerHeight - 20 );
}
else
{
y=currentY+20;
}
document.layers[name].xpos = parseInt ( x );
document.layers[name].left = parseInt ( x );
document.layers[name].ypos = parseInt ( y );
document.layers[name].top = parseInt ( y );
document.layers[name].visibility = "show";
}
else
{
var docHeight = document.body.offsetHeight;
var docWidth = document.body.offsetWidth;
var layerWidth = document.all[name].offsetWidth;
var layerHeight = document.all[name].offsetHeight;
if ( ( currentX + layerWidth ) > docWidth )
{
x = ( currentX - layerWidth );
}
else
{
x = currentX;
}
if ( ( currentY + layerHeight ) >= docHeight )
{
y = ( currentY - layerHeight - 20 );
}
else
{
y = currentY + 20;
}
document.all[name].style.left = parseInt ( x );
document.all[name].style.top = parseInt ( y );
document.all[name].style.visibility = "visible";
}
}
function hide ( name )
{
if (NS4)
{
document.layers[name].visibility = "hide";
}
else
{
document.all[name].style.visibility = "hidden";
}
}
currentX = currentY = 0;
function grabEl(e)
{
if ( NS4 )
{
currentX = e.pageX;
currentY = e.pageY;
}
else
{
currentX = event.x;
currentY = event.y;
}
}
if ( NS4 )
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}
document.onmousemove = grabEl;
//-->
</SCRIPT>
Note that I didn't write all this myself, it's freely available out there in script libraries on the web. I hate taking credit where it isn't due []
https://www.ubbdev.com/threads/php/images/icons/wink.gif[/]
