Text window for Mouseover Event handler
<p>I'm a novice having problems with a program.  The HTM has coordinates for a picture displayed on the website, and a seperate Javascript file named brain.js to display the text when the picture is mouseover.  There are four quadrants and four sets of title and summary remarks to display. The idea is to mouse over a coord, whiel holding the mouse over the area, a window displays information about the area, then move over another area the original display clears and a new display is shown.  </p>

<p>Most of my code works but I'm having trouble with the setupFrame Function transferring the index from my setupFrame function to the writeFrame function and cycling as the mouse is moved to a different coordinate on the picture, can anyone tell me how to do this?</p>

<p>Here is my Script file:</p>

<pre><code>function addEvent(object, evName, fnName, cap) {  
   if (object.attachEvent)   
       object.attachEvent("on" + evName, fnName);  
   else if (object.addEventListener)   
       object.addEventListener(evName, fnName, cap);  
}

addEvent(window, "load", setupFrame, false);  
var index;  
var allAreas = new Array();    
function setupFrame() {  
   allAreas = document.getElementsByTagName("area");  
   for (var i = 0; i &lt; allAreas.length; i++) {  
      addEvent(allAreas[i], "mouseover", writeFrame);  
      addEvent(allAreas[i], "mouseout", clearFrame);  
      allAreas.index = [i];  

   }  
}

function writeFrame() {

var areaIndex = this.index;  
   var frameWin = document.getElementById("parts");  
   var frameDoc = frameWin.contentWindow.document;  
   frameDoc.getElementById("docTitle").innerHTML = title[areaIndex];  
   frameDoc.getElementById("docSummary").innerHTML = summary[areaIndex];  
}

function clearFrame() {  
   var areaIndex = this.index;  
   var frameWin = document.getElementById("parts");  
   var frameDoc = frameWin.contentWindow.document;  
   frameDoc.getElementById("docTitle").innerHTML = "";  
   frameDoc.getElementById("docSummary").innerHTML = "";  
}
</code></pre>
