• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Just a simple image + info hotspots? What's the easiest way?

Explorer ,
Mar 02, 2021 Mar 02, 2021

Copy link to clipboard

Copied

Hi,

I want to create a project with images that have info hotspots. Just clickable hotspots that show you a text box with more info about the topic. Preferably there would be an option to hide the text box by clicking the same info button. What's the easiest way to achieve this?

Views

106

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 03, 2021 Mar 03, 2021

Copy link to clipboard

Copied

LATEST

One image with multiple hotspots I suspect?

Without any doubt the easies way is to use a two-state toggle button. Long name for a workflow which I have described multiple times. Most recently to replace a rollover. Have a look at this blog, second workflow and skip the first steps about the rollover caption. There is a Captivate tutorial (including steps for workflows) and a textual explanation:

http://blog.lilybiri.com/swf-to-html-replacing-rollover-caption-slash-image

 

Steps:

  1. Put a button over the location for the hotspot; I would recommend a shape button because it can have any form and is very flexible for styling (you can add an image and text in the button). 
  2. Open the Object State panel and delete the Rollover and Down state; if you use a shape button you can now define an object style. If you apply that style to the next button, you will not have to repeat this second step.
  3. With the Object state open, add a Custom state and add the text (and eventual image, audio,...) to the custom state. This screenshot shows an example of such a button and its state panel (from the blog I mentioned).
    ObjectState3.PNG
  4. Close the object state panel, go to the Actions tab of the button and choose 'Go to Next state' and indicate the button.

 

In this blog, you'll see the same workflow but using an image as button (which is only possible in version 11.5). But in your case the button on top of the image:

http://blog.lilybiri.com/click-slash-reveal-interactions-back-to-basics

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources