Fireworks Generated Table Using States

Although this image display, by technique, is similar to the one displayed on the JPEG Photo Display #1 page, it was created using the states panel and also functions with Swap Image Behaviors, using the onClick event handler method. Instead of selecting an image file, this method swaps out the State. The thumbnails live in state number one while the remaining images each reside in States two thru four. The HTML file for this table is a mere 8K, while its supporting images weigh in at 840k. The file size of the source folders is dramatically different. The source folder of this page is 856K. The source folder of the identical display on JPEG Photo Display #1 weighs in at 300K.

If server storage space is a consideration, uploading a 300K folder of supporting assets sounds much more economical than a folder that occupies 600K to do the same job. The design challenge is to keep web pages as lean and clean as possible. This principle applies to both code and supporting assets.

When using the States Panel, Fireworks exports every image found in every state. All four of the larger sized images, which have been imported into each state, collectively contribute to the heavy size of the original PNG file. While the images displayed here are different, they were taken at the same photo shoot and are the same size with the height and width reversed.

The original display shows image number

one as the default image, using a javascript behavior to swap images from an external source folder into the Image Display slice.

In this display, a border was added to image designed to appear in the Main Display slice. This was accomplished in Fireworks, with the Rectangle Tool, basically stroking the image and then merging the layers. Both Fireworks and Photoshop will work to attain the effect. To maintain the integrity and sizing convention of the source Fireworks file, no borders will be added to the thumbnail images. Lastly, in a ID created for this table, and defined in this document only, a one pixel, solid, dark brown border was added to define and frame the composition.

New Browser Window Behaviors

Opening a new browser window is a another technique for creating a more interactive and dynamic web experience. It is a great way to consolidate images and graphics into smaller container sizes and then have their full size counterparts display in a separate window using a Javascript linking mechanism. An example of this technique can be found on the Tables Page.

1. Select the target Thumbnail Image.
2. Go to the Tag Inspector Panel.
3. Click the Behaviors Button.
4. Click on the Plus Sign.
5. From the drop down menu, choose Open Browser Window.
6. Click the Browse button and navigate to the file you want to display
7. Enter the window dimensions and check any optional attributes you may need.
8. Dreamweaver will add the Javascript function MM_openBrWindow to the head of your document and place the function call onclick="MM_openBrWindow(' Your image file path, width=x height=y')" inside your image tag.
9. Click on the image to see how it works.
10. Note:  With this behavior, remember to manaully close the window.

The next technique for opening a new window also uses Javascript and its own Style Sheet. The files can be downloaded from Highslide.com. Once you have done that, launching the index page allows access to the documentation. Examples are shown as to where to place the Highslide folders within your site structure. Great care needs to be observed here. You must make sure the files paths are correct once you link your Javascript file and highslide CSS sheets in the head of your document, otherwise nothing will work.

The documentation provides a clear example of how and where to copy and paste the code both in the head of the document and how to apply the anchor tag around your image thumbnail source. As previously stated, the file path to the target image must be correct. For an accurate display, you'll need the target's dimensions as well. Click on the image, the effect is very cool!