Mouseover word definition using mysql

[amritags]

retrieve using mysql

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........