Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Snap Layers by PVII

Snap Layers by PVII allows you to anchor, or Snap, one or more layers to an image on the page. The image can be contained within a paragraph, table, ordered list or other html element. The assigned layers will move, or Snap, relative to the current image position on the page irregardless of the browser window size. This allows you to create menu systems or pop-up layers that actually move dynamically with the page contents.

Download the Snap Layers by PVII extension

Opening Snap Layers

Snap can be applied to any link, text, or image, on the page. It can also be placed on other tags that fire events, such as BODY onLoad. Click on the link or tag, and then click the Plus Sign on the Behaviors Panel. Select Studio VII - Snap Layers by PVII to open the Snap interface. Snap will be "greyed" out and un-selectable if there are no named images or layers on the page.

The Interface

The Snap Layers Interface has all the tools you need easily arranged in an intuitive and familiar format.

User Interface

1. Snap Events:

The Snap Events lists all of the Snap movements for the event you have selected. Use onMouseOver or onMouseOut if you want to do a roll-over, or onClick... depending on you design. This listing will populate as you add Snap movements or when you inspect an existing Snap event.

a. Add

Click the + sign to add a new Snap movement to the list. A new line will appear in the list. The settings will be picked up from the previous selection (to save time when placing repetitive moves on the page).

b. Delete

Click the - button to remove a Snap movement from the list. The currently selected movement will be removed.

c. Move Down

Click the down arrow to move the selected item downward in the listing. This will change the order in which the layers are Snapped.

d. Move Up

Click the up arrow to move the selected item upward in the list. This will change the order in which the layers are Snapped.

2. Anchor Object:

All of the available images on the page are shown in this listing. Only the images that are specifically named, using the property inspector, will be shown. Select the image name that you wish to "Snap" the layer to from this list. As you change the selection, the corresponding line in the Snap Events list will update to reflect the change.

Additionally, all of the named Objects on the page are listed as well: Layers and all element tags that have an id.

For example, <p id="para1"> will show on the list as para1. When using this as an anchor, the layer will snap to the position of the paragraph tag, wherever that happens to be! In IE5, N6 and Opera5 you can use any named elements on the page to act as an anchor... Netscape 4x will only support Images and Layers.

Try using <td id="cell1"> to anchor a layer to the exact location of that individual table cell. Other table tags like <table id="table1"> or <tr id="row1"> will work just as nicely.

Span tags, Ordered Lists and List Elements will work as well:
<span id="span1"> or <ol id="list1"> or <li id="item1">

Hint: To create an id for an element, select that element from the bottom left of the DW window. Right-Click and choose "Edit tag". Enter id="MyIdName" and hit Enter.

3. Layer to Snap

All of the available layers on the page are shown in this listing. Select the layer that you want to "Snap" to the selected image. As you change the selection the corresponding line in the Snap Events list will update to reflect the change.

4. Offset Left:

This controls the horizontal position of the layer relative to the image. Enter the amount, in pixels, by which you want the left edge of the layer to be positioned from the left edge of the anchor image. Enter a zero to exactly align the layer to the left edge of the image. Enter a negative number to position the layer to the left of the image. Enter a positive number to align the layer to the right of the image's left edge.

5. Offset Top:

This controls the vertical position of the layer relative to the image. Enter the amount, in pixels, by which you want the top edge of the layer to be positioned from the top edge of the anchor image. Enter a zero to exactly align the top of the layer to the top of the image. Enter a negative number to position the layer above the image. Enter a positive number to position the layer below the image's top edge.

6. Presets:

To save time and calculation, you can select a preset snap from this list. The extension will calculate the correct Left and Top offset amounts based on the dimensions of the selected image and layer. Of course, you must have the dimensions defined in the property inspector in order for this to work properly. Here are the available Presets:

a. To the Left of Image

This will calculate the width of the layer and set the left offset so that the layer's right edge will align with the image's left edge. The top of the layer will align with the top of the image.

b. To the Right of Image

This will calculate the width of the image and set the left offset so that the layer's left edge will align with the image's right edge. The top of the layer will align with the top of the image.

c. To the Bottom Left of Image

This will calculate the width of the layer and set the left offset so that the layer's right edge will align with the image's left edge. The top of the layer will align with the bottom edge of the image.

d. To the Bottom Right of Image

This will calculate the width of the image and set the left offset so that the layer's left edge will align with the image's right edge. The top of the layer will align with the bottom of the image.

e. To Top of Image -Centered

This will calculate the width of the layer and the width of the image and set the left offset so that the layer's horizontal midpoint is aligned with image's horizontal midpoint. The top of the layer will align with the top of the image.

f. To Bottom of Image -Centered

This will calculate the width of the layer and the width of the image and set the left offset so that the layer's horizontal midpoint is aligned with image's horizontal midpoint. The top of the layer will align with the top of the image.

Note: The Presets will only work if you use an Image as the anchor. You can also use the Presets to get a "starting point" from which you can then manually edit the Left and Top offsets.

7. Applying the Behavior

Click OK to apply the behavior. The javascript code will be placed on the page and the function call, with all of the selected Snap Events, will be placed on the tag. If an error occurs you will see a descriptive error message. Correct the error and click OK again.

Select the proper Event that will be used to "fire" the script in the Behaviors Panel. Click the Events down arrow to see the listing of events applicable to the tag. When applying to an image, be sure to select the parenthetical (onMouseOver), (onMouseOut) or (onClick) to assure that the event will be placed on the <a> tag.

Snap Layers | back to main listing