In this lesson, we are going to show you how to add mouse  over actions using layers.  This action can be seen by using the example below.  Once the page has loaded, simply put the mouse arrow over the text and watch the images pop into action:
 

The purpose behind this technique is to be able to show graphics in the same location.  This means that your actual graphics are overlapping or layered.   

In order to use actions that contain layers, (such as the above example), you need to publish your site, page or layout region using CSS + Layers.  It also must be noted that viewers will need to be using browsers version 4.0 or above to view layered actions.  If you're not sure how to change the HTML Output, click DETAILS 1: Changing the HTML Output.

You can assign layout regions different HTML output than that of the parent page.  This means you can overlap (layer) objects in a layout region set for CSS+Layers output while the rest of the page is formatted using Nested Tables.  Visitors with advanced browsers get the overlapped effect, without making the rest of the page incompatible with older browsers.  Simply drop all of your graphics into the layout region and set the Layout Regions HTML Output to CSSP+Layers.  See  DETAILS  1 for more information.

 

1

 Step One
  Lights, Camera... Actors?

As with most actions - you will need at least two subjects on your NetObjects stage.  One to call out the action and the other to perform it.  For this lesson we will use four graphic elements in order to demonstrate layering.  So naturally, your first step will be to insert the graphics you want to use into your page.

DETAILS 2: Inserting a Graphic

I will be using graphics from the example at the top of this page. 

Graphic 1 Graphic 2 Graphic 3 Graphic 4

 

START STACKING
Since we want our images (graphics 3 and 4) to appear in the same space, we have to place the graphics in the same location.  This means that they will be overlapping (see fig. 1) one on top of the other.

Fig.1 Fig.2 If your graphics look like the above example (Fig. 2), with this symbol in the top left corner, then you probably haven't set the HTML output to CSSP+LAYERS.  See DETAILS 1 for more information on changing the HTML output.

 

Okay, now that we have our graphics, we can move on to step two.

2

 Step Two
  Keeping the Actors Off The Stage

The first thing you want to do with the graphics is to keep them hidden when the page is initially loaded.  The action of the mouse over will make the graphics visible.  But first, we need to make sure the Baseball Player and Golfer are not visible in the browser.  We do this by using the Picture Properties Palette.

Select the graphic by clicking it (Fig. 3).  When you do this, the Picture Properties box will show (Fig. 4).  If the Properties box is not open - you can open it by clicking View and then Properties Palette.  You can also just right click the mouse over the graphic and select Object Properties. 
  Fig 3

 
  Fig. 4

Once the Properties box is open, you want to select the Actions tab (Fig. 5).

Fig. 5

Now with the Actions tab selected, you will get the window below (Fig. 6).
 

Fig. 6

There are two things you need to do here.

1.   Uncheck the "Object initially visible in browser" box (Fig. 7). This will hide the picture.

Fig.7

2.  Make a note of the Object ID.  In this case, it is "Baseball Player."  You will need to know this when you want to associate the graphic action to the specific text graphic.

If you don't give your picture a unique name, the ID will come up as a number.  Such as, "Picture28."  If you want to give your graphic a unique name, simply type in the name you want in the Object ID field. You can also do this with the Object Tree, see DETAILS 3.  Although the object is now hidden, it will still show on your page when you are editing it in NetObjects.  You will need to preview or publish the page in order to view it the way it will appear in a Web Browser.

 

DETAILS 3: Using the Object Tree

After you have gone through and made all of your action graphics invisible, it is time to move on to step three.

3

 Step Three
  Who, What, When and Where?

Now that we have our images, we need to assign the appropriate actions to the text (graphics 1 and 2).  Here is what I want to happen:

When the mouse is over the Baseball text - I want the picture of the Baseball Player to show.  When the mouse leaves the text, I want the Baseball Player to disappear.  It is the same action I want to happen with the Golf text and Golfer graphic.  So what we have are two actions: the mouse over and the mouse out.

The final step is just as easy as the others.  First, you want to select the first graphic. (Fig. 8). This will bring up the Picture Properties Palette (Fig. 9). Now select the Actions tab to bring up the Actions Properties window (Fig. 10). This is where you do all the real work.  Notice at the bottom there is a + and - symbol.  These are used to add and delete actions.  There are two actions you need to make.  First, is the Mouse Over Action and Second, is the Mouse Out Action. Click on the + symbol to bring up the Set Action Palette (Fig. 11) so you can add your first action.  You will only need to add two actions.

Fig. 9

Fig. 10

Although there are many options in the Set Action window, you will only need to follow a 3 step process to get your actions to work.  They are as follows: 

1. WHEN
This field determines when the action will take place.  The current default is set to "clicked," which means the action would take place if you click the graphic.  Since you want a Mouse Over Action, you simply need to change the When field from "Clicked" to "Mouse Over."  You do this by clicking the button to the right of the field, go to the Mouse menu and select "Mouse Over."  (see fig. 12)

