Not all GIFs are created equal. Some just need a little help.
I haven’t posted more than once in a day in a while, but I’m really excited about my little interactive images kick from earlier.
I got links to work on top of an animated GIFs. After cracking my knuckles, I decided to see if I could push myself a little more. Now, I want an image with some instruction text to play an animated GIF on the hover, not jump out to a link. This is all hobby for me, by the way. Lots of coding and refreshing going on to get it working.
The first thing I needed to do was lay out my HTML tree and CSS skeleton
Now, I needed some more information. Problem number one: get the first frame of an animated GIF to use as a static placeholder in the page. Not too hard. I hopped into GIMP, and then copied and exported my first frame as a jpg image to hang out on its own.
Now, the hard part was to get the text to show up in the right place. You can use absolute positioning, but then your div elements can get all wonky. On a static HTML page, it isn’t too hard to do because you control everything. On a blog, it can be messy because you’re fighting with your template’s CSS and if you don’t use the right attribute names or calls, you can end up with a poor layout. So, to make things easier, I just used GIMP to throw some instruction text on to my first frame placeholder.
Now came the tricky part. I had to make sure I layered my images correctly in the HTML and CSS. After adding the correct links and the correct frame sizes, I had the following code:
And the result is:
One thing I’m still trying to work out is how to get the animation to pause when you move the mouse. Because a GIF is just an image, I don’t think there is a way to have the loop paused without some serious coding in the background. I’ve already poked through StackOverflow a little, and can’t seem to find anything promising. With this method, the GIF will continue to loop in the background after the initial hover, so you’ll see a little jump.
Why? Animations can be annoying in the corner of your eye. Giving people control over whether or not they want to see some moving pictures is a courtesy. Plus, I wanted to see if I could do it. So there.
