In Part I, I described how to create a simple hot spot, or hot link, in which holding the mouse pointer over an area displays a pop-up image. Now I'll describe how to create a clickable hot spot -- one that requires the user to click an area to display an image.
The steps for doing this are different in InDesign CS3 and CS4. Keith Gilbert described how to build PDF tooltips (PDF) in InDesign CS3.
Creating a Clickable Hot Spot (CS4)
We're going to use the Show/Hide Button action to display the hidden button when we click. (If you're familar with creating buttons in Acrobat, "Show/Hide Button" in InDesign is the same as "Show/Hide a Field" in Acrobat.) To create a hot spot that appears when you click, we'll need to create two separate buttons -- one to define the hot spot area and the other to appear when the hot spot area is clicked.
1. Use the Rectangle tool to drag a box over the area you want to define as the hot spot.
In my example, I created a box over the Paris area on the stunningly beautiful map of France.
2. Turn the rectangle object into a button. To do this, select the object, and then either click the [Normal] state in the Buttons panel, or choose Object > Interactive > Convert to Button.
3. Place the image you want to make appear when the hot spot area is clicked.
For now, you may want to keep the image away from the hot spot area to make it easier to select.
4. Select the image and convert it to a button. In the Name field of the Buttons panel, type a name for this button.
Since we'll be referencing this object, a descriptive name like "Tower" is easier to recognize than "Button6."
5. With the image still selected, choose "Hidden in PDF" from the Buttons panel menu.
When the PDF is open, you want the image to be invisible until the hot spot is clicked. Now we're ready to create an action to displays the hidden image. An action takes place when the user activates a trigger. We're going to set up two triggers with two different actions:
On Click = Display the image button when the mouse button is held down
On Release = Hide the image button when the mouse button is released
6. Select the hot spot object you created in the first step. For Event, choose "On Click." For Actions, choose "Show/Hide Buttons" from the plus sign menu.
7. In the Visibility section, click the box next to the image button to display the Eye icon.
This will cause the button you made invisible in the PDF to become visible.
Now we're going to add another action so that when the user releases the mouse button, the image will be invisible again.
8. For Event, choose "On Release." From the Actions plus sign menu, choose "Show/Hide Buttons." In the Visibility section, click the box next to the image button to display an eye with a red line in it.
9. Move the buttons into the right place and save your document.
10. To test your clickable hot spot, export to PDF. Again, remember to select Interactive Elements in the Export Adobe PDF dialog box.
To see what my goofy hot spot looks like, go here: View PDF
By the way, you can use a similar procedure to create a rollover effect in which one image appears when you hover the mouse over another object. Instead of using the On Click and On Release events as described in these steps, use the On Roll Over and On Roll Off events.
I still haven't figured out what causes the ghost border of the hot spot to remain after it's clicked. Let me know if you have an answer.
Hidden button question: When I export to swf, the target button (what I want to pop-up) will appear when that page is initially opened and will hide only when I click on the source button. Is this just a swf thing or am I doing something wrong.
[The ability to hide buttons applies only to PDF, not SWF. -Bob]