Back to the main index page
Searchable guide to Japanese gardens in the UK and Ireland
Bilingual web services in Japanese and English provided by Japan Interface
Independent reviews of web design and computer related books
Databases & dynamic web sites | Programming | Web
design | Web administration
Contact Japan Interface or send feedback
Rather than just go through the steps, it's probably useful to describe first how ShowPic works. Understanding the process makes it easier to implement.
Note: this since this tutorial was written, Project Seven has created an official online guide to ShowPic to guide you through all the main steps. You may prefer to follow the PVII tutorial first.
Basically, ShowPic is designed to economize on the “weight” of your webpages that display many images. Visitors save bandwidth by first downloading only links to the images - in the case of Park Avenue, smaller thumbnail copies of your image files. The full-sized images are called for only “on demand”, when the visitor clicks on the link to display it. The saving of bandwidth is important not only for your visitors, but also for everyone else. Even as broadband connections become more common, downloading unwanted files slows everything down. It could also save you extra hosting charges if you run a particularly popular site.
What ShowPic actually does is to create a hidden layer (div) for each image you want to display, but instead of pre-loading the image, it inserts a transparent placeholder (shim.gif) of exactly the same height and width. At the same time, ShowPic inserts a caption (title) above the image and descriptive text beneath. Although the position of the ShowPic layer is fully under your control, the only changes you can make to the layout of the elements are by leaving out the caption or the descriptive text, or both. But they will always come in this order from top to bottom:
If you really want the caption or descriptive text in a different position, all is not lost. Web design is, after all, about flexibility. If you're desperate to find out the solution, skip to the final page, but do come back and learn how ShowPic works. The knowledge could save you hours of frustration later.
Because images are not pre-loaded, it means you can put as many pictures as you want on a page without imposing a monster download on visitors. The shim.gif weighs in at just 63 bytes, no matter how many pictures you plan to display. But remember, each image requires a ShowPic Layer of its own; and if you're using thumbnail images as triggers (in a scroller, for example), the thumbnails will be downloaded with the main page. So, don't defeat the purpose of ShowPic by using triggers that will gobble up the kilobytes. More about that later...
The second part of ShowPic involves adding a behaviour to a trigger element. This can be a text link (like those on the previous page), an image, an image map - in fact anything that can trigger an event on a web page. In both Park Avenue and the examples here, the trigger event is onClick. This is the most intuitive way for visitors to access larger images, but it can be any valid JavaScript trigger - whatever takes your fancy.
What many people find confusing about ShowPic is they know it's a behaviour, but whenever they try to access it from the Dreamweaver behaviours panel, it's greyed out. Why? Because you can't apply a ShowPic behaviour without first inserting a ShowPic layer. If you think about it for a minute, it's quite logical - the behaviour needs to be able to find the layer it's going to display.
This is a quick run-down of the steps involved, and probably all that advanced Dreamweaver users will need. The nitty-gritty details for those less sure of themselves follow on the next pages.
© 2002-3, Japan Interface. All rights reserved.