Text Actions

In this lesson, we are going to show you how to make text appear when you move the mouse over a particular object.  This action can be seen by using the object below.  Once the page has loaded, simply put the mouse arrow over the box with the Star in it and watch the text jump into action:

1

   Step One
  Adding your graphic and text

The first thing you will need is the picture and text you want to associate.  You can add a graphic by  selecting the Picture Tool (Fig. 1). This can be found in your Standard Tools.

      
 

Fig. 1

 

Once the Picture Tool is selected, you will then need to draw a small box 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. 2) 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. 2

 

Next, you will need to add your text.  You can do this by selecting the Text Tool (Fig. 3) also in Standard Tools.  You then draw a small box on the page and type in your text. 

         

Okay, let's assume I was following along with this lesson and I created the following graphic and text:

THIS IS A STAR IN A BOX

My goal is to get the text to appear only when I place the mouse over the graphic.  I also want it to disappear when the mouse leaves the graphic.  This action is called a Mouse Over or Mouse Out.  Steps 2 and 3 will show you exactly how this is done.

2

   Step Two
  Making the text invisible

The first thing you want to do with the text is to keep it hidden when the page is initially loaded.  The action of the mouse over will make the text visible.  But first, we need to make sure the text is not visible in the browser.  We do this by using the Text Properties Palette.

Select the text by clicking it.  When you do this, the Text 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 page or text and select Object Properties.  Once the Text Properties box is open, you want to select the Actions tab (Fig. 5).

       
                                                        Fig. 4


                   Fig. 5

Now with the actions tab selected, you will get the window in (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 text. Fig. 7 2.  Make a note of the Object ID.  In this case, it is Text11.  You will need to know this when you want to associate the graphic action to the specific text.

                                                       Fig. 6

If you don't give your picture a unique name, the ID will come up as a number.  Such as, "Text11."  If you want to give your graphic a unique name, simply type in the name you want in the Object ID field. 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.

 

3

   Step Three
  Adding the actions to your graphic

The final step is just as easy as the others.  First, you want to select the graphic (Fig. 8). This will bring up the Picture Properties Palette (Fig. 9). Fig.8 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.

                                                                    Fig 11.

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 at "clicked," which means the action would take place if you clicked 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."

2.  TARGET
Next you need to designate a target for the action.  This is where your text 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 text you want.  Remember in step two, I said to make a note of the Object ID?  Well, this is why you need it.

3.  MESSAGE
The message is going to tell your action what to do.  Since your text is hidden, you want it 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. 12).

                                                                   Fig. 12

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

That's it.  When you are done, you can select preview and test your actions.  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]