JAVASCRIPT

Create Your Own DHTML Slideshow With a Fading Effect

Looking to add an image slideshow to your family or business web site? In this article Martin shows us exactly how it's done using DHTML...

Author Info:

By: Martin Tsachev

Poor Best

Rating:

/ 44

December 14, 2002

TABLE OF CONTENTS:

· Create Your Own DHTML Slideshow With a Fading Effect
· The Script
· The Slideshow Script
· The Slideshow Script (contd.)
· Conclusion

Create Your Own DHTML Slideshow With a Fading Effect
(Page 1 of 5 )

I have seen many slideshow scripts almost all support version 3 browsers but require equal sized photos. My script does not require equal sized photos at all, in addition it also adds a fading effect.

Clipping is a powerful CSS property. It tells the browser what area of the visual element should be displayed. You can produce amazing dynamic fade effects by changing the clipping value of objects, which is what I will teach you to do (using DHTML) in this article.

Compatibility

The fading effect does not work in Opera, Konqueror and Omniweb, because these browsers do not support clipping
Older browsers show the pictures side by side
Internet Explorer 5 on Mac doesn't support fading if you use a doctype such as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
Mozilla doesn't support fading if you use XHTML or HTML 4 strict

Next: The Script >>