Comunidad de diseño web y desarrollo en internet online

como realizar un mouseover y mouseout en jquery

Citar            
MensajeEscrito el 02 Sep 2011 12:53 pm
Buenas,

antes que nada daros las gracias por leer este post.

Resulta que hace poco que empecé con esto de jquery, y queria realizar el siguiente efecto.

Quiero que al posicionarme en una imagen, pongamos cuyo id se llama imag, cambie una clase a una etiqueta "a" cuyo id se llama "enla". Yo he usado lo siguiente, pero inmagino que está mal, porque no se produce ningun cambio de clase ni nada.

intento que al posicionarme con el raton en imag(imagen) cambie la clase de enla que es el id de la "a" de .inactivo a .activo.

Código :


<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script> 
$(document).ready(function () {

$("imag").mouseover(function () { 
$("#enla").addClass("activo"); 
$("#enla").removeClass("inactivo"); 
}); 

$("imag").mouseout(function () { 
$("#enla").addClass("inactivo"); 
$("#enla").removeClass("activo"); 
}); 

});

</script> 


en el html tengo lo siguiente:

<img id="imag" src="imagen/img1.jpg" width="191" height="402" alt="imagen"  />
<a id="enla" href="#" class="inactivo">hola</a>





Alguién sabría porque no hace nada.. :(

Muchas gracias
Un saludo

Por rubenweb

10 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 02 Sep 2011 02:13 pm
¿Por qué estás cargando dos veces JQuery?.
Sobre el problema que tienes no puedo decir nada porque el código que has posteado está incompleto (falta el CSS).

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 02 Sep 2011 03:51 pm
Hola,
tienes que crear primero en css los estados de cada botón.
luego usas el siguiente código jquery:

Código Javascript :

<script type="text/javascript">
   $(function() {
      // on mouse over
      $("ul#menu span").hover(function () {
         // animate opacity to full
         $(this).stop().animate({
            opacity: 1
         }, 'slow');
      },
      // on mouse out
      function () {
         // animate opacity to nill
         $(this).stop().animate({
            opacity: 0
         }, 'slow');
      });
   });

prueba con esto a ver si das con la solución.

Dinki

Por Dinki

6 de clabLevel



 

msie
Citar            
MensajeEscrito el 05 Sep 2011 12:02 pm
Gracias por las respuestas,

en cuanto al css, es cierto no lo puse, pero estaba creado, era con opacidad.

y En cuanto al código de abajo, ese me funciona bien. Muchas gracias a los dos.

También averigué esta mañana porqueé no funcionaba el mio y resulta que tenía que poner una "#" delante de img, ya que es un id de la imagen, y por lo tanto no reconocía cuando pasaba por encima.


Muchas gracias de nuevo.

Un saludo

Por rubenweb

10 de clabLevel



Genero:Masculino  

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.