Need help with variable value calls

[iPixel]

Ok lets get this party going !

I've got this external dictionary.js file

<script src="dictionary.js" type="text/javascript"> </script>

it contains the following :

var BTU = "BTU : British Thermal Unites";
var CFM = "CFM : Cubic Feet per Minute";
var RPM = "RPM : Rotations Per Minute";
var Entry_Rollers = "Testing Two Word Variables";

 

now on the page that calls the file things go like this.

 

Ive got 2 hidden layers :

<div id="layer1"></div>
<div id="layer2"></div>

 

and i activate them using a link !

<a href="#" onMouseOver="ShowLayer('BTU')" onMouseOut="HideLayer('layer')">BTU</a>

 

I show the Div tag tooltips using the following function :

function ShowLayer(content)
{
// Check window width in order to show the correct layer - this is so the pointer points correctly.
Page = document.body.clientWidth;

// If width of window minus tooltip width is greater then the tooltip width show layer1 else show layer2
if (Page - mouseX > 300)
{
	layername = "layer1";
}
else
{
	layername = "layer2";
}
//---------------------------------------------------------------------------
	if(layername != "")
	{
		document.getElementById(layername).style.visibility="visible";
		PositionLayer(layername);
	}
//---------------------------------------------------------------------------

	var La = '<table border="0" cellpadding="0" cellspacing="0" width="250">';
	var Lb = '<tr><td><img src="images/spacer.gif" width="8" height="1" border="0"></td><td><img src="images/spacer.gif" width="234" height="1" border="0"></td><td><img src="images/spacer.gif" width="8" height="1" border="0"></td><td><img src="images/spacer.gif" width="1" height="1" border="0"></td></tr>';
	var Lc = '<tr><td colspan="3"><img name="TechDefBlip_r1_c1" src="images/asd_r1_c1.gif" width="250" height="26" border="0"></td><td><img src="images/spacer.gif" width="1" height="26" border="0"></td></tr>';
	var Ld = '<tr><td background="images/Tech Def Blip_r2_c1.gif" height="100%"></td><td background="images/Tech Def Blip_r2_c2.gif" height="100%"><p style="font-size: 13px;">';
   		// txt goes here
	var Le = '</p></td><td background="images/Tech Def Blip_r2_c3.gif" height="100%"></td><td><img src="images/spacer.gif" width="1" height="90" border="0"></td></tr>';
	var Lf = '<tr><td colspan="3"><img name="TechDefBlip_r3_c1" src="images/Tech Def Blip_r3_c1.gif" width="250" height="15" border="0"></td><td><img src="images/spacer.gif" width="1" height="15" border="0"></td></tr>';
	var Lg = '</table>';

	layer1.innerHTML=La + Lb + Lc + Ld + content + Le + Lf + Lg;
}

 

My problem lies withing the

layer1.innerHTML=La + Lb + Lc + Ld + content + Le + Lf + Lg;

 

This basically fills the div tags with the content.

At first i thought that just saying "content" in that line will show the value passed by the link which is BTU in this case and that it would trick the script to think its calling a variable BTU which exists in dictionary.js and has the value "BTU : British Thermal Units" assigned to is.

 

This is not working the only thing the div displays is BTU and it wont display the value of the variable BTU but rather the variable of content which is BTU.

 

How can i get this working.

 

Thanks!

[iPixel]

additionally if i say BTU instead of content in

 

layer1.innerHTML=La + Lb + Lc + Ld + content + Le + Lf + Lg;

 

so it would look like

 

layer1.innerHTML=La + Lb + Lc + Ld + BTU+ Le + Lf + Lg;

 

Then it works, the only problem is "content" will contain different values so i have to use it to some degree.