By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

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

YarrOfDoom
Expert 100+
P: 1,247
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
Share this Question
Share on Google+
2 Replies


P: 32
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 100+
P: 1,247
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.