View original (French)

Gif animation on hover

Solved
JCBL Posted messages 7 Status Member -  
spip93 Posted messages 60 Status Member -
Hello,
I have a small request that must have been discussed at some point, but I couldn't find it on the forum even though I searched.
I have an animated GIF (made from images J) on an XHTML page that I would like to activate only when the mouse passes over it.
I found solutions in CSS where one static image is offset, or Java applets that change the image..
I’m looking for an HTML or CSS solution that allows me to do this (if possible that goes without saying)
thanks for your response
JC
Configuration: Windows XP Firefox 3.0.1

4 answers

  1.
    nEm3sis Posted messages 722 Status Member 113
     
    You make an animated image and a non-animated image that contains only the first frame (from the animation)

    then just do 
    <img src="imagen non animé.gif" onmouseover="this.src='image animée.gif'" onmouseout="this.src='image non animée.gif'">
    4
    1. spip93 Posted messages 60 Status Member 10
       
      Thank you very much, it still works in 2021!!

      However, I have a small issue: the animation does not start immediately. The first time, you have to hover over my button for a moment (2-3 seconds) for it to start. Then it starts immediately.

      Do you know why ?
      I think it’s related to the GIF image size (the browser needs time to load it), however, it isn’t that heavy (340 KB)

      Anyway, thanks again

      P.S: Personally, if I may be nitpicky, between the last quote (") and the tag (>), I added title="" and alt="" tags
      0
  2. Xil Posted messages 351 Status Member 257
     
    Just for information, it is also possible to do it in 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>


    (I use a link tag, because IE6 does not understand the :hover property on anything other than links.)
    2
  3. JCBL Posted messages 7 Status Member 1
     
    Thank you for your reply
    JCB
    1
  4. paroledemains Posted messages 3 Status Member
     
    An animated image, the other one not animated, and then you just have to do ...
    Yes, okay, but where to put this code? between which tags?...
    Moreover, I see that it dates from 2008... are these codes still current?
    0
    1. mc7474 Posted messages 140 Status Member 3
       
      You must place the part 
       
      <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>
      from Xil, between the tags <head></head>

      and the code, you put it wherever you want 

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