JavaScript & HTML Tips
 Home Feature highlight: Creating a Tabbed Slideshow
Credit: Imagenation


Description
Putting in tabs to display a slideshow of images is fairly simple to do. These two approaches both use tables and images of the same width and height.

Key features and JavaScript elements
Use a table with two rows. The first row contains the tabs; the second row is merged into one and its the target for the images. Use the View | Source menu commands in the browser to see all the coding details.


The first implementation uses the new text onclick event supported in the latest browsers, the tabs become part of the table cell's background and the table is created with no borders no cell padding and no cellspacing. It looks like this:

Tab No.1

Tab No.2

Tab No.3

Tab No.4

Tab No.5


The second implementation, using Javascript loader, links and CSS Styles, is a bit more complicated but works in more browser versions and has the virtue of changing the cursor to a hand and wiggling the Tab text on mouseover in some browsers.

If anyone can create for us a nice set of tabs in .gif or .jpg they will be featured on this page with credit and a fabulous "no-prize".

 

 
Top of Page  Tutorials Home  JavaScript References  JavaScript Books