PCTalk.info

by **Spock** » Fri 2006 May 12 11:52

This program is a continuation of the main tutorial which can be found at HTML Programming for beginners.

Just as the Index head has scripts in it, so does the Thumbnail program. Here is the beginning of the Thumbnail program:

Code: Select all: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>PCTalk HTML Tutorial - Photo Thumbnails</title> <meta name="robots" content="NONE"> <meta name="description" content="Photo Display Project - Thumbnail Page"> <meta name="distribution" content="Global"> <meta name="rating" content="General"> <meta name="author" content="C. M. Vining"> <meta http-equiv="reply-to" content="viningc@pctalk.info"> <meta http-equiv="Content-Language" content="English">  <style type="text/css" media="screen">  </style> <style type="text/css" media="print">  </style> <SCRIPT language="JavaScript">  </SCRIPT> </head>

Almost everything is the same except for a few comments and a single new script. function F_openBrWindow allows you to open a new window with selected attributes when you click on a link using it. More discussion later when I get to the lines that use it.

by **Spock** » Fri 2006 May 12 11:53

The beginning of the body is fairly simple. It consists of mainly the menu options as you can see from the code below:

Code: Select all: </head> <body> <div class="main"> <center> <h1>PCTalk HTML Tutorial - Thumbnail Display Page</h1> <p>Click on thumbnail (small picture) to open. Press the Backspace key to return here.</p> </center> <p>This is the Menu that will allow you to jump deep into the page if you have hundreds of photos. If you want the Menu to be vertical instead of horizontal, simply add double line breaks where you want each new line to appear.</p> <div align=left class="menuBar"> <a class="menuButton" href="#viningc">C. M. Vining = 5 Photos</a> <a class="menuButton" href="#Section2">Section2 = 1 Photos</a> <a class="menuButton" href="#Section3">Section3 = 1 photos</a> <a class="menuButton" href="#Section4">Section4 = 0 photos</a><br><br> </div> <hr>

As indicated, the menu will allow you to jump deeper into a page that may have hundreds of thumbnails on it. I don't normally recommend having more than a few hundred thumbnails, especially if they are large enough to see any details, as it takes a long time to load so many.

In a recent project, I had a thumbnail page I was using to set up a timeline. It had 1672 thumbnails on one page and took almost 3 minutes to completely load! Needless to say, I made other thumbnail pages available on the final project that didn't have near as many thumbnails on it.

To invoke the menu, simply set up a division and use the menu option as follows:

Code: Select all: <div align=left class="menuBar">

<div> - Starts a new division.

align=left - Aligns all text to the left. Other options include "right" and "center".

class="menuBar" - where the browser should look in the style.css file for the parameters to use for this division.

Don't forget to close the division using </div> at the end of the menu.

Each button on the menu is a simple single line call to the proper section of the style sheet thus:

Code: Select all: <a class="menuButton" href="#viningc">C. M. Vining = 5 Photos</a>

<a - Anchor tag. This is used to indicate many different options.

class="menuButton" - tells the browser which style class to use.

href="#viningc"> - This is the internal link to somewhere further down in the program page as well as the close ">" for the anchor tag start. The "#" indicates that the link will be internal to the page. If you wanted this button to go to a different program entirely or even another Internet website, simply replace the information inside the double quotes with the URL of the page you want to go to.

C. M. Vining = 5 Photos - The button title. You can put anything you want here but it should be some description that is fairly short and descriptive of the area it will take you to.

</a> - The end of the anchor tag.

At the end of the code snippet above, the <hr> simply draws a horizontal line across the page. It is possible to embed parameters that not only define the thickness of the line but its length and colour as well as other attributes.

by **Spock** » Fri 2006 May 12 11:54

The rest of the program is fairly repetitive. I will list all that I have so far and then talk about each section.

Code: Select all: <a name=viningc></a> <H2>C. M. Vining - 5 Photos</H2> <A href="#" onclick="F_openBrWindow('Drivers/CV_0123.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="CV_0123: Quiet Water Park Fountain, Annapolis, MD." border=0 src="Thumbnails/tn_CV_0123.jpg"></A> <A href="#" onclick="F_openBrWindow('Drivers/CV_0124.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="CV_0124: Quiet Water Park Fountain, Annapolis, MD." border=0 src="Thumbnails/tn_CV_0124.jpg"></A> <A href="#" onclick="F_openBrWindow('Drivers/CV_0015.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="CV_0015: ." border=0 src="Thumbnails/tn_CV_0015.jpg"></A> <A href="#" onclick="F_openBrWindow('Drivers/CV_0266.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="CV_0266: ." border=0 src="Thumbnails/tn_CV_0266.jpg"></A> <A href="#" onclick="F_openBrWindow('Drivers/CV_0266b.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="CV_0266b: ." border=0 src="Thumbnails/tn_CV_0266b.jpg"></A> <hr> <a name=Section2></a> <H2>Section 2 - 1 Photos</H2> <A href="#" onclick="F_openBrWindow('Drivers/NI_0001.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="NI_0001 - CornbeltTourn016" border=0 src="Thumbnails/tn_NI_0001.jpg"></A> <hr> <a name=Section3></a> <H2>Section 3 - 1 photos</H2> <A href="#" onclick="F_openBrWindow('Drivers/D5_0001.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="D5_0001" border=0 src="Thumbnails/tn_D5_0001.jpg"></A> <hr> <a name=Section4></a> <H2>Section 4 - 0 photos</H2> </div> <script type="text/javascript"> </script><br> <script type="text/javascript"> </script><br> <script language="JavaScript" type="text/javascript">  </script> </body> </html>

