is now part of CreativePro.com!

Showing and Hiding Objects in Interactive PDF

53

In my recent postings on creating buttons in interactive PDF, I gave some tips on creating buttons. A question on the Adobe InDesign Forum reminded me of another.

I have been tasked to produce a product that will consist of a interactive map of sorts in a PDF format. The map will consist of about 80 locations (marked with a small circle and the city name) with contact information for particular individuals. My plan was to have a mouseover/hover text pop up containing the contact information when the mouse is over the circle/city name. If anyone could help me figure this out it would save me an immense amount of time.

This is pretty easy to do in InDesign, but the method isn’t obvious. It requires creating two separate buttons?one for the object to be shown and hidden, and one for the button which triggers the show/hide effect.

I’ll first illustrate this in InDesign CS4, which has a more elegant interface for creating buttons:

1. Turn the object to be shown/hidden into a button using the Buttons panel. (I chose an image of a balloon festival and chose Object > Interactive > Convert to Button.) This button should have no action, but choose Hidden in PDF as a property from the panel menu.

Balloon button

2. Create the trigger button. (I selected one of the buttons from InDesign CS4’s Sample Buttons library, and added some text.) For the Event called On Roll Over, click the + button beside Actions to add an action. Choose the Show/Hide Buttons action. Set the visibility of the show/hide button (the balloons) by choosing the eyeball icon to indicate that it’s visible on roll over.

Show Me Roll Over State

3. For the same button, choose the Off Roll Over event. Again, choose the Show/Hide Buttons action. Set the visibility of the show/hide button (the balloons) to the eyeball with the slash symbol (meaning hidden).

Show Me Roll Off State

Export the PDF (remembering to turn on the Interactive Elements checkbox on the Export PDF dialog). Mousing over the trigger button shows the hidden button. Mousing off it hides it.

PDF result

Working in InDesign CS, CS2 or CS3 works essentially the same. For details, refer to InDesign Help. In brief, you’ll create the same two buttons, and use the States panel to set the same properties. Here are what the choices in the dialog look like in InDesign CS3:

CS3 balloons

