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.