467,163 Members | 943 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,163 developers. It's quick & easy.

How to make an animated gif to play only when the mouse hovers over it?

YarrOfDoom
Expert 1GB
I guess the title says all. I don't care if it jumps back to frame one if you get your mouse off it.

Yarr
Jan 11 '08 #1
  • viewed: 4513
Share:
2 Replies
You could use an anchor with a background image, and the :hover selector.
Example below.
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5.         <title>GIFFY!</title>
  6.  
  7. <style type="text/css" media="screen">
  8.  
  9.     a#giffy             { background-image:url('img/static.gif'); width:30px; height:30px}
  10.     a#giffy:hover     { background-image:url('img/animated.gif'); }
  11.     a#giffy span     { visibility:hidden; }
  12. </style>
  13.     </head>
  14.     <body>
  15.  
  16.         <a id="giffy" href="#"><span>example</span></a>
  17.  
  18.     </body>
  19. </html>
  20.  
Jan 12 '08 #2
YarrOfDoom
Expert 1GB
My excuses to garrow for this late reply. For some reason it didn't appear in my subscriptions-list back then, and I had completely forgotten about it. I've used this code now, but it seems the height and width aren't doing anything. I want my images to be complete tough, and it's always nice if you don't have to do a workaround (inserting a transparent image with the desired dimensions in the span).
Mar 8 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Bubbles Van | last post: by
2 posts views Thread by Scirious | last post: by
1 post views Thread by piter | last post: by
7 posts views Thread by Lemune | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.