web design template
Page : 1 2
 


If the Property inspector is not visible, Choose Window>Properties

Keep the Mouse Cursor inside Layer 1. Choose Insert Image Button on the Common Category of the Objects Panel. Select the Background Image from the Image Source and click on the select button.

Use the Property inspector to specify the name and location of a layer as well as to set other layer options.

(In this example we have changed width, height, left & top position of the layer)


Draw another Layer ie. Layer 2 from the Objects Panel. Keep the Mouse Cursor inside Layer 2. Choose Insert Image Button on the Common Category of the Objects Panel. Select the Image from the Image Source and click on the select button.

With the help of Property inspector keep the same settings as of Layer 1

With the help of Property inspector you can also set following Properties:

Layer ID - allows you to specify a name to identify the layer in the Layers Panel.
L AND T (Left and Top) - specifies the position of the layer relative to the top left corner of the page.
W and H - specifies the width and height of the layer.
Z-Index - determines the z-index of the layer. Higher-numbered layers appear above lower-numbered layers. Values can be positive or negative.
Vis - determines the initial display condition of the layer (visible or not).
Bg Image - specifies a background image for the layer.
Bg Color - specifies a background color for the layer.
Tag - determines the HTML tag to be used. span and div are recommended
Overflow - determines what happens if the contents of the layer exceed its set size.
Clip - defines the visible area of a layer and can be used to cut content from the edges of the layer.


Similarly, make separate layer for each image.


After creating different Layers for each Image Select the Product Catalogue's first image ie. the Laptop Image.

Then Choose Window>Behaviors

Click the Plus (+) button and choose Show-Hide Layers from the Actions Pop-up menu.

From the Show-Hide Layers list, Select Layer 2 and click on the Show button. Keep all other layers hidden.

Show button shows the layer
Hide button hides the layer
Default button restores the layer's default visibilty.

Then Click OK.

Note:

The Event in the Behaviors Panel shows (onMouseOver) as the Default Event.

To change the default event (onMouseOver), you will have to make the changes (onClick) in the source code.

There are other Events also such as onClick, onDblClick, onKeyDown, onKeyPress, on KeyUp, onMouseDown, on MouseOut, onMouseOver, on MouseUp.

Repeat the above steps for remaining layers.

Regards,

Manoj Kotak.
The author is Director of Image Online Pvt. Ltd. developer of
Layout Galaxy web site design templates for photoshop and Flash.

All accompanying logos, brands and product names are trademarks of their respective companies.

Blood for humans comes only from humans : Donate Blood
http://www.donate-blood.org   E-mail - om@donate-blood.org





web design template
© Image Online  2001-2003