MostarNetworks

2. Inserting Images and Hiding Layers

Congratulations! You are more than 1/2 through this tutorial. Now lets insert some of your photos and start by clicking inside of layer “Tumbnails” and insert all 3 thumbnail images (tumbnail_1.jpg, thumbnail_2.jpg and thumbnail_3.jpg).

Next we will insert our 1st ‘full sized’ image (image_1.jpg)into layer called “FullSize-1” and then click inside layer called “FS1-Info” and type up some text related to our image. Now you see how taking your time to name layers is starting to come in handy .

Now we can hide layers “FullSize-1” and “FS1-Info” as we done with them and we focus on the rest of the images and layers involved. To hide the layer you can select it and then in the Properties Tab set its visibility to ‘hidden’.



Repeate the same steps for the remaining 2 of our full sized images placed in layers “FullSize-2” & “FullSize-3” while describing images in thier respective “FS2-Info” & “FS3-Info” layers.

At this point all of your layers should be hidden with the exception to “Thumbnails” and “Greeting” which you set to ‘visible’ - your layers should match to ours in image below:

3. Applying Behaviors to Thumbnails

In our last step we going to start applying Behaviors to our thumbnail images but before that is even possible we nee to turn our thubnail images into links. The easiest way to so is selecting the image and then in Properties Tab into the Link field enter “#” .



With the image still selected you can now go to Behaviors Tab (Shift+F4) and click on the ‘+’ icon to apply a behavior of your choice.



In our example we will use “onMouseOver” and then set the 2 related layers to ‘visible’ (FullSize-1 and FS1-Info) while setting the rest to hidden.



Don’t forget that we are not going to touch those 2 visible layers (Greetings and Thumbnails) at any point.

Now we have to take care of what happens ones user moves the mouse away from thumbnail. For this we are going to apply second set of ‘Show-Hide Layers’ Behaviors and put all the layers back to their initial state of being hidden. Change the default behavior to “onMouseOut” and save your work.

If all went well your page will now look like ours Example #1.

You are done with the backbone of this tutorial.

Now, repeat the step number 3. for the last two thumbnails.

In essence:

tbumbnail_2--> onMouseOver --> Hide: FullSize-1,FS1-Info, FullSize-3, FS3-Info

--> Show: FullSize-2, FS2-Info

--> onMouseOut --> Hide All

tbumbnail_3--> onMouseOver --> Hide: FullSize-1,FS1-Info, FullSize-3, FS2-Info

--> Show: FullSize-3, FS3-Info

--> onMouseOut --> Hide All

Save your work and celebrate - not a single time have you had to hand code your page.

Your final page should be close to ours that you can see HERE.

Of course our layout is not very exciting but don’t stop here and explore what a few CSS decorations and mix of the same behavior can do for your design. See another Example #2 in action.

There really is no ‘golden rule’ here...apply actions and experiment with using text links instead of thumbnail images and what you find pleasing.

With a mix of “onClick” and “onMouseOver/Out” actions possibles are endless and how you want the visitor to interact with your page is up to YOU!

To keep you motivated see this Example #3 of DW in action.