2.  TARGET
Next, you need to designate a target for the action.  This is where the Ball Player comes in. Click the button to the right of the Target field to open up the Object Tree.  From here, you can scroll until you to see the graphic you want.  Remember in step two, I said to make a note of the Object ID?  Well, this is why you need it.  So I would select "Baseball Player" (See Fig. 13).

  Fig. 13

3.  MESSAGE
The message is going to tell your action what to do.  Since your text is hidden, you want it to be revealed with the mouse over.  To do this, you click the button to the right, go to the Object menu and select Show (See Fig. 14).

When you are done, it should look like the window in fig. 15.

That's it for the first action.  Just hit OK. Then hit the + button  to add one more.  For the second action or the Mouse Out , you can follow the same steps for the Mouse Over.  Simply replace "Mouse Out" for "Mouse Over" in the When field and "Hide" in place of "Show" in the Message field.  Make sure the T arget is the same for both actions.

That's it, repeat the steps for the rest of your graphics.  When you are done, you can select preview and test your actions.  Have Fun!

Credits:    
Font used in this example: ITC Styleboy
Graphics come from the font ITC Energetics

About the Author Rick Tew is the founder of Tew Ryu the Martial Science.  His programs focus on three areas of human development: Mind- personal development seminars Body- physical energy through martial arts  Spirit- team travel and adventure When he isn't busy with the above, he enjoys expressing his creative talents through writing and web site creation.

 

Details 1:
Changing the HTML Output
Back to the lesson

Publishing in Cascading Style Sheets (CSS)
In order for you to use Layered Actions, you will need to set the HTML output to CSS+Layers.  The easiest way to do this is to go to Publish view, click the Setup button on the button bar at the top of the screen, and then click the HTML Output tab in the dialog box.  Simply select the option you want.  In this case, it will be CSSP+Layers.

You may not want to publish the entire site using Cascading Style Sheets.  Perhaps you only want the pages that contain layers published in CSS. This will allow you to publish the rest of the pages using Nested Tables.  You can do this by right clicking on the page Layout, then left clicking "Layout Properties." This will bring up the Layout Properties box.  Simply change the HTML setting to CSSP+Layers.

 

Layout Regions
You can assign Layout Regions different HTML output other than that of the parent page.  This means you can overlap (layer) objects in a layout region set for CSS+Layers output while the rest of the page is formatted using Nested Tables.  Visitors with advanced browsers get the overlapped effect, without making the rest of the page incompatible with older browsers.

Simply select the layout region to bring up the Layout Region Properties.  Then browse down to the HTML output menu.  Change the current setting to CSSP+Layers and you're all set.

1) Netscape's DTHML features can be buggy, and don't always work correctly if you're using Nested Tables. If you have trouble getting actions to work in Netscape, use Regular Tables instead.

2) Netscape also has problems with CSS pages or regions that contain a form. So if your page needs to have both layers and forms, put the layered actions in a layout region that uses CSS, and put the forms in an area of the page that uses tables.

Back to the lesson

Details 2:
Inserting a Graphic
Back to the lesson

You can add a graphic by  selecting the Picture Tool (Fig. 1). This can be found in the Standard Tools Menu.

Fig. 1

 

Once the Picture Tool is selected, you will then need to draw a small box (Fig.2) on your page where you want the graphic to be inserted.  Don't worry about the size or exact location,  the box will adjust to the size of the chosen graphic and you can always move the image after it has been placed. 

After you have done this, the picture file will open (Fig. 3) and you can choose the image from a file located on your hard drive.  You may also choose a previously used graphic from your Image Assets file.

Fig. 3

When adding graphics to your web pages, be sure and use art that either you have created, was made for you or that you received with a graphics or clip art package.  Copyright laws also govern graphics from the Internet.

Back to the lesson

Details 3:
Using The Object Tree
Back to the lesson

The Object Tree (Fig. 1) is a great way to keep track of what is on your page.  It allows you an easy way to select and find any element on your page, instantly.

Fig. 1

The Object Tree shows every element, as well as the role it plays on your page.   If you add a really cool picture into the MasterBorder, that picture will magically appear under the MasterBorder name in your Object Tree Window.  The same goes with other elements you add to your page. 

If you select an element in the Object Tree, the element on your page will also be selected.  This is a great way to locate images or arrange their order on the page. 

If you have elements within an element, such as graphics and text inside a Layout Region - then the Object Tree will put a plus or minus symbol next to it.  Use these symbols to open and close each particular list.

To open the Object Tree, go to View (Fig. 2) and select Object Tree.  You can also just press the F4 key.

                                                            Fig 2.

Renaming Objects
The Object Tree is an easy way to locate objects on a page, but it is also a convenient way to rename them.  This is very useful when you have layered or hidden objects.  Giving each object its own name will help keep things organized and make it easier for you to select specific elements.  Very useful when creating Actions.

1. Select the element you want to rename in your Object Tree - so that a solid blue box highlights the element.

2. Wait about one second, then click the left mouse button again.  You can now rename the object. Simply type in the new name.

You can also change the name by first selecting the object on the page and then clicking the left mouse button over the element (highlighted in gray) in the Object Tree.

Back to the lesson

[Home] [Start Here] [ Plan] [Design] [ Build] [Grow] [Find] [New]