In this lesson, we are going to show you how to add mouse  over highlights to your navigation buttons.  This action can be seen by using the example below.  Once the page has loaded, simply put the mouse arrow over the text descriptions and notice the change in text color.

This lesson is actually part two of "Action with Layers."  We are going to expand on that lesson by making our navigation buttons highlighted with a mouse over.  Once you have come this far (by following all the steps in "Action with Layers"), you will be ready for this lesson. 

The steps are as easy as ABC, better yet - they are as simple as 1-2-3.  In fact, you will only need to add 3 simple ingredients or actions to each navigation button in order for this to work.  So let's start cooking.

1

   Step One - for all
  and all for one

This lesson only requires one major step using the 3 Musketeers, I mean, 3 actions.  This is taking into account that you are already up to speed and that you have followed the "Action with Layers" tutorial.  If not, you need to do so before you continue.

Okay, since we have already set the actions for each button to show a particular graphic image (the mouse over and mouse out), we now need to tell the navigation buttons to change places with another image.  Basically we are going to be creating a rollover for the image using actions.  The green text is going to rollover and be replaced by black text which is our highlight.

I will use the following "Baseball" text graphic (Fig. 1) as an example, since it is the first in our list of rollovers.

Now select the Actions tab to bring up the Actions Properties window (Fig. 4).  Notice the two actions from the "Action with Layers" tutorial.

Fig. 4

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 three actions you need to add.  First is to set the Values.  Second will be the Mouse Over Action, and third is the Mouse Out Action.

Click on the + symbol (Fig. 5).

Fig 5.

This will bring up the Set Action Palette (Fig. 6) so you can add your first action.  Remember, these actions are in addition to the two actions from the tutorial "Action with Layers" that you should already have.

Fig. 6

Using the recipes below, fill in the appropriate fields.

Action 1:

The first action is the most important - and even though the steps are simple, it can be a bit confusing.  The reason is, we will be using more unique settings.  On the left, in bold, is the particular field you need to change and on the right, in italics, is what you need to select or change the field to.  Okay, let's do it. 

When - Page / Page Loaded

Usually we use Mouse - Mouse Over or Out.  But since we want to place a graphic in the same location as the first (without having to actually place the graphic on the page when we build it in NetObjects), we will need to use these special settings. 

Target - (leave it as it is)

For all this and the other steps, you can leave the target just the way it is.  This makes our job a little bit easier. 

Message - Object / Set Image (Fig. 7)

                                                                                              Fig. 7

Be sure and notice that you are selecting Set Image and not Use Image.

Parameter(s) - Values - Image 1 (Normal) and Image 2 (Highlighted)

This is the only step that requires a little more work.  When you select Values you are going to get a new window (Fig 8).

Fig 8.

This is where you will select the images for your rollover.  Notice the first four items have labels.  These help to offer full control of your action images.  For this lesson, we only need to be concerned with the first two: Image 1 (Normal) and Image 2 (Highlighted).   Image 1 is going to be the navigation button you start with and Image 2 is the highlight of that button.

Double click on the "Image 1 (Normal)" field to bring up the Picture File Open window.  Browse and select the graphic to be used as your default image, in my case it would be "Baseball Text."  When you're done, hit Open-OK-OK.  Repeat the steps for choosing your Highlighted graphic for Image 2. 

That's it for the first action, now you're ready for the second.

Action 2:

Now back to the easy stuff.  You need to tell the action what image to use when you mouse over.  This is where the Values setting (Image 1 and 2) comes in.  Also, in the Message field, instead of Object- Set Image, you will need to select Object - Use Image .  Simply  make the changes as follows.

When - Mouse / Mouse Over
Target - (leave it as it is)
Message - Object / Use Image
Parameter(s) - Image 2 (Highlight)

The reason you are selecting Image 2 is because this is a Mouse Over action.  When the mouse moves over the graphic you want the highlighted graphic to show - thus Image 2.

Action 3:

When - Mouse / Mouse Out
Target - (leave it as it is)
Message - Object / Use Image
Parameter(s) - Image 1 (Normal)

The reason you are selecting Image 1 is because this is a Mouse Out action.  When the mouse moves out or off the graphic you want the original graphic to show - thus Image 1.

Once you change the Message field to the appropriate selection, you will notice that "Image 1 (Normal)" is already selected in the P arameter field.  This is your original or default navigation button and there is no reason to change it.  So for action 3, you will only need to do two things; change the When and Message fields.

Hocus Pocus, now it's time to test it out by going to preview.  Make sure everything is working okay before making any more changes.  When you've done that, it's time to follow the same steps for the rest of your navigation buttons.

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.

3) If you want an even faster way to make multiple rollovers and/or other actions using specially designed components for NetObjects Fusion, check out www.coolmaps.com.

That's it - Have Fun!

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.

 

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