Creating Button Hot Spots (CS4), Part II

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.

Hotspot_2A.jpg


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.

Hotspot_2D.jpg

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.

Hotspot_2B.jpg

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.

Hotspot_2C.jpg

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.

9 Responses to Creating Button Hot Spots (CS4), Part II

  1. Scott Sheldon says:

    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]

  2. Meagan Tyson says:

    Hi Bob! Is there a way to have a text box appear on roll over and disappear on roll off in an SWF file? I’m having the same problem Scott had where the box is in view when I go to the page.Thanks!

  3. Bob Bringhurst says:

    Sure. Make the text box a button and then create a separate button that shows and hides the text box button.

  4. sinscy says:

    Thank you very much!!!
    It ‘s really cool to find some good blogs mades by owesome person like you who take time for the others!
    I was blocked at this step with the way to manage the differents states of a interactif button and your blog on the subject was the first and best I found.
    Nice job ;)

  5. Gabriel says:

    Is there anyway to have the hot spot button show an image when rolled over somewhere else on the page and disappear when rolled off. I’m using CS5 and wish to export as a swf.

    • Bob Bringhurst says:

      Yes, use the Show/Hide Button feature as described in this article.

      • tessa says:

        I need to achieve the same thing. The show/hide button does not allow the image to appear somewhere else on the page, do you know how This can be achieved?

        Thank you
        Tessa

        • Bob Bringhurst says:

          Use two buttons. The hot spot image is one button and the target image is the other button.

  6. sara Cucinotta says:

    So, do you have a tutorial for the same thing for CS5.5? They changed it all and I find Indesign’s explanation very unsatisfactory. Your explanation (for CS4) is superb.