Ayuda con Tooltip!!!!

[srubia]

Hola amigos:

tengo hecha esta pagina http://www.comexsantiago.gov.ar/Oferta.aspx

este es script que utilizo para mostrar los tooltip

Código:

<script language="javascript" type="text/javascript">
    // ********** Parte 1: Inicializar valores
      MouseX=0;
      MouseY=0;
    // ********** Parte 2: Funciones
    
      // Función para capturar el evento "Mouse Move" (al moverse el mouse)
      function init() {
            document.onmousemove = getXY;
      }
      // Función que actualiza la posición del ratón
      function getXY(e) {
        MouseX = (window.Event) ? e.pageX : (event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft);
        MouseY = (window.Event) ? e.pageY : (event.clientY + document.documentElement.scrollTop + document.body.scrollTop);         

      }
      
      // Función que aparece y desaparece el cuadrito de la ayuda
      function  hint( id, status ) 
      {
          var htmObj = document.getElementById(id)
          if(!htmObj)  return ;
          htmObj.style.visibility = status ? 'visible' : 'hidden';
          htmObj.style.top = (MouseY) + 'px';
          htmObj.style.left = (MouseX) + 'px';
      }
     /* ************* IMPORTANTE, ÉSTO HACE QUE FUNCIONE ******* */ 
    window.onload= function() { 
    init(); 
} 
 
      
</script>
  <!--  //********** Parte 3: Estilos -->
  <style type="text/css">
       
    .hint {
      background-color: #FFFFFF;
      font-family: arial;
      visibility: hidden;
      font-size: 9pt;
      position: absolute;
      padding: 1px 2px;
      border: 1px solid #000000;
      color: #000000;
      width: 400px;
      }
  </style>

por otro lado creo los div que mostrare en los tooltip:

Código:

<div id="algodon" class="hint">
  <table border="0">
  <tr>
    <td style="width: 153px" ><img alt="algodón" src="images/productos/algodon.jpg" width="161" height="140" 
style="border-right: black thin solid; border-top: black thin solid; 
border-left: black thin solid; border-bottom: black thin solid" /></td>
    <td style="text-align: left; width: 232px;" valign="top" >
        <br />
        <ul>
            <li>Fibra : de c1/2 a d ½</li><li>Hilo</li><li>Tela: toalla de algodón</li></ul>
        <br />
</td>
  </tr>
</table>

y por otro lado los convoco desde un link:

Código:

<a href="#" onmouseover="javascript:hint('algodon',1)" 
onmouseout ="javascript:hint('algodon',0)">Algodón</a>

Espero que se entienda lo que hago

Bueno el problema en el que me encuentro es que:
- me piden que dentro del div donde describo la imagen que pongo agregue un link para contacto, el problema es que si saco el puntero del link el div desaparece y nunca puedo hacer clic en el link.

Les cuento que soy nuevita en esto de javascript y espero que alguien me pueda ayudar a modificar lo que ya hice y que no sea complicado (si no es mucho pedir)

Espero su ayuda, desde ya muchas gracias por leerme.