Business Sites     

 Web Applications      Web Site Hosting      Search Engine     
CompanyWeb.net: Web Hosting, Internet Programming, Search Engine Optimization

 

 


Step by step procedure
More than 200 million people a day search on Google for products and services, and there are less than 100,000 advertisers. Make money by placing Google AdWords ads for your affiliate programs.

googlecash.com

 

 

CompanyWeb Articles

Book Reviews
Columns

Web-Source Topics...

Horse's Mouth
ProBizTips

CompanyWeb Search



Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.

Master Series

Easy IFRAME Slide Show

By William Bontrager

Creative presentations can add some "pizazz" to your web site, showing off your products or services to good advantage.

Here is an easy way to put a slide show on your web page.

Simply make a separate web page for each slide. Then display the slides in an IFRAME tag.

"IFRAME" is from "Inline FRAME" and is a tag that creates a frame anywhere on your web page that you so choose. It's a little window within which you can display your slide show.

Any or all "slides" of the show can be a multi-media presentation with sound and animated images. Two-way viewer interaction is possible, too, with survey questions and other viewer input collected through forms.

This article and accompanying demonstration focus on a slide show composed of a series of still images. The latter part of the article addresses some other media presentations and viewer interaction that can be utilized.

The slide show can be seamlessly integrated into your web page. I'll show you how to do that, too.

To assist understanding, we'll call the web page where the slide show is/will be displayed the "display page" and the web pages containing individual slides, the "slide pages."

Creating the Slide Pages

Build the individual slide pages first. These are normal web pages with HTML and BODY tags.

The height and width of individual slide pages should all be the same. If they aren't, you lose control of where the slide will be positioned in the IFRAME on the display page.

See the demonstration page at http://willmaster.com/a/23h/pl.pl?art235 for a method of putting images of different sizes into slides of uniform size.

Create a table of the same size on each slide page. Position individual images within the table. Here is an example slide page:
 
<html>
<body 
   bgcolor="white">
<table 
   width="40" 
   height"80" 
   border="0" 
   cellpadding="0" 
   cellspacing="0">
<tr>
<td 
   align="center" 
   valign="bottom">
<img 
   src="AnImage.jpg" 
   width="35" 
   height="60" 
   border="0" 
   alt="More to come!">
</td>
</tr>
</table>
</body>
</html>

The IFRAME tag on the display page displays the top-left portion of the slide page. The above example places the table at the top-left of the slide page, the image positioned within the table.

For a seamless appearance, make the background color of the slide pages and it's tables the same as the background color of the display page.

Name your slide pages something that makes sense to you, something that lets you know in which order they're supposed to appear.

In the demonstration, the slide pages are named one.html, two.html, through five.html.

Creating the Display Page

The display page has three sections, the IFRAME tag, the forward/back links, and the controlling Java. They interact with each other to provide the slide show functionality.

See the demonstration page at http://willmaster.com/a/23h/pl.pl?art235 for a complete example.

First, the IFRAME tag —

Put the IFRAME tag in the spot on your page where you want the slide show to appear.

Here is an example IFRAME tag, followed by comments about each attribute:
 

<IFRAME 
   name="myIframe" 
   width="50" 
   height="90" 
   src="one.html" 
   frameborder="0" 
   scrolling="no" 
   marginwidth="0" 
   marginheight="0">
<h3>Sorry, your browser can't display the slide show.</h3>
</IFRAME>
name="____"
The IFRAME tag needs a name so the forward/back links know where to put the slides. The name you give the iframe can be any name or id not already assigned to any other tag on the display page.

width="____"
This should be the same width as the slides (unless you specify a marginwidth greater than zero, see below).

height="____"
This should be the same height as the slides (unless you specify a marginheight greater than zero, see below).

src="____"
This is the URL to the first slide page. Note that slide pages must be on the same domain as the display page.

frameborder="____"
This requires a 0=false/1=true value ("1" being default). For a seamless slide show, specify "0". If your implementation design requires a border, specify "1" or remove the attribute altogether.

scrolling="____"
This requires a no/yes/auto value. Specify "no" to remove scrollbars altogether. "yes" would provide the IFRAME with scrollbars, and "auto" would provide scrollbars only when the browser determines they're needed for a slide existing beyond the borders of the IFRAME.

marginwidth="____"
For a seamless implementation, make this "0". If you decide you want margins on both sides, increase the width specification, above, by twice the number you specify here.

