ToolTip Javascript to change the tip background on birthday month

[alongside2]

I posted the following to the DD Script forum and it is a combination question as I am attempting to edit the javascript to have it change the background on the Tooltip when it is that persons birth month.

1) Script Title:Image w/ description tooltip

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/imagetooltip.htm

3) Describe problem: I am using the script fine at the moment. I am attempting to tweak it so I can have the background of the persons Tooltip background change when it is their birth month using javascript.

messages[0] = new Array('4mos.jpg','Me at 4 months old.<br>Birthday: 9/23');

I have everyone that wished to make their birth day and date public for our companies internal intranet. Any help would be greatly appreciated..

[alongside2]

For the birthMonth:

if (birthMonth == currMonth)
	{		{
			style.curBgColor = "#ff69b4";
			}
		else 	{
			style.curBgColor = '#eae3c6';
			}
}

For the currMonth:

var today=new Date();
var currMonth=today.getMonth()+1;

Now trying to figure out where to and how to have it look in the messages for the month so it will change the tip background.

Any ideas would be appreciated.

Thanks...

[alongside2]

ok in the following code that someone created for me but who due to me not thanking them soon enough will not assist in getting it to work correctly. Their coding does address my idea of having part of the tooltip change background when it is a persons birth month but now there is an issue with the tooltip appearing on the page correctly. In the original code the tooltip lines up correctly within a few paces to the right of the persons name but in the edited code it goes to far up to the top.

<script type="text/javascript">
var tipFollowMouse= true;	

	var origWidth, origHeight;
	var messages = new Array();
	messages[0] = new Array("4mos.jpg","Me at 4 months old.<br>Birthday: 9/23");
messages[1] = new Array("their.jpg","Persons Name <br>Birthday: 10/22");	
messages[2] = new Array("their.jpg","Persons Name <br>Birthday: 1/13");
messages[3] = new Array('their.jpg','Persons Name <br>Birthday: 3/25',"#FFFFFF");

if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

// ************** DO NOT EDIT BELOW THIS LINE ****************
	var currMonth = new Date().getMonth()+1;
	var midWindowWidth = 0;
	var midWindowHeight = 0;
	var msgWidth = 0;
	var msgHeight = 0;
	var nContainer = "";	
	var IE = false;
	var offX= 20;	
