Home arrow JavaScript arrow Page 2 - 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 - The Script
(Page 2 of 5 )

The HTML

<h1>My DHTML slideshow gallery</h1>
<div align="center">
<a href="javascript:changeSlide(-1)">Previous</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:changeSlide(1)">Next</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:setFade(false)">No fade</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:setFade(true)">Fade</a><br>
</div>

<div id="slide0" class="slide">
<img src="slide0.jpg" alt="slide0" width="100" height="50">
</div>
<div id="slide1" class="slide">
<img src="slide1.jpg" alt="slide1" width="100" height="50">
</div>
<div id="slide2" class="slide">
<img src="slide2.jpg" alt="slide2" width="50" height="100">
</div>
<div id="slide3" class="slide">
<img src="slide3.jpg" alt="slide3" width="100" height="50">
</div>


This code is simple, but it works. Of course you do not have to name your images slide0.jpg and so on.

The Style Sheet

<style type="text/css">
.slide {
position : absolute;
visibility : hidden;
top : 200px;
left : 50px;
}

#slide0 {
visibility : visible;
}
</style>


Maybe you’re wondering why I didn't set the clipping in the style sheet? The answer is simple: Netscape Navigator 4 can only get the height/width of the block (actually the clipping area), when no clipping is set (apparently it doesn't get the height value properly, but I have never seen a difference of more than 10 pixels).


Explanation
Firstly, the controls are set using anchors:

<div id="slide0" class="slide">
<img src="images/slide0.jpg" alt="slide0" width="100"
height="50" border="0"></div>


This sets the first slide of your DHTML slideshow. The img should be wrapped in a div because NN 4 considers only div's and span's for layers. The case is that NN 4 can only set visibility/clipping of a layer. The class="slide" is for setting the position and visibility of all slides, and the id is to identify the slide that needs to be viewed.

.slide {
position : absolute;
visibility : hidden;
top : 200px;
left : 50px;
}

#slide0 {
visibility : visible;
}


Firstly, the class definition for all of the slides. It sets the position to absolute to get the impression that the next slides comes from below the previous one (so that the user doesn't have to scroll down the page to see the next slide).

visibility : hidden

... prevents the browser from visualizing the slides on the screen, while still reserving the space needed to actually display them. We also set the top and left co-ordinates of the slides (px is short for pixels).
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