I need to display information about links, and the way i've gone about it is by using the mouseover event to display the div, and the mouseout event handler to hide the div. However, its not entirely how I'd like it to be. I don't want the div to disappear on mouseout, but only when I mouseover another link, with the new links information displayed. I tried removing the onmouseout event but that meant the divs never disappeared. do i need to use innerHTML?

the webpage is: http://www.alicecreates.co.uk/products.html

or here is parts of the necessary code:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;

<a href="wedding.html" onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');"><img src="images/pageheaders/products/product_wedding3.jpg"border="0" title="Click Here To See Designs"/></a>

<div id="sub2" style="width:410px; height:375px; float:left; display:none" class="style6">
<div style="width:420px; height:100px; vertical-align:top; float:left"></div>
Greeting Cards
<p>Each design shown is hand made. Envelopes are included.</p>
<p>I also design and make party invitations, Christmas cards and announcement cards, so please get in touch to arrange any order, large or small.</p>
any help/advice