This is actually a dual demo: .gif animation and .gif transparency. The basic goal is to display an animated .gif which is uploaded to Blogger. The .gif format doesn't produce the best colors, so the base image is a .jpg and the animated/transparent .gif is laid over it.
While is is widely reported that to make an animated .gif work it must be uploaded to an outside image host, the images here are uploaded to Blogger using the normal post-uploading method.
When images (all) are uploaded to Blogger, there is a three-size option, small, medium, large. The size is 200px on the long side for small; 320px on the long side for medium; 400px on the long side for large. If the image is larger than the selected size, Blogger stores the large copy (up to 1,600px) and creates a scaled image in the selected size. When that happens the scaled image will not animate.
In this example, I created the animated/transparent .gif exactly 400px wide, so it is not scaled. If you pick through the code and see the size-indicator (s400), it doesn't matter—it is displaying the full-size image.
So, the basic requirement is that the uploaded image be less than 400px on the long size, and from a practical point of view. If your .gif is larger than the displayed size you can continue on to Animated Test #2.
So, here's the images and remember you are seeing two images.
Here's the code:
the important part, the animated .gif, is maroon;
the background image is green;
the wrapping code is blue;
If you look closely you can see position in bold: that is what does the overlay. The .gif is absolutely positioned and the paragraph, <p>, is the containing element using relative positioning.
<p style="text-indent:0;position:relative;">
<span
style="display: block; width: 402px; margin:0 auto;">
<img style="display:block; padding:0; border:0;"
src="http://3.bp.blogspot.com/_TUd2gQn_l3o/SEN
qtu6vNOI/AAAAAAAAAVc/uP7v4CNRpZU/s400
/img_0976a.jpg" border="0" alt="" id="BLOGGER_
PHOTO_ID_520712292 8091477218" />
<img style="display:block;position:absolute;
top:0px; padding:0;" src="http://3.bp.blogspot.com/
_TUd2gQn_l3o/SESIhe6vNQI/AAAAAAAAAV0/
snAUc5j0ytw/s400/build4b.gif" border="0" alt=""
title="Skyhawk over the desert" id="BLOGGER
_PHOTO_ID_5207122936681411826" />
</span></p>
No comments:
Post a Comment