Creating Thumbnail Links

On each of your external pages, a thumbnail of the dish will be shown. For this project, you will learn how to create a popup page that will open a new document when you click on the thumbnail picture that will provide a larger picture of the dish along with the actual recipe. Make sure that you add your name to each of your recipes in the form of Submitted by: Your Name. So for each of your five dishes listed, you will have five additional pages that will shop a larger picture of your dish along with the actual recipe.

As anyone who has been frustrated while waiting for a Web page to download to your computer knows, it is important to make sure that you create a page that can be viewed in a timely manner. Images can be fairly large. Optimizing the image, or changing the format that it is saved in, can reduce the file size of the image and make it viewable on the Web. The image's size below is 300 by 225. Thankfully, you can compress JPEGs easily in Fireworks, leaving little visible effect but improving the download time significantly. Using a 40% JPEG compression setting, the same JPEG image is only 24K. This still left the download time using a 56K analog connection at more than 7 seconds. That is a long time for a single image, especially if you are going to have a series of such images. So, I resized the image to create a thumbnail.

One way to deal with this problem is to create a thumbnail, or a smaller version of the image, with a link to an enlarged version of the image. That way a user can decide whether to look at the enlargement. This allows you to put a higher-quality version of the image on the Web. This activity will teach you how to take your current images and create thumbnails to reduce the waiting time for the person visiting the Web page. Using thumbnails is particularly useful when you are going to display a series of images. This allows those who surf with an analog connection to download the page relatively quickly. Using some HTML code, you can place these thumbnails in a table. You will also learn how to create a pop-up window that displays a larger version of an image when a thumbnail is selected. Below is a thumbnail of the same picture shown above. By clicking on this thumbnail, you will see how a separate window pops up to display an enlarged version of this image.

Creating a Thumbnail

To create thumbnails, chose Modify>Image Size to get the Resize dialogue box. I selected the "Percentage of Original" option.

At the dialogue box, select Percent instead of Pixels as shown below:

Because the image is going to be reduced using a mathematical algorithm, using percentages in thirds or even numbers will help get a better reduction. I used 33 percent. This means that the new image will be one-ninth of the size of the original image. Notice that when you enter the value for width, by default the equivalent value appears in the height box. Fireworks is attempting to help you keep your image proportional to the original image. You can actually alter this if you deem it necessary, but in this situation, it is not recommended.

Now that you have created a thumbnail, you need to prepare for display on a Web page. Choose File > Export Preview. You will have need to select the JPG option shown below:

A photorealistic image, such as a digital picture, should be exported using the JPEG Optimizer.

How to Display Your Thumbnails

How you display your thumbnails is relative to your overall page design. If you have a series of thumbnails, you might consider using HTML tables. The sample table code is listed below:

This will produce a table with three cells in which you can display three thumbnails. You can add or remove cells as necessary.

Creating a Pop-up Window

Another way to display your enlargement is to have your enlargement open in a pop-up window. This gives you control over the size of the window and the window attributes. Example 2 is some sample code which would go in the thumbnail page. This will create a JavaScript function which will create a pop-up window. You will control the URL and size of the pop-up window in the link code. Copy and paste the code below into the head of your thumbnail Web page.

After you have pasted the JavaScript into the head of your page, you can create as many pop-up windows as you want. You don't have to mess with the JavaScript. The link code is shown below. This is where you will set the URL and the size of each pop-up window. You can put this link in a table or anywhere where you want to put the link. Remember that you have to create a separate HTML document containing your image, the name of the dish, and the recipe for each pop-up window you want. In this case, the file is called nachos.html and the image is called firecracker2, the thumbnail of my picture.

Change the html file name to your file name. Change the 600 to the width you want to set the pop-up window to. Change the 400 to the height you want to set the pop-up window to. Change the .jpg file name to your thumbnail name and extension. You can add as many links as you want. Each one can point to a different pop-up window with the size you set in each link. In this example, the "JavaScript: void doNothing()" is used to prevent the thumbnail page from refreshing. This tells the browser to perform the doNothing function in the JavaScript. The doNothing function does, in fact, nothing.