Al pasar el ratón por link abrir ventana y quitarlo desaparecer ventana

davilin · #1 (**permalink**) 24/01/2008, 13:16

Buenas,
estoy programando una web en php%mysql pero la consulta que tengo nosé si tendrá mucha relación con esto.
Me he fijado en varias web que hay links en los cuales pasar el ratón por encima y se te abre una ventana y al quitar el raton del link desaparece la ventana, me gustaría aplicarlo en mi página web.

- Ejemplo:
- http://www.adslayuda.com/wag54g-habi...so_remoto.html

- En esta línea:
- Vamos a explicar cómo se configura el router para permitir el acceso al mismo desde Internet.

Si pasas el ratón por encima de router o Internet sale a lo que me refiero.

Haber si alguien me pudiese guiar un poco, lenguaje que esta programado si hay script para ello... me es de mucha utilidad
Muchisimas Gracias

EDITO: Con Dreamweaver, puedo hacer que al pasarlo por encima con (MouseOver) se habrá popup, pero no quitando el raton del link desaparezca

eits · #2 (**permalink**) 24/01/2008, 13:38

usa los eventos onMouseOver y onMuoseOut.

saludos.

clustering · #3 (**permalink**) 24/01/2008, 14:18

Tienes que hacer como dice eits.. con esos eventos pero no con popus si no con divs.. es la manera mas sencilla... le colocas un id al div y al perder foco eliminas sencillamente ese div... si usas DOM es mucho mas sencillo.. al crear el div.. crear en la posicion ejem.

Código:

function VentanaFlotante(URL, x, y){
        var div_fl = document.createElement('DIV');
        div_fl.style.position = 'absolute';
        div_fl.id = 'Miventana';
        div_fl.style.left = tempX + 'px';
        div_fl.style.top = tempY + 'px';
        div_fl.style.width = x + 'px';
        div_fl.style.height = y + 'px';
        document.body.appendChild(div_fl);
}

Con esa funcion creas un div flotante en la posicion del raton.. que son tempX y tempY para sacar esa posicion hago con

Código:

var IE = document.all ? true : false;
if (!IE) {
    document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e){
    if (IE) { //para IE
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    }
    else { //para netscape
        tempX = e.pageX;
        tempY = e.pageY;
    }
    if (tempX < 0) {
        tempX = 0;
    }
    if (tempY < 0) {
        tempY = 0;
    }
    return true;
}

talvez no es de las mejores mi codigo.. pero de esa manera hago yo..

ah y para quitarlo tendrias que usar

Código:

 document.body.removeChild('Miventana');

Hasta luego

davilin · #4 (**permalink**) 24/01/2008, 14:32

Muchas Gracias por las contestación, pero qué decir que no tengo npi de JavaScript, por lo tanto no "entiendo" lo que hace cada línea de codigo y no sé como ordenar ese código que me diste.
Muchas Gracias clustering i eits

clustering · #5 (**permalink**) 24/01/2008, 15:00

Aqui te muestro funcionando.. y trate de explicarlo un poco.. creo que mi anterior codigo tenia algunos errores ya que la informacion en ese div yo cargo con ajax.. pero este funciona pasando como parametrol..

Saludos

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript1.2" type="text/javascript">
var IE = document.all ? true : false;
if (!IE) {
    document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
//esta funcion no necesitas entender solo asigna la posicion del raton a tempX y tempY
function getMouseXY(e){
    if (IE) { //para IE
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    }
    else { //para netscape
        tempX = e.pageX;
        tempY = e.pageY;
    }
    if (tempX < 0) {
        tempX = 0;
    }
    if (tempY < 0) {
        tempY = 0;
    }
    return true;
}
function VentanaFlotante(mensaje, x, y){
        //creo el objeto div
        var div_fl = document.createElement('DIV');
        //le asigno que su posicion sera abosoluta
        div_fl.style.position = 'absolute';
        //le asigno el ide a la ventana
        div_fl.id = 'Miventana';
        //digo en que posicion left y top se creara a partir de la posicion del raton tempx tempy
        div_fl.style.left = tempX + 'px';
        div_fl.style.top = tempY + 'px';
        //asigno el ancho del div pasado por parametro
        div_fl.style.width = x + 'px';
        //asigno el alto del div pasado por parametro
        div_fl.style.height = y + 'px';
        //digo con css que el borde sera de grosor 1px solido y de color negro
        div_fl.style.border = "1px solid #000000";
        //asigno el color de fondo
        div_fl.style.backgroundColor = "#cccccc";
        //el objeto añado a la estrutura principal el document.body
        document.body.appendChild(div_fl);
        //el mensaje pasado por parametro muestro dentro del div
        div_fl.innerHTML = mensaje;
}
function quitarDiv()
{
//creo el objeto del div
var mv = document.getElementById('Miventana');
//elimino el objeto
document.body.removeChild(mv);
}
</script>
</head>

<body>
<a href="http://www.google.com.bo" onmouseover="javascript: VentanaFlotante('Informacion de google', 200, 30)" onmouseout="javascript: quitarDiv();">google</a>
</body>
</html>

davilin · #6 (**permalink**) 24/01/2008, 15:29

Muchas Gracias Clustering eres un Crack, eso es lo que buscaba, ahora le añadrié una imagen y algun texto.
Muchas gracias
EDITO: SI le quisiera dar formato al texto y añadir alguna imagen habría que hacer de alguna forma especial? Y si lo quisiera hacer con un pop-up ?

davilin · #7 (**permalink**) 24/01/2008, 15:43

Me explico:
- En vez de poner un color poner imágen de fondo:
div_fl.style.backgroundColor = "#cccccc";

- Insertar imagen en texto
<a href="http://www.google.com.bo" onmouseover="javascript: VentanaFlotante('Informacion de google', 200, 30)" onmouseout="javascript: quitarDiv();">google</a>

aloqui · #8 (**permalink**) 24/01/2008, 16:14

Par lo que quieres, yo te recomiendo la libreria overlib de javascript.

davilin · #9 (**permalink**) 25/01/2008, 08:35

Gracias le echaré un ojo