Home arrow JavaScript arrow Create Your Own DHTML Slideshow With a Fading Effect
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 51
December 14, 2002
TABLE OF CONTENTS:
  1. · Create Your Own DHTML Slideshow With a Fading Effect
  2. · The Script
  3. · The Slideshow Script
  4. · The Slideshow Script (contd.)
  5. · Conclusion

print this article
SEARCH DEVARTICLES

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

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials