I need to place an icon called "dots.gif" in the following Pacman Javascript source, but seem to be having diffculties in doing so- I cannot get the dots to appear within the web browser. Could anyone suggest, how I might go about placing icons within this Javascript code.

Pacman


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pac-Man Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
<!--
var nRows = 22;
var nCols = 22;



myBoard= [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0,
0,0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,
0,0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,
0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,
0,0,1,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,1,0,0,0,
0,0,1,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,1,0,0,0,
0,0,0,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,1,1,0,1,1,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,1,1,1,1,1,1,0,1,0,0,0,0,0,0,
0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,0,0,
0,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0,
0,0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,0,
0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,
0,0,0,1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,0,0,0,0,
0,0,1,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,1,0,0,0,
0,0,1,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1,0,0,0,
0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

function setup(id) {
//where's the image now?: [X=column, Y=row from top/left=0/0 OF THE ARRAY]
X = 10; Y = 12; //global [1st allowed position]
//set up the global cells array:
var obj = document.getElementById(id);
tdArray = obj.getElementsByTagName('td'); //global
//draw the first image into the empty table
insertImage(X,Y);
//assign the key handler
document.body.onkeydown = handleKey2;
//interval 0.2 second = 200 ms
interval = 200; //global!
//movement every interval is
dX = 0; dY = 0; //global!
//arrange to call the movement function every interval
//NB: The new global variable moverSI can be passed to clearInterval.
moverSI = window.setInterval('moveIt();', interval);
}


function insertImage(X,Y) {
var i = nRows*Y + X;
//alert('X/Y=' + X + '/' + Y + '=' + i);
obj = tdArray[i];
//create an image tag
var newNode = document.createElement('img');
//give it the right SRC attribute
newNode.setAttribute('src', (myBoard[Y*nCols + X] == 1)?'pacmanleft.gif':'pacmanright.gif');
//replace the cell contents with it
if (obj.hasChildNodes()) removeChildren(obj);
obj.appendChild(newNode);
}

//remove the children of an object
function removeChildren(obj) {
while (obj.hasChildNodes()) obj.removeChild(obj.firstChild);
}

//move the image in the direction set by dX/dY
function moveIt() {
//increment/decrement X/Y and make sure we're in the table still
var newX = X + dX;
var newY = Y + dY;
if ((newX<0) || (newX>(nCols-1)) || (myBoard[nCols*newY + newX] == 0)) dX = 0; //no further movement in this direction
if ((newY<0) || (newY>(nRows-1)) || (myBoard[nCols*newY + newX] == 0)) dY = 0; //no further movement in this direction
//alert(myBoard[nCols*newY + newX] + ' X/Y=' + X + '/' + Y + ' + ' + dX + '/' + dY);
//insert the image in the new position
if (dX != 0 || dY != 0) {
//remove the image from the OLD X/Y position
removeChildren(tdArray[nCols*Y + X]);
//put it into the new position
insertImage(newX,newY);
//store the new position
X = newX; Y = newY;
}
}

//handle keypresses - move the image
function handleKey2() {
//e is the event
var e = window.event;
if (e.type == 'keydown' && (e.keyCode == 27 || (e.keyCode >= 37 && e.keyCode <= 40))) {
//change dX/dY according to the key pressed
switch(e.keyCode) {
case 37: //left (subtract one from the column)
dX = -1;
dY = 0;
break;
case 38: //up (subtract one from the row)
dX = 0;
dY = -1;
break;
case 39: //right (add one to the column)
dX = 1;
dY = 0;
break;
case 40: //down (add one to the row)
dX = 0;
dY = 1;
break;
default:
dX = 0;
dY = 0;
break;
}
return false; //stop the default action (if any)
} //end of if test
return true;
}

//-->
</script>

<style type="text/css">
#board td { height: 25px; width: 25px; text-align: center; }
</style>
</head>
<body onload="setup('board');">
<h1 align="center">Pac-Man</h1>
<div style="text-align: center; margin-left: auto; margin-right: auto;">
<table style="border: 5px solid black;" cellspacing="0px" id="board">
<script language="JavaScript" type="text/javascript">
for (var row=0; row<nRows; row++) {
document.write('<tr>'); //open row
for (var col=0; col<nCols; col++) {

switch (myBoard[row*nCols + col]) {
case 0:
var colour = 'black';
break;
case 1:
var colour = 'gray';
break;
case 2:
var colour = 'white';
break;
}
document.write('<td style="text-align:center;background-color:', colour, ';">');
document.write('&nbsp;</td>');
}
document.write('</tr>');
}
</script>
</table>


</div>
</body>
</html>