• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 9. Using Actions and JavaScript > Adding “on call” actions to images

Adding “on call” actions to images

Now that the image has been prepped, you can create the “on call” head actions that will make the More Info boxes work properly when the image is clicked. Since you want to display only one More Info box at a time, you'll create a group of head actions that will close all of the boxes in case any are showing when the visitor clicks a More Info button.

1.
From the Smart set () of the Objects palette, drag the Head Action icon to the head section of the document window.

Dragging a Head Action icon to the document window automatically opens the head section of the document.


2.
In the Head Action Inspector, click on the Show Action Palette

3.
In the Actions tab of the Rollovers & Actions palette, select OnCall from the Events section.

4.
In the Name field, enter closeInfo.

5.
From the Action pop-up menu, choose Specials > Action Group. An action group can contain more than one action.

6.
Click the Create new action button () to add an action to the group, and select the newly added action (? None).

Clicking New button

7.
Expand the Rollover & Actions palette to show all of the Action section in the lower half of the palette

8.
Choose Multimedia > ShowHide from the lower Action pop-up menu.

9.
Set the action's attributes using the Layers pop-up menu so that this ShowHide targets the ACMEInfo layer, and set the mode to Hide using the Mode pop-up menu.

Choosing Hide from Mode pop-up menu

10.
Click the Create new action button () again, and select the new action.

11.
Again choose Multimedia > ShowHide from the lower Action pop-up menu, and set the target to the FOOZInfo layer and the mode to Hide, using the Layers and Mode pop-up menus.

12.
Close the head section of the page.

13.
Choose File > Save to save your work.

Now that you have the necessary “on call” actions defined, you can assign the actions to the More Info image that you inserted earlier.

14.
If necessary, select the more.gif image in the document window.

15.
In the Actions tab of the Rollover & Actions palette, select the Mouse Click event, and add three new actions by clicking the Create new action button () three times. Since the actions are not yet defined, each appears with the name None.

Note

If no events are present in the Actions palette, make sure you entered # in the Link tab of the Inspector.

16.
Select the first action, and choose Others > Scroll Right from the lower Action pop-up menu.

17.
Set Scroll Pixels to 300 and Scroll Speed to 50.

18.
Select the next action, and choose Specials > Call Action from the lower Action pop-up menu. This lets you call an action already defined—in this case, closeInfo.

19.
Choose closeInfo from the Action pop-up menu.

Choosing closeInfo

So far the assigned actions scroll the window to the right and close any info boxes that might be open. Now it's time to define the final action, so that it opens the correct More Info layer.

20.
Select the final action, and choose Multimedia > ShowHide from the Action pop-up menu. Since the image is in the ACME row, set the layer to be ACMEInfo and the mode to Show.

If you don't see the third action you created, scroll down in the palette window or increase the size of the top portion of the Actions palette. Place your cursor over the dividing line between the upper and lower half of the palette. When the cursor turns into a double-headed vertical arrow, drag down to enlarge the Actions area.


Enlarging the upper portion of the Actions palette

21.
Choose File > Save.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint