I have created a division within a HTML file, using the <div> tag, with the id mnu. I want the HTML code within this division to change when the mouse cursor is placed over the division. Therefore I have added the onmouseover event listener to the division, which calls a JavaScript function called shwMnu when this event is detected. The code that I have used for the function is shown below:

function shwMnu()
{
var mnu="<table><tr><td><img src='webPageFiles/btn2.gif'></td></tr></table>";
mnu.innerHTML=mnu;
}

The problem is that when the HTML code is changed, instead of the image that I want to appear (i.e. webPageFiles/btn2.gif) I get the box with the red x in it, therefore it would appear that my browser cannot locate the image. I have found that if I place the HTML file in the same directory as the image, so that I can remove the 'webPageFiles\' folder path from the image src attribute then the web-page works as I would like.

You should also note that the JavaScript file is located in the same directory as the image, i.e. one level below the HTML file. Although I don't think this makes any difference.

THANX in advance,

TTAYO