Hotspots and Scrolling Panels

May 06, 2013


I have two questions.

1. I have a screen clipping on a slide that shows a webpage. When someone hovers over a link I want a text box to pop up that relates to that link. In the past I have used markers to get a box to pop up but I do not want the physical presence of a marker on the screen I just want the box to appear when you hover over it. I am currently doing this with a hotspot that displays a new layer when you hover over it. Is this the best way to do this or is there a better option?

2. I have this screen clipping in a scrolling box. The problem is that my hotspots are not anchored to my background image (screenshot of the website) so when a user scrolls down the hotspots are moving with them. Any thoughts on how to fix that?



14 Replies
Kevin Thorn

Hey Rob,

I can help you with #1, but I'd have to play with #2 to see how that behaves before making a suggestion.

The best way I can think of to your hotspot popup without a physical presence is quite simple.

  • Create a shape to cover the area you want users to click. Long skinny rectangle, circle, etc.
  • Edit states
  • Depending if you want to show the popup on hover or when a user clicks depends on what State you edit.
  • For hover - add a new Hover state and add a rectangle (or rounded rectangle) with the necessary text.  
  • For click - add a new Selected state similar to the above rectangle with text.
  • Done editing states
  • Format the shape and set the transparency to 100%

Your shape in its Normal state will not be seen on screen. Thinking out loud here but you probably won't need a trigger if you have the popup set to the Hover state. If it doesn't show, simply add a trigger > "Change the State of [shape] to [state] when Mouse Over."

If you set the popup on a Selected state, you'll have to add a trigger > "Change the State of [shape] to [state] When the user clicks.

I use the Selected state often as users have control over turning it "on" and "off." Plus, I can add even more interactive elements (another button) to the selected state of the current button.

Hope that helps.

Nancy Woinoski

For option 2 - have you tried grouping the hotspots and the background image? I have never tried this so am not sure if it works. If it doesn't then use transparent shapes like Kevin suggested for your first question. You should be able to group the shapes with the image and then I think they should scroll together.

Rob Morgan

Thanks Kevin, for some reason I always forget about states. I do not use them frequently and then when I need them I forget that they exist. I will try that this morning.

Nancy, grouping was my initial thought as well but I tried it yesterday and the hotspot is still not anchored to the image.

I will test out some of the suggestions with states this morning.



Scott Wiley

I've added hotspots and/or shapes to a larger image within a scrolling panel many times. And they will move along with the large image/shape when scrolling.

The key is to have all the items (the main oversized image and its hotspots/shapes) selected together BEFORE adding to the scrolling panel by dragging them all at once over top of it.

I've never found a way to add a hotspot or shape to a scrolling panel once it has been activated by previously adding something oversized to it.

As for the popups, you cannot have items on layers move along with scrolled content. In my case, I always had the layers show in the same position, no matter where the scrolled image w/hotspot was in relation to it.

However, if you use transparent shapes as your hotspot instead of actual hotspots (which have no states) you can add your pop-up content to the "hover" state.

Hope that helps.

Steve Shoemaker

OMG I love scrolling panels now! I had problems getting the hotspots to "stick" but now that I know how to do it I'm able to create very detailed simulations of web-based applications, Blackboard in particular, where scrolling is common.

CONFIDENTIAL MATERIAL: This message contains information which may be confidential and privileged. Unless you are the intended addressee (or authorized to receive for the intended addressee), you may not use, copy or disclose to anyone the message, attachments, or any information contained in the message. If you have received the message in error, please advise the sender and delete the message.

Lara Johnson

Thanks for this- exactly what I have been trying to do- Works a treat now.  I would also just add another note - found on a different discussion....

For a shape to recognize that the mouse is over it, it has to have a fill. To make a filled shape invisible, you can set its transparency to 100%.

If the shape is hidden initially, it will not sense the mouse.

If you set it to no fill the Hover state down't work.

Thanks again all.


This discussion is closed. You can start a new discussion or contact Articulate Support.