Ver originales (Francés)

Animación gif al pasar el cursor

Resuelto
JCBL Mensajes publicados 7 Estado Miembro -  
spip93 Mensajes publicados 60 Estado Miembro -
Hola,
tengo una pequeña consulta que alguna vez debió haber sido abordada, pero no la encuentro en el foro a pesar de haber buscado.
Tengo un GIF animado (creado a partir de imágenes J) en una página XHTML que me gustaría activar solo cuando el ratón pase por encima.
He encontrado soluciones en CSS o con una imagen estática que se desplaza, o applets Java que cambian la imagen...
yo busco una solución en HTML o CSS que me permita hacer esto (si es posible, por supuesto)
gracias por tu respuesta
JC
Configuración: Windows XP Firefox 3.0.1

4 respuestas

  1.
    nEm3sis Mensajes publicados 722 Estado Miembro 113
     
    creas una imagen animada y una imagen no animada que contenga solo la primera imagen (de la animación) después basta con hacer 
    <img src="imagen no animada.gif" onmouseover="this.src='imagen animada.gif'" onmouseout="this.src='imagen no animada.gif'">
    4
    1. spip93 Mensajes publicados 60 Estado Miembro 10
       
      Muchas gracias, ¡todavía funciona en 2021!

      Sin embargo, tengo un pequeño problema: la animación no se inicia de inmediato. La primera vez, hace falta que el ratón permanezca un momento sobre mi botón (2-3 segundos) para que se inicie. Después, se inicia de inmediato.

      ¿Sabes por qué?
      Creo que está relacionado con el peso de la imagen GIF (el navegador necesita tiempo para cargarla), sin embargo, no es tan pesada (340 Ko)

      En cualquier caso, gracias de nuevo

      P.S.: Personalmente, si se me permite ser exigente, entre la última comilla (") y la etiqueta (>), he puesto etiquetas title="" et alt=""
      0
  2. Xil Mensajes publicados 351 Estado Miembro 257
     
    Solo para información, también es posible hacerlo en CSS: 

     <style> .hovergif { background: url(images/image_statique.gif) no-repeat; height: Xpx; width: Ypx; } .hovergif:hover { background: url(images/image_animee.gif) no-repeat; } </style>


    (Uso una etiqueta de enlace, porque IE6 no entiende la pseudoclase :hover en cualquier cosa que no sean enlaces.)
    2
  3. JCBL Mensajes publicados 7 Estado Miembro 1
     
    Gracias por tu respuesta
    JCB
    1
  4. paroledemains Mensajes publicados 3 Estado Miembro
     
    Una imagen en movimiento, la otra no y después basta con hacer...
    Sí, de acuerdo, pero ¿dónde colocar este código? ¿entre qué etiquetas?...
    Además, veo que data de 2008... ¿estos códigos siguen siendo actuales?
    0
    1. mc7474 Mensajes publicados 140 Estado Miembro 3
       
      Timbre: El código debe ir entre las etiquetas y el resto puede colocarse donde quieras. Traducción solicitada: Debes colocar la parte 
       
      <style> 
      .hovergif {
       background: url(images/image_statique.gif) no-repeat;
       height: Xpx;
       width: Ypx;
      }

      .hovergif:hover {
       background: url(images/image_animee.gif) no-repeat;
      }
      </style>
      de Xil, entre las etiquetas <head></head>

      y el código, tú lo pones donde quieras 

      <a class="havergif"></a>
      Zorloni Maxime
      0