marginheight="____"
For a seamless implementation, make this "0". If you decide you want margins on the top and bottom of the IFRAME, increase the height specification, above, by twice the number you specify here.

The "<h3>Sorry, your browser ... </h3>" line is optional. That's the line between the <IFRAME...marginheight="0"> and </IFRAME> tags.

That line will be seen only by Netscape versions 4 and earlier, and by other less popular browsers that might not recognize the IFRAME tag.

Note that Netscape versions 6+ do IFRAME quite nicely.

The days when webmasters did not use the IFRAME tag because of Netscape 4's limitation are probably over — Google's AdSense ads are displayed in an IFRAME tag.

Second, the forward/back links —

The links that navigate the slide show have four attributes. Here is an example, followed by comments about each attribute:
 

<A 
   id="next" 
   href="second.html" 
   onClick="ShowingContent('next')" 
   target="myIframe">
Next
</A>
id="____"
The A(nchor) tag needs an id so the Java knows which tag's href to insert URLs into. The id you give the anchor tag can be any name or id not already assigned to any other tag on the display page. An id relating to its function would usually be appropriate.

href="____"
This is the URL of the slide show page to go to when the link is clicked. Specify the URL that's correct when the display page is first loaded. The JavaScript will then change the URL as appropriate whenever any of the navigation links is clicked.

onClick="ShowingContent('____')"
Replace the underscore with the id="____" attribute you specified above. If you specified id="next" then you would specify onClick="ShowingContent('next')" here. This tells the JavaScript which link is being clicked, and allows the JavaScript to adjust the URLs in the href="____" attribute of all navigation links as appropriate.

target="____"
Replace the underscore with the name="____" attribute you specified in the IFRAME tag. If you specified name="myIframe" in the IFRAME tag then you would specify target="myIframe" here. This tells the browser that the web page at the link's URL belongs in the IFRAME.

The system has four navigation links. To go forward in the slide show, to go backward, to go to the beginning, and to go to the end:
 

<A 
   id="start" 
   href="first.html" 
   onClick="ShowingContent('start')" 
   target="myIframe">
Start
</A>
<A 
   id="previous" 
   href="last.html" 
   onClick="ShowingContent('previous')" 
   target="myIframe">
Previous
</A>
<A 
   id="next" 
   href="second.html" 
   onClick="ShowingContent('next')" 
   target="myIframe">
Next
</A>
<A 
   id="end" 
   href="last.html" 
   onClick="ShowingContent('end')" 
   target="myIframe">
End
</A>

Slides are shown in an "endless" series, the first linking to the last and the last linking to the first: When the slide being shown is the first in the series and the "previous" link is clicked, then the next slide being shown will be the last in a series. And, when the slide being shown is the last in the series, clicking the "next" link will show the first in the series.

Third, the controlling JavaScript —

Grab the JavaScript from the demonstration page download link at http://willmaster.com/a/23h/pl.pl?art235

Paste the JavaScript into the HEAD area of your display page. It has five places to customize, each clearly marked.

The first place is where you specify the file names of each of the slide show pages, in slide show order. The other four places are where you specify the id="____" attributes you specified in the navigation link A(nchor) tags.

Putting It All Together

Upload the display page, the slide show pages, and the images specified in the slide show pages to your server. You're good to go. Simply type the URL of the demonstration page into your browser and experience your slide show.

Multi-Media and Visitor Interaction Slides

As you've undoubtedly noticed, the slide pages are in fact regular web pages. It's just that they're displayed within an IFRAME window on the display page.

Therefore, the slide pages can contain anything regular web pages can — music, animated images, forms, links to other pages, and so forth. You can make a slide page that, for example, asks the user to type a joke into a form field. When the form is submitted, which can be done right in the IFRAME, the next page in the IFRAME can have an animated looney-bird laughing its tail feathers off.

Any slide page can have it's own links to other pages, and those other pages will be shown within the IFRAME so long as the pages linked to are on the same domain as the display page. You could ask a quiz and present a score right in the IFRAME, for example.

When links within a slide page cause a different page or series of pages to be presented in the IFRAME, it has no effect on the navigation links of the display page. When another navigation link is clicked, the next (or previous or first or last) slide is presented.

Thus, you could have interactions and entertainments on individual slides without effecting the order of the slide show itself.

Will Bontrager

Copyright © 2004 Bontrager Connection, LLC

About the Author:
William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Content Provided By:

More Master Series Articles...

 

Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.