The original book example has an xml list of books and an ajax request to insert all of the images from it.
The assignment says the following:
Modify the example so that every time the mouse hovers over an image, the book's title (which is in that same xml file) is displayed below the image.
I am able to pull the title from the xml file. The problem is with placing it in the right td. I am missing something along the code somewhere. Please give me a hint in the right direction.
Here is my code. I only have the last title show up in the right place no matter which image I am hovering over.
Code:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Pulling Images onto the Page </title>
<style type = "text/css">
	td { padding: 4px; width: 90px;}
	img { border: 1px solid black }
</style>
<script type = "text/javascript" language = "Javascript">
	var asyncRequest;
	function getImages( url )
	{
		try
		{
			asyncRequest = new XMLHttpRequest();
			asyncRequest.onreadystatechange = processResponse; 
			asyncRequest.open( 'GET', url, true );
			asyncRequest.send( null );
		}
		catch ( exception )
		{
			alert( 'Request Failed' );
		}
	}
	function processResponse()
	{
		if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 && 
			asyncRequest.responseXML )
		{
			clearTable();
			var covers = asyncRequest.responseXML.getElementsByTagName(
				"cover" )
			var baseUrl = asyncRequest.responseXML.getElementsByTagName( 
				"baseurl" ).item( 0 ).firstChild.nodeValue;
			var output = document.getElementById( "covers" );
			var imageTable = document.createElement( 'table' );
			var tableBody = document.createElement( 'tbody' );
			var rowCount = 0;
			var imageRow = document.createElement( 'tr' );
			var titleRow = document.createElement( 'tr' );
			for ( var i = 0; i < covers.length; i++ )
			{
				var cover = covers.item( i );
				var image = cover.getElementsByTagName( "image" ).
					item( 0 ).firstChild.nodeValue;
				var title = cover.getElementsByTagName( "title" ).
					item( 0 ).firstChild.nodeValue;

				var imageCell = document.createElement( 'td' );
				var titleCell = document.createElement( 'td' );
				var imageTag = document.createElement( 'img' );
				imageTag.setAttribute( "src", baseUrl + escape( image ) );
				titleCell.setAttribute("id", title);
				imageCell.appendChild( imageTag );
				imageRow.appendChild( imageCell );
				titleRow.appendChild( titleCell );
				rowCount++;

				if ( rowCount == 6 && i + 1 < covers.length )
				{
					tableBody.appendChild( imageRow );
					tableBody.appendChild( titleRow );
					imageRow = document.createElement( "tr" );
					titleRow = document.createElement( "tr" );
					rowCount = 0;
				}
					imageTag.onmouseover = function(){document.getElementById(title).innerHTML = title;};

					imageTag.onmouseout = function(){document.getElementById(title).innerHTML = '';};
			}

			tableBody.appendChild( imageRow );
			tableBody.appendChild( titleRow );
			imageTable.appendChild( tableBody );
			output.appendChild( imageTable );
		}
	}
	function clearTable()
	{
		document.getElementById( "covers" ).innerHTML = '';
	}
	</script>
</head>
<body>
	<input type = "radio" checked = "unchecked"
		name = "Books" value = "all" 
		onclick = 'getImages( "all.xml" )'/> All Books 
	<input type = "radio" checked = "unchecked"
		name = "Books" value = "simply" 
		onclick = 'getImages( "simply.xml" )'/>  Simply Books 
	<input type = "radio" checked = "unchecked" 
		name = "Books" value = "howto"
		onclick = 'getImages( "howto.xml" )'/> How to Program Books 
	<input type = "radio" checked = "unchecked"
		name = "Books" value = "dotnet"
		onclick = 'getImages( "dotnet.xml" )'/> .NET Books 
	<input type = "radio" checked = "unchecked" 
		name = "Books" value = "javaccpp"
		onclick = 'getImages( "javaccpp.xml" )'/> Java, C, C++ Books 
	<input type = "radio" checked = "checked"
		name = "Books" value = "none"
		onclick = 'clearTable()'/> None 
	<br/>
	<div id = "covers"></div>
</body>
</html>