Hi,
I've been reading through the book 'Beginning Javascript' and I was hoping to re-create the drop-down menu system as shown in Chapter 13.
Because of the way that I have designed my website, I am placing the images, under which the drop-down menus appear, inside a row of a table.
At the moment, I have done this by encasing the images inside a <div> tag inside a <td>, thus:
Code:
<table>
<tr>
<td>
<div onmouseover="document_onmouseover(event)" onmouseout="document_onmouseout(event)">
<script language="javascript">
document.write(createMenu('Home', homeMenuItems))
</script>
<a href="index.html">
<IMG id="HomeMenuImage" SRC="Pics/Banners/home.jpg" border="0"
style="position:absolute;left:55px;top:113px;"
onmouseover="return showMenu(document.getElementById('HomeMenuDiv'), event)"
onmouseout="return hideMenu(document.getElementById('HomeMenuDiv'),4,event)">
</a>
</div>
</td>
</tr>
</table>
This method of doing it works in IE6.0 and Netscape Browser 8.1 (running in IE mode), however in Firefox based browsers (including Netscape 7.1) the menus do not appear at all.
Does anyone know how I can edit my code in order for it to work? The rest of the JavaScript code is unchanged from the example in the book.
Thanks :),
Dan