Creating Button Hot Spots (CS4), Part I

Here’s another “Bonus Documentation” entry in which I flesh out a task that falls outside the scope of our documentation. When I wrote about creating buttons in InDesign, I included a topic called “Creating button rollover states” that merely hints at one way of creating a hot spot. After I write this blog entry, I’ll link to it from that Help page.

TIP: If you create blog entries or videos for InDesign, or are aware of useful links, please add a comment with a link to the related Help topic. It’s a good way to highlight valuable community content.

Let’s suppose you have a map of France, and you want the Eiffel Tower to appear when (1) the user hovers the mouse pointer over the Paris area or (2) the user clicks in the Paris area.


(1) Creating a hover hot spot (InDesign CS4)

If you’re not sure of the button effect I’m trying to create, you can see what my Eiffel Tower hot spot looks like by viewing the PDF: View PDF file. Hold the mouse pointer over the Paris area.

1. Place the hot spot image. In my example, I’m placing the Eiffel Tower over the Paris area on the map of France. Make sure the image frame doesn’t have a stroke, unless you want it to show up all the time.

2. Open the Buttons panel (Window > Interactive > Buttons). Select the image you want to use as the hot spot, and then click the [Normal] state in the Buttons panel.

This turns the image into a button.

hotspot_1A.png

3. Now, click the [Rollover] state in the Buttons panel to activate it.

Whatever changes you make to the image while the [Rollover] state is selected distinguish it from the [Normal] state. For example, you could add a red border that appears to flash on rollover. However, in our case, we want the image to become visible during rollover, so we want to leave the [Rollover] state as is and get rid of the [Normal] image.

4. Select the [Normal] state in the Buttons panel. Use the Direct Selection tool to select the image, and delete it, leaving only the frame. (If you delete the frame, the whole button will disappear.) Click the empty text frame to view the button states again.The [Normal] state should be empty, and the [Rollover] state should still contain the image.

hotspot_1B.png

Unfortunately, there’s no way to test buttons in InDesign, so you’ll need to export the PDF or SWF to see if it worked.

5. Export the document as a PDF. In the Export Adobe PDF dialog box, make sure the Interactive Elements option is selected, or the buttons won’t be active in the PDF.Again, to see the PDF of my Eiffel Tower hot spot, go here: View PDF file.

That’s the easiest way I can think of to create a rollover hot spot. In Part II, I show how to create a clickable hot spot.

5 Responses to Creating Button Hot Spots (CS4), Part I

  1. Brad says:

    Instead of deleting the image in the [Normal] state, you can also create a different button to act as the hotspot and then use the Show/Hide Button action with the On Roll Over (show) and On Roll Off (hide) triggers. Remember to use the Buttons panel menu to hide the image in the PDF when it opens.

  2. Julia says:

    Thank you So much for this info. I’ve been going around the track trying to figure this out. Knew there was a way.

  3. Cathy Fraser-King says:

    I’m experiencing a problem with the roll over. The info box appears when you roll over the space that that exact box takes up, even though it’s not visible, instead of when you roll over the “info” icon only. This means that the box obstructs most of the page your mouse in in the general vicinity of the box.Can you help?

  4. Bob Bringhurst says:

    Create an additional button. Make it invisible and hidden when the PDF opens. Set On Roll Over to display the other button (and make sure On Roll Off hides that button).

  5. Asia says:

    hey, i have the same problem that Cathy does, and response of Bob seems quite the solution, tho i don’t know how to make a button inside the button. I can create them separately but not with the action that triggers the other action. help please?