Animated Images CSS test page

This is a test page with various styles and layering to test the script & demonstrate limitations.

The default for forceImgSize is false to keep the amount of overhead from the script down, so with some of the more complex css positioning, the image size and position appears to jump around (test 5 & 7). Try setting to false if it's a problem on your page.

Test 1

Apply a margin only to the container.

Test 2

Margin, border, padding, and float

Test 3

Test 3,4,5 are inside a fixed position container. Test 3 has a border width set in em.

Test 4

Test 4 is inside a absolutely positioned container.

Test 5

Test 5 applies styles directly to the image through the style sheet and the id on the image

Test 6

Nothing special set on Test 6 container, but it goes to the right of Test 2 because of the float.

Test 7

The image and its paragraph both have class 't7' applied. A relative width is applied to the class, and the result is not pretty!

  1. Test 5: If the image is specifically styled (see Test 5 image border): This image jumps because the image, but not the cross-fade image, is styled. Need to Workaround: Preferably, apply the style to the cross-fade image also by adding _b to the id of the image. Or set forceImgSize = true in the script (this adds a small amount of processing in the script -- may not be noticeable).
  2. Test 7: If the dimensions of the image is set by relative units, the size of the cross-fade image will not be correct. Workaround: Preferably, use absolute units for image and padding/border sizes. Otherwise, set forceImgSize = true in the script (this adds a small amount of processing in the script -- may not be noticeable).