by **Spock** » Fri 2006 May 12 11:55

Code: Select all: <a name=viningc></a> <H2>C. M. Vining - 5 Photos</H2>

The first line above is the anchor tag that is the destination of the corresponding menu button ("#viningc"). Notice that it uses name instead of href.

The second line is simply a title for the section and can be anything you wish it to be. You can make it a couple of paragraphs or even leave it out entirely.

The section title could have been placed inside the anchor tags for the section destination thus:

Code: Select all: <a name=viningc><H2>C. M. Vining - 5 Photos</H2></a>

I find I prefer the initial method as it is then easier for me to see the separation in the code.

by **Spock** » Fri 2006 May 12 11:56

Code: Select all: <A href="#" onclick="F_openBrWindow('Drivers/CV_0123.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="CV_0123: Quiet Water Park Fountain, Annapolis, MD." border=0 src="Thumbnails/tn_CV_0123.jpg"></A>

This is the line that not only displays the thumbnail but also defines what is going to happen when the thumbnail is clicked upon.

<A> - The Anchor tag

href="#" - the hypertext reference. Don't worry too much about it, just make sure you put it in exactly as shown.

onclick="F_openBrWindow(...) - this is the reference to our third script in the header of the program. Without the script, this would do nothing. With it ...

('Drivers/CV_0123.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes') - ... we know we are to go to another program, it will pop-up on top of the current window, the new window will have no menubar, it will be resizeable, and will have scrollbars if necessary.

<IMG ...> - this is the section that displays the thumbnail.

alt="CV_0123: Quiet Water Park Fountain, Annapolis, MD." - if no thumbnail is found, then this text will display. This text will also be displayed when you hover your pointer over the thumbnail.

border=0 - the border thickness is zero pixels, i.e., no border.

src="Thumbnails/tn_CV_0123.jpg" - this gives the location of the thumbnail to display.

That's quite a lot of information for a single line of code. The reason I use sequential numbering for my pictures is two fold.

First, that is how my camera creates the designation for its images.

Second, it makes it much easier on me to simply copy the line and paste it back in multiple times to add new thumbnail lines. I simply go through then and change the photo and thumbnail numbers and the photo caption instead of having to type the entire line in every time.

by **Spock** » Fri 2006 May 12 11:57

Code: Select all: <hr> <a name=Section3></a> <H2>Section 3 - 1 photos</H2> <A href="#" onclick="F_openBrWindow('Drivers/D5_0001.htm','pop', 'menubar=no,resizable=yes,scrollbars=yes')" ><IMG alt="D5_0001" border=0 src="Thumbnails/tn_D5_0001.jpg"></A> <hr>

As you can see from this segment of code, each section is set off by the horizontal lines between the sections. To add more pictures you only need add more <A href ...> lines with the appropriate changes for the picture and the thumbnail name.

There is only one minor little detail that yet needs to be covered, the program that is being called that is stored in the Drivers folder. Before I take that on though, I want to finish talking about the rest of the Thumbnails program.

After the last division close, there is some strange looking cod as shown below:

Code: Select all: </div> <script type="text/javascript"> </script><br> <script type="text/javascript"> </script><br> <script language="JavaScript" type="text/javascript">  </script> </body> </html>

These are actually two bits of code in the form of scripts. The first one, where you see title="Print This Page" is a script that attempts to print the page to a standard line printer using the default parameters. Usually that means printing a wide displayed document out on an 8.5" x 11" sheet of paper. Sometimes it works sometimes it doesn't. I have yet to get it to work 100% and the biggest reason it doesn't work is that the displayed picture is too wide. It seems to work well with text only.

The image for the graphical button shown in src="Graphics/printer.gif" is in the Graphics folder.

The second script where you see document.write("Last Modified " + document.lastModified) simply puts the date at the bottom of the page to show when the page was last modified.

I will be starting a new topic to explain how to create the small driver programs that are required for each picture. They are really tiny and only require minor modification from one to the next but if you have to write hundreds of them it can quickly become deathly boring!

Please go to HTML Programming for beginners 4 - Drivers for the final installment.

PCTalk.info

HTML Programming for beginners 3 - Thumbnail program

HTML Programming for beginners 3 - Thumbnail program

Who is online