Mouseover word definition using mysql

[amritags]

Hi everyone,

This is my code:----

function getDefinition(currWord)
{
var nDefinition = "";
for (i=0; i<wordList.length; i++)
{
if (wordList == currWord)
{
nDefinition = definitionList;
}
}
return nDefinition;
}

function showDefinition(defineWord)
{
var toolTip = getDefinition(defineWord);
var tipTxt = toolTip.split("|");
tipContainer.style.display = '';
for (i=0; i<tipTxt.length; i++)
{
tipContainer.appendChild(document.createTextNode(tipTxt))
tipContainer.appendChild(document.createElement('br'))
}
}

function getMidWindow()
{
if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
midWindow = document.documentElement.clientWidth/2;
}
else
{
midWindow = document.body.clientWidth/2;
}
}

function initContext()
{
var rawText = document.getElementById('subjectMatter');
var workText = rawText.innerHTML;
workText = workText.replace(/(\<p\>)/gi,"$1 ");
for (i=0; i<wordList.length; i++)
{
var currWord = new RegExp("([\\s\\r\\n]+"+wordList+"[\\s,;.:?!]+)",'gi')
workText = workText.replace(currWord,"<span class='word'>$1<\/span>");
}
rawText.innerHTML = workText;
}

function initTip()
{
tipContainer = document.getElementById('nFloat')
tipContainer.style.display = 'none';
if (!IE){document.captureEvents(Event.mousemove)}
document.onmousemove=stayHome;
getMidWindow();
}

function init()
{
initContext();
var nBody = document.getElementsByTagName('body')[0];
var tipBox = document.createElement('div');
tipBox.className = "definition";
tipBox.id = "nFloat";
nBody.appendChild(tipBox);
initTip();
var nWords = document.getElementById('subjectMatter').getElementsByTagName('span');
for (i=0; i<nWords.length; i++)
{
nWords.onmouseover = function()
{
showDefinition(this.firstChild.data.toLowerCase().replace(/^\s+|\s+$/,"").replace(/[^a-zA-Z-\s]/g,"").replace(/^\s+|\s+$/,""));
}
nWords.onmouseout = function()
{
hideDefinition();
}
}
}

function parseGlossary()
{
var nList = GlossaryResponse.getElementsByTagName('word');
var nDef = GlossaryResponse.getElementsByTagName('definition');
for (i=0; i<nList.length; i++)
{
wordList = nList.firstChild.data;
definitionList = nDef.firstChild.data;
}
init();
}

function createGlossary()
{
var GlossaryRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
GlossaryRequest.onreadystatechange = function()
{
if (GlossaryRequest.readyState == 4)
{
if (GlossaryRequest.status == 200)
{
GlossaryResponse = GlossaryRequest.responseXML;
parseGlossary();
}
else {
alert('Error Glossarymine.xml File '+ GlossaryRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
GlossaryRequest.open("GET", "Glossarymine.xml"+forceGET, true);
GlossaryRequest.send(null);
}

onload=createGlossary;
onresize=getMidWindow;
</script>

it works fine with xml file.But instead of xml i want to use mysql db.in that i have word and definition columns.When hovered over a word that is stored in database ,its definition should come from the database how can this code be modified instead of xml file.I tried a lot.Please someone help........