var offY= 12; 

	if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

	function stayHome(m){	
		
		if (IE)
			{
			 var currX = event.clientX;
			 var currY = event.clientY;
			}
		else	{
			 var currX = m.pageX;
			 var currY = m.pageY;
			}
		if (document.documentElement)
			{
			 var sL = document.documentElement.scrollLeft;	
			 var sT = document.documentElement.scrollTop;
			}
		else 	{
			 var sL = document.body.scrollLeft;	
			 var sT = document.body.scrollTop;	
			}
		if (currX > midWindowWidth)
			{			
			 if (IE){nContainer.style.left = Number(currX - msgWidth - 10 + sL) + 'px'}
			 else {nContainer.style.left = Number(currX - msgWidth - 10) + 'px'}
			}
		else	{
			 if (IE){nContainer.style.left = Number(currX + 10 + sL) + 'px'}
			 else {nContainer.style.left = Number(currX + 10) + 'px'}
			}		
		if (IE && currY >= midWindowHeight)
			{
			 nContainer.style.top = Number(currY + sT - msgHeight) + 'px';			 
			}
		if (IE && currY < midWindowHeight)
			{
			 nContainer.style.top = Number(currY + sT) + 'px'
			}
		if (!IE && currY - sT >= midWindowHeight)	
			{
			 nContainer.style.top = Number(currY - msgHeight) + 'px';
			}	
		if (!IE && currY - sT < midWindowHeight)
			{
			 nContainer.style.top = currY + 'px';
			}
	}	

	function hideImage(){

		while (nContainer.lastChild)
			{nContainer.removeChild(nContainer.lastChild)}
		document.getElementById('isFloat').style.display = 'none';
	}

	function showImage(isImg,currCaption,currItem){

		document.getElementById('isFloat').style.display = '';
		var nIMG  = document.createElement('img');
		nContainer.appendChild(nIMG);
		nIMG.setAttribute('src',isImg);
		nIMG.setAttribute('origWidth',origWidth);
		nIMG.setAttribute('origHeight',origHeight);
		var nCaption = document.createElement('div');
		var birthMonth = currCaption.substring(currCaption.lastIndexOf('/'),currCaption.lastIndexOf('/')-2);
		if (birthMonth == currMonth)
			{
			 nCaption.style.backgroundColor = '#ff69b4';
			}
		else 	{
			 nCaption.style.backgroundColor = '#ffffff';
			}
		nCaption.style.textAlign = "center";		
  		nCaption.style.padding = '10px';
  		nCaption.style.color = '#000000';
  		nCaption.style.fontFamily = 'arial';
		nCaption.style.fontSize = '12pt';
		nContainer.appendChild(nCaption);	
		nCaption.innerHTML = currCaption;
		currItem.onmouseout = hideImage;
		msgWidth = nContainer.clientWidth;
		msgHeight = nContainer.clientHeight;
	}

	function getMidWindow(){		
		
		if (document.documentElement)
			{
			 midWindowWidth = Math.round(document.documentElement.clientWidth/2);
			 midWindowHeight = Math.round(document.documentElement.clientHeight/2);				 		
			}
		else 	{
			 midWindowWidth = Math.round(document.body.clientWidth/2);
			 midWindowHeight = Math.round(document.body.clientHeight/2);				 				 		 
			}		
	}

	function initFloatImg(){

		var nBody = document.getElementsByTagName('body')[0];
		var nDiv = document.createElement('div');
		nDiv.id = "isFloat";
		nDiv.style.position = "absolute";
	      var jumpAbove= false;
		nDiv.style.top = "0px";
		nDiv.style.left = "0px";
		nDiv.style.border = "4px ridge #000080";
		nDiv.style.padding = "10px";
		nDiv.style.backgroundColor = "#ffffff"
		nBody.appendChild(nDiv);
		nContainer = document.getElementById('isFloat');
		hideImage();
		if (IE){document.onmousemove = stayHome;}
		else {addEventListener("mousemove",stayHome,false);}
		getMidWindow();
		var nMembers = document.getElementsByName('deptMember');
		for (i=0; i<nMembers.length; i++)
			{			 
			 nMembers[i].parentNode.onmouseover = function(){showImage(messages[this.id][0],messages[this.id][1],this)}
			}
	}
	
	onload = initFloatImg;
	onresize = getMidWindow;
function positionTip(evt) {
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}

	// tooltip width and height
	var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	// document area in view (subtract scrollbar width for ns)
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
	// check mouse position against tip and window dimensions
	// and position the tooltip 
	
	if ((mouseX+offX+tpWd)>winWd) 
		tipcss.left = mouseX-(tpWd+offX)+"px";
	else tipcss.left = mouseX+offX+"px";
	if ((mouseY+offY+tpHt)>winHt) 
		tipcss.top = winHt-(tpHt+offY)+"px";
	else tipcss.top = mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='hidden'",100);
}
document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

Below is a portion of the section I have placed the code on the page. (Note: I did take out any identifible information on deptMembers.

<div id="main">
<table border=0 width="75%">
 <td width=880 height=600 bgcolor=#FFF5EE style='border: 1.0pt solid #9d6e34;vertical-align:top;text-align:center;background: #FAEBD7 '>
      <br/><center><h2>Contact List</h2></center><table border="0" width="95%" cellpadding="3">
  <p><tr><td width=40%  colspan="3" align="center">For a picture of an individual move your mouse over their name and their image will appear.</td>
</tr>
    <tr>
    <td width="30%" align="left"><div id="1">Manager: <a href="#" input type="hidden" name="deptMember" class="email">Persons Name</div></a></td>
    <td width="25%" align="right"><a href="mailto:personsname@theiremail.com" class="email">personsname@theiremail.com</a></td>
    <td width="25%"> phone</td>
  </tr>
  <tr>
    <td width="33%" align="left"><div id="2">Supervisor: <a href="#" input type="hidden" name="deptMember" class="email">Persons Name</a></div>
    </td>
    <td width="25%" align="right"><a href="mailto:personsname@theiremail.com" class="email">personsname@theiremail.com</a></td>
    <td width="25%"> phone</td>
  </tr>
<tr>