onmouse

[JUMASOL]

Hola

Tengo este script:

<script type=text/javascript>$(document).ready(function(){$("#ventan a-aviso").slideDown(1000)});</script>

Lo que hace es que aparezca una ventana con un aviso a usuarios con un efecto jQuery producto de un archivo que no viene al caso.

Cuando se entra en una página de la web, aparece este aviso de forma automática, y funciona perfectamente.

Ahora lo que quiero es traerlo con un evento onmouse en relación a otro elemento.

Se trata de que cuando alguien pase el cursor por un enlace con intención de pulsarlo salte ese aviso diciendo que no está disponible por x razones.

Concretamente, cuando se pase sobre una id #servicio-2, se produzca un slideshow de #ventana-aviso.

He intentado combinar el script con

onmouseover="document.getElementById('ventana-aviso)

Pero no sé como relacionar el onmouseover con #servicio-2

El tema es que ese javascript no va a ir junto con el div en sí, sino situado en el head de la página.

Es decir, en el body de la página están los botones, y entre ellos:

<div id="servicio-2>Servicios 2</div>

Pero el javascript va a ir en el head de la página.

¿Me podéis ayudar?

[JUMASOL]

Como salvedad, os diré que he intentado meterlo en el div del enlace en sí:

<a id="boton-2" onmouseover="document.getElementById('ventana-aviso').slideDown(1000);" href="Servicio-2">Servicio 2</a>

y no me funciona.

Es decir, el botón funciona, pero el aviso (el id ventana-aviso) no parece.

[David]

Más bien puedes hacer esto en el head:

Código Javascript:

$(document).ready(function() {
    $("#boton-2").mouseover(function() {
        // mostrar el aviso. Tener en cuenta que document.getElementById no es lo mismo que $
    });
});
 

[JUMASOL]

Lo he puesto así, y no me funciona.

<script type=text/javascript>

$(document).ready(function() {
$("#boton-2").mouseover(function() {
("#ventana-aviso").slideDown(1000)
});
});

</script>

[David]

Debe ser:

Código:

$("#ventana-aviso").slideDown(1000);

[JUMASOL]

Sí, es cierto David. Ahora sí funciona. Estoy muy verde.

El problema ahora es que se queda el aviso. No desaparece.

De lo que se trata es de que funcione como un menú dropdown. Que permanezca mientras se está sobre el botón o sobre el mensaje pero al quitarlo del botón o del aviso desaparezca.

Voy a probar con el evento mouseout.

[JUMASOL]

Sí, he conseguido hacerlo con mouseout pero ahora hay otro problema.

Se trata de que en el aviso hay un enlace hacia una sección alternativa con una serie de indicaciones.

Ahora bien, cuando quitas el mouse del boton-2, el aviso desaparece, con lo cual no da oportunidad a pulsarlo.

Se trata de que el aviso se quite:

1. Al quitar el mouse del botón sin pasar por el aviso pero que permanezca si se coloca sobre el aviso (está a continuación del botón).

2. Cuando se retire el mouse del aviso.

He intentado esto, pero no me funciona:

<script type=text/javascript>
$(document).ready(function() {
$("#boton-2").mouseover(function() {
$("#ventana-aviso").slideDown(1000)
});
});
$(document).ready(function() {
$("#boton-2").mouseout(function() {
$("#lista-en-principal").slideUp(1000)
});
});
$(document).ready(function() {
$("#boton-2").mouseover(function() {
$("#ventana-aviso")
});
});
$(document).ready(function() {
$("#boton-2").mouseout(function() {
$("#ventana-aviso").slideUp(1000)
});
});

¿Se os ocurre algo?

Gracias.