Understanding the finer details of ShowPic

Scrub

The way to apply or remove this behaviour is fully described in the Park Avenue documentation on pages 106-7. Its purpose is to remove the focus lines from around clicked links. Whether this is a good thing to do is a matter of some controversy. Many designers find the focus lines objectionable, but they're there for a purpose - to assist people with disabilities or people who prefer not to use a mouse to navigate web pages.

At the time of the Dreamweaver 4 Magic book, PVII included a Link Scrubber command on the CD-ROM and was quite categorical about its loathing for these lines:

Removes the ugly dotted lines around links in IE4 and 5 for Windows... Completely! Even onMouseDown! Reapply the Command as many times as you like each time you add more links. Works on Text Links, Image Links, and Image Maps!

Not any more...

Focus lines affected by Scrub behaviour. The Link Scrubber has been removed from the extensions downloads page because it conflicts with the recommendations for internet accessibility. The Scrub behaviour included in Park Avenue is not currently available separately from the package, and it no longer kills the focus lines around every link on a page. It has to be applied individually to each link, and designers are left to make their own decision as to whether aesthetic considerations justify its use. The image to the right should help you judge for yourself - the focus lines are indicated by the cursor arrow. The Park Avenue documentation particularly recommends use of Scrub on the thumbnails in its gallery scroller because of what it describes as a nasty rendering bug in IE5-Mac (see PA documentation p65 for more details).

Replacing an existing image in a ShowPic layer

The first thing to do is to select the trigger (for example, the thumbnail image) that is going to launch the full size image. Then, in the behaviours panel, double-click "ShowPic by PVII" to open the ShowPic layer interface. Browse to select your new image, and make any changes you want to the Caption, Descriptive Text and any other options. ShowPic will now display your new image, but you may not be happy with the results - more likely than not, it will be distorted.

This is where knowing how ShowPic works helps understand what to do. Let's take another look inside Code View:

Code view for ShowPic layer.

Look at the 5th line by the cursor arrow - the name of your image isn't there. It's just the placeholder shim.gif. The first time you insert a ShowPic layer, the PVII extension works out the correct width and height. But it won't do it if you decide to insert a different image - even though you have browsed to the location of the new image in the ShowPic layer interface. The only way to insert the correct dimensions is manually - either in Code View or in the Property Inspector.

To do it in Code View, just replace the original dimensions with the width and height in pixels of the new image. So if your new image is 400px wide by 380px high, you would replace width="320" height="402" with width="400" height="380", making sure you don't accidentally delete any of the quotes. (Leaving out quotes or other essential items of punctuation is one of the principal causes of web pages that don't work - and one of the hardest mistakes even for experts to spot.) You will probably also want to amend the contents of the alt attribute to match your new image.

To do it in Property Inspector, first open the layers panel and click on the ShowPic layer you want to change. Then click once gently inside the layer to highlight the shim.gif.

Changing the shim.gif measurements.

The Property Inspector displays the name of the ShowPic layer (in this case, P7ShowPL2), and also shows the size set for the shim.gif (circled in red). Note that the figures are in bold characters. This means that the shim.gif is being stretched to fill the space. Put your cursor inside the width box, delete the figures already there, and replace them with the width of your replacement image. Do the same for the height. Also change the Alt description to match your new image.

On no account should you change the Src box to match the location of your new image. If you do so, ShowPic will preload your full size image, defeating the whole purpose of ShowPic's lightweight operation.

Since this is all about being lightweight, what's acceptable?