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

Lesson 9. Using Actions and JavaScript > Prepping images for actions

Prepping images for actions

To the right of the main body of the page are two overlapping layers (not currently visible) containing more information on two companies featured on the site. These More Info boxes are designed to appear when the viewer clicks a More Info button next to a company in the main table. You'll take a quick look at these boxes and then add an image to act as a trigger to display a More Info box when clicked.

In the Layers palette, click in the eye column opposite ACMEInfo (an eye should appear in the column). The ACMEInfo layer appears in the document window to the right of the main table. You may have to scroll to the right in the document window to see it. Click in the eye column in the Layers palette again to make the box disappear (the eye should disappear).

Notice that an equivalent Info layer is available for Fortuna (FOOZ).

Now you'll create a trigger so that a visitor can see the appropriate More Info box when the trigger is clicked.

In the index.html document window, scroll so that the table entry for ACME Industries is visible.

From the Basic set () of the Objects palette, drag an Image icon to the right-most cell of the table containing company information, in the row for ACME Industries.

Dragging Image icon to table cell

With the Image icon that you just placed selected, set its Source, using the Browse button in the Basic tab of the Image Inspector. Set its Source to the image more.gif located in Lessons/Lesson09/09Start/stockblock/web-content/images/. Be sure you set the link in the Basic tab of the Inspector and not the Link tab.

With the more.gif image in index.html selected, in the More tab of the Image Inspector, make sure that the Border option is selected and that Border is set to 0 so that the image does not have a border.

Click the Link tab in the Image Inspector, and click the Create Link button.

Enter # in the empty field, just as you did with the tab.gif file earlier.

Choose File > Save to save your work.



Not a subscriber?

Start A Free Trial

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