Steve Werner is a trainer, consultant, and co-author (with David Blatner and Christopher Smith) of InDesign for QuarkXPress Users and Moving to InDesign. He has worked in the graphic arts industry for more than 20 years and was the training manager for ten years at Rapid Lasergraphics. He has taught computer graphics classes since 1988.
  • Marilyn Glisci says:

    Thank you so much for this tutorial, I’ve been working on this for a day now. This is exactly what I need!! Will let you know if it works for me!

  • 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?

  • @Cathy: Yes, the frame itself is the button, not the picture. Even more frustrating, Acrobat cannot do non-rectangular buttons.

    • Jennifer Weaver says:

      I have created an interactive pdf from CS5.5 that used the hidden pop ups with a trigger button…worked great. Now I’m using the CC version and have created these buttons the same way as previously done but now the button will pop up when I roll over the trigger but it will not hide? I have a file that has to go LIVE today and am so freaked. Can anyone help?

  • keith yates says:

    I want a caption to appear when they roll over a photo and then to disappear when they roll off. I cannot seem to make it work.

  • @keith: The instructions in Steve’s blog post above should give you all the details you need. If you still can’t get it to work, you might consider heading over to the Forum (click Forum above) and describing what you’ve tried there, so more people can help diagnose the problem.

  • Will the text be able to be read by a screen reader to comply with ADA requirements?

  • @Vicki: I’m not sure what you’re asking about. For information about accesibility issues, I suggest looking at these articles: https://creativepro.com/tag/accessible

  • Rob Cubbon says:

    Can this be done when you hover over a word within a text box. Obviously, you could just create an invisible button over a particular word but that wouldn’t work if the text was subsequently edited and the word moved.

    So is it possible to use this to create a pop-up message when you hover over certain words within text?

  • Carla Beals says:

    can you do this in Adobe?

  • Highgeared says:

    Can you update this to CS6? I dont have CS4 and some of the commands are a bit different. or missing.

  • Stuart says:

    Trying to do this on CS6, the only difference, in terms of interface, is that the ‘hide object in PDF’ button has changed to a check box in the same window.

    I am not managing to get this to work, I have some questions:

    Are there two separate buttons (labeled show me) ?

    Does the Ballon image need to be set to ‘on roll off’ (i see it your the image, but not on the instructions)?

  • Stuart says:

    UPDATE: This works when I export it in SWF, but not in interactive PDF :(

  • @Highgeared: Here’s the CS6 panel:

    As @Stewart said, the interface is pretty similar.

    @Rob: You can, but you need to convert the word to outlines (select the word, then choose Type > Convert to Outlines) so it becomes an object. That’s what I’ve done in the image above.

    @Stewart: No there is only one button. The actions are different for roll on and roll off. The balloon image has no actions, I think; it’s a “button” only because it needs to be in order to be controlled by the button. Not sure why it would work in SWF but not PDF for you; be sure you’re exporting to Interactive PDF (not Print PDF).

  • Jay says:

    Can anyone help please…..
    I’m currently working on a project, everything works fine when I export it as interactive pdf. However, I want certain buttons to reamin the same size when you zoom in in Adobe Reader. I didn’t realize that until I starated working on this project which is way different to others and in order to review it after is done I need to zoom in to a certain area due to the many buttons thatI have and the button that is supposed to hide/show is not visible anymore.
    Help please….
    Thanks in advance.

  • Halmet says:

    I love you. Found this tutorial quite fast when I was browsing the web and it was really what I needed. Simple and powerful tools those buttons!

    It’s a teeny bit different in InDesign CS5 now though. But it works pretty much the same way and when you’re clicking through the options in the buttons toolbar you see that the possibilities are endless.

    Thank you!

  • Ava says:

    Using InDesign CS6, this doesn’t seem to work as an interactive design.

  • mrdusnob says:

    I created an interactive PDF with InDesignCS5.5 but all the buttons are not showing on mobile devices. Is there anyway they can show up and work!?

  • GKODASH says:

    Same problem here ( InDesign CS6) it works well when exported as SWF, but doesn’t work when exported as interactive PDF. Also I have applied rollover effect on the buttons (a stroke) -so in PDF it appears for a second and then disappears again.

  • Nick says:

    Hello. I’m trying to have a rollover button so a box pops up with more text and a link inside. I also want the pop up box to disappear when I roll off. This bit is done but the problem is the pop up box disappears when you move towards the link. Any idea anyone

    Thanks

  • DanW MN says:

    HI All,

    I think I’m overlooking something. May I ask for your help?

    Have buttons that successfully hide, but the hyperlinks remain….? Can we kide the links also?

    Detail:
    have a successful “interactive PDF” that has buttons to [show/hide a layer] of content (had to do that from Acrobat). At the same time, I’m having these buttons [show/hide buttons] that are on the page.

    These buttons have hyperlinks set from InDesign.

    The [Show/hide buttons] is successful, but:
    the silly hyperlinks remain thus they remian while the top layer is toggled on and disrupt the content.

    Any clues on how to hide the buttons *& the links?

    Thanks much~

  • DanW MN says:

    PS: My buttons to hide are transparent frames with a transparent rollover color.

  • DanW MN says:

    HI All,

    -Found a workaround.

    I’m already doing [Set layer state] in Acrobat, so I just put the buttons to hide on a new layer and add that to the action. duh~

  • marisa v says:

    Hi. I’m trying to make a form that appears upon clicking on a button. I believe the form needs to be a button and a form to make it appear and disappear but so far I have NO idea how to make it both. Any suggestions?

    Thanks much.

  • marisa v says:

    Hi. I wanted to give more details on the post I placed above. I am able to make the form appear (leaving it as a form, not a button) through making a different option into a button. BUT as soon as I set that same button to make the object hide the whole button loses its function (no longer makes the form appear or disappear).

    I tried adding a second button on the form to make it hide after filling out and it worked before filling in the form but not after.

    I’d appreciate any ideas.

    thanks

  • marisa v says:

    OK. sorry for multiple posts. I think I got it. I was trying to assign the same command to multiple functions (click on, click off) but when I changed it to roll over and click off I was able to get it to work.

  • James Seaman says:

    Hey what’s going on

  • Ellen says:

    Thank you so so much for this!

  • Joey says:

    Hi there… I’m seriously frustrated with buttons & forms right now. I want to use the feature in indesign cs6 where my button is visible in pdf but doesn’t print. Unfortunately for ME, my buttons & forms panel does NOT have this option like your example shows for cs4. Any help is much appreciated. I know this is a simple thing, but for some reason I am retarded right now because I cannot find how to edit this option in cs6. Should I just downgrade? ha!

    • Joey: At the bottom of the Buttons & Forms panel there is a little section called PDF Options (you can open it with the triangle if it’s closed). That contains a “Printable” checkbox. Yes, that dialog box has gone through some changes since this article first came out.

      • Joey says:

        Thank you for your response, David. I’ve tried the “Printable” checkbox. Unfortunately, when I export my document as an interactive pdf the static button that I want visible but NOT to print does not come thru on the pdf file. I literally get a blank page with only my interactive content. Basically what I am doing is creating a template for a moron’s billing statement. He needs to be able to see his background image (aka the button) which is what is on his pre-printed shells (on paper). He needs to be able to fill in the blanks on his billing statement but since his statements are pre-printed shells, I only want the interactive content to actually come out of his printer when he prints on those pre-printed paper shells. Does that make sense? I have a screen shot, but I just realized I cannot upload images to this comments section.

      • Joey: It sounds a bit like what I wrote about here: https://creativepro.com/making-a-fillable-1099-misc-pdf-for-printing.php

        This might be better handled in the Forums section. You can’t upload images there, either, but you can post images on one of many different “image upload” sites and then link to it from the forum post.

  • Michele says:

    Hi there, is it possible to create a button, that when clicked hides a slideshow and reveals a list, and when clicked a second time, reverts back to hiding the list and revealing the slideshow? I have created a contents as a slideshow, but would like the user to be able to tap a button and view the contents as a list if they prefer. Thanks in advance for any help you are able to offer,

  • Steven S says:

    I’ve had a problem with the show/hide function when it comes to certain buttons. It would play in the SWF preview but not in Acrobat (as is with too many things!). Some buttons would show up and others not. After a while I found out that the buttons that were showing up were buttons which contained both live text and vector grouped together in the same button. Racked my brains trying to find a solution, but after a while I realised that if the text is turned into outlines then it works just fine.

    It seems that buttons composed purely of text or purely of vector work fine, but when grouped together do not work. Just thought I would share this as I lost a day and a bit trying to figure it out, and I haven’t seen it written down as a solution anywhere else.

    • Kim B says:

      You are a star!! I have just spent a couple of hours trying to work this out and finally found your post here. Thank you so much for posting this as I would probably be still trying to work it out.

  • Such a great online pdf form filler tutorial blog post. I was working on filling out a form through PDFfiller; https://goo.gl/T7cgtI. It has a PDF search engine with wide array of fillable forms and some are Free. The edit toolbar is very easy to follow allowing highlights and line to be created as well. It might be of help David.

  • art dibbs says:

    Great tutorial!
    Is there a way to create an interactive PDF template where default images could be replaced by simply clicking on them and selecting jpgs from your HD?
    I need to create several fliers for people and make all text fields editable with pre-defined fonts and images replaceable.
    Can it be done with indesign?

  • EvaDM says:

    Hello Steve, first of all thank you for this great tutorial, it’s very instructive!

    I’m trying to do the same thing with the “check box” option, but I didn’t manage to find how to pass to the “uncheck” state. What I want to do, is that when I check a box, an image shows up and when I uncheck it the image disappears.

    Thanks in advance for your help.

  • Praditha says:

    Hello everyone,

    Need your help to know the task I’m going to do is a possible thing or not. I have Adobe Indesign CS6. I want to create a form. There are many check boxes. When I click on a 1 check box, I want to show a text box and add notes. If check box is not clicked, text box should be hidden. I can show you it to you. But I can’t find a place for any attachment. Can you please tell me this is possible or not in Indesign?

    Kind Regards,
    Praditha

  • Helen says:

    Hi! Super helpful tutorial – thank you! I’ve selected the click option, so when you click on the button, it shows the hidden image. I tried to set it up so when you click on it again, it hides it again but can’t figure it out. Any clue how to do this?

  • Revathi says:

    Hi.. Mine is a CC2014 version. Am not able to find the button options tab. Any help is very much appreciated. And thank you so much for this tutorial. Exactly what I wanted.

  • Chris says:

    Hello Everyone,

    First off, great tutorial, really enjoyed it.

    Secondly, I was trying to use a button to make a placed video appear and disappear. Indesign doesn’t seem to allow this, but I thought I’d check to be sure.

    Thanks for your help,

    Chris

  • Arden says:

    Hi,

    This is great information and very useful. I was hoping you could help me! I am creating a product catalog. I am trying to have text appear when scrolled over on each picture. I tried creating the picture as the first button and then the text as the button that appears when rolled over. However I am having difficulties getting it to work.

    Thanks for any help,

    Arden

  • Lou Blazquez says:

    I have two exported pdf versions of my newsletter. One is interactive and works fine. The other is a high quality print version. I didn’t expect the video to work, but I didn’t want a blank space where the video is set. I want it to show a picture, as it does in my CS 6 version when I am editing it. How do I do that?

    Please don’t recommend that I upgrade, because I object to the monthly fee model of sales.

  • I have two exported pdf versions of my newsletter. One is interactive and works fine. The other is a high quality print version. I didn’t expect the video to work, but I didn’t want a blank space where the video is set. I want it to show a picture, as it does in my CS 6 version when I am editing it. How do I do that?

    Please don’t recommend that I upgrade, because I object to the monthly fee model of sales.

  • Hi,

    This is great information and very useful. I was hoping you could help me! I am creating a product catalog. I am trying to have text appear when scrolled over on each picture. I tried creating the picture as the first button and then the text as the button that appears when rolled over. However I am having difficulties getting it to work.

    Thanks for any help,

  • HI All,

    I think I’m overlooking something. May I ask for your help?

    Have buttons that successfully hide, but the hyperlinks remain….? Can we kide the links also?

    Detail:
    have a successful “interactive PDF” that has buttons to [show/hide a layer] of content (had to do that from Acrobat). At the same time, I’m having these buttons [show/hide buttons] that are on the page.

    These buttons have hyperlinks set from InDesign.

    The [Show/hide buttons] is successful, but:
    the silly hyperlinks remain thus they remian while the top layer is toggled on and disrupt the content.

    Any clues on how to hide the buttons *& the links?

    Thanks much~

  • Working in InDesign CS, CS2 or CS3 works essentially the same. For details, refer to InDesign Help. In brief, you’ll create the same two buttons, and use the States panel to set the same properties.

  • 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.

  • Jax Sargent says:

    THANK YOU, so very much, for this excellent tutorial. You have given me an excellent tool to meet a “challenging” request.

  • Cosmin says:

    Is there a way to save the button hidden state on pdf exit?
    I’m trying to create a virtual points gathering form

  • >