Applying the ShowPic behaviour - 1

Layers panel with 2 ShowPic layers. After closing the main ShowPic interface, take a look at the Dreamweaver Layers Panel, and note the name of the ShowPic layer that's just been inserted. If it's the first one on the page, it will be called P7ShowPL1. It will also have a z-index of 1. Each new layer you insert will be given a unique name - and to make it simple, it's just the number at the end that changes. Take a look at the example on the left - two ShowPic layers have been inserted.

Each new ShowPic layer will be given a z-index of 1. This should not create any problems, but you may prefer to assign a different z-index to each layer on your page. Do this by double clicking on the number in the right-hand column of the layers panel. If you are planning to use overlapping layers for special effects on your page, remember that layers with a higher z-index number will appear on top of those with lower numbers.

Make a note of the ShowPic layer's unique name

Where to apply the behaviour

What appeals to many people about Park Avenue is that the thumbnail trigger images are on a horizontal scroller.

Horizontal scroller from Park Avenue portfolio page.

Equally, what confuses many people is "How do I attach a ShowPic behaviour to a scroller?" The simple answer is - you don't. You attach it to the thumbnail image - the fact that the thumbnail image itself is in a scroller is irrelevant. It's the image that takes the behaviour.

First, a bit of theory...

Let's take a look inside Code View to see what's happening. Even if it looks incomprehensible at first, getting to understand Code View is important in being able to adapt PVII's ideas to your own original designs, as well as to sorting out things if they go wrong.

Code view - ShowPic behaviour.

The highlighted area indicates where the ShowPic behaviour has been applied - everything is enclosed in a pair of <a> tags. Half way along the 4th line, you can see the > at the end of the opening tag, followed by <img src=. What this means is that the ShowPic behaviour is attached to the thumbnail image - not to anything else. You can confirm this by looking in the behaviours panel (if the highlighting disappears when you open the panel, just click on the <a> tag in the status bar.

Behaviours panel. You can see there are four behaviours attached to the anchor surrounding the image. Two of them are essential - ShowPic and Custom Script: return false. The other two are there for the particular design of Park Avenue, and are optional. Now you've seen the behaviours panel, the Code View example above should be easier to understand. Let's take each element, piece by piece:

<a href="javascript:;" This is the null link the behaviours are attached to.

onClick="P7_ShowPic('../assets/img_thumbs2b/pk_img2.jpg', P7ShowPL2'); This is what triggers ShowPic:

onClick - should be self-explanatory
P7_ShowPic - this tells the browser to use the ShowPic behaviour
the part in brackets consists of the location of the image to be shown, plus the name of the ShowPic layer (in this case P7ShowPL2)

If you ever alter anything in Code View, make sure you don't lose any of the brackets, quotes or punctuation - they're all there for a reason. (Note: the punctuation often depends on what comes immediately before or after a particular piece of code. Unless you are replacing like for like - for example, one image for another - in exactly the same sequence as the code created in the template, you should not assume the same punctuation will work in other circumstances.)

P7_alignLL2('bottomLayer','P7ShowPL2','G',0,0); This is Layout Designer 2 positioning the footer immediately below the descriptive text. (Study the Park Avenue documentation pp 93-105 or the LD2 help files for more information. This is an extremely powerful PVII extension that is a complete study in itself.)

return false" This tells the browser to handle the <a> link as the trigger for an event, rather than linking to another page. Although it is applied by the Netscape 4 Return False Fix, do not assume you don't need it if you're not designing for Netscape 4.x - it's essential for ShowPic to work.

onFocus="P7_Scrub(this)"> This prevents a dotted line (focus rectangle) appearing around the thumbnail when it is clicked or highlighted. Getting rid of the dotted line improves the aesthetic look of the page, but can cause serious problems for people accessing sites without a mouse. We will return to this issue later.

Enough theory, let's get on with it...