Skip to main content

Adding Hotspots (Pano2VR)

This is the documentation for Pano2VR 4. You can find the new documentation for Pano2VR 5 here.

Pano2VR - Help

In Pano2VR, you can easily create and add hotspots to your panorama. The hotspot editor is where you define the spot or area of interactivity and then you can modify the hotspot's actions in the Skin Editor using a hotspot template.

Below are instructions on how to add and draw the hotspots and how to use them - so read or watch on!

After loading an image or tour into Pano2VR or opening an existing project you can get to the hotspot editor by choosing, Modify, from the Hotspots section in the Project Window.

Video loading...

Watch this video on YouTube

Download the project files.

How to add hotspots[edit]

The following steps explain how to add hotspots to a single panorama. ◊ TIP: The current hotspot (that is being edited) is red. A non-active hotspot is blue.

Point hotspots[edit]

  1. In the hotspot editor, open the Point & Polygon hotspots tab.
  2. Select the point hotspot type.
    Choose point hotspot.png
  3. Double-click anywhere within in the image. A red bullseye will represent this point.
    Active point hotspot.png
To delete the point hotspot, select it (it will then be red) and hit the delete key. Poof!


Polygon hotspots[edit]

  1. In the hotspot editor, open the Point & Polygon Hotspots tab.
    Choose polygon hotspot.png
  2. Draw the hotspot by first double-clicking in the image. Then move to the next point, click, and continue until the shape is finished. Double-click to finish the shape. It will have a red fill:
    Active polygon hotspot.png
To delete the polygon hotspot, select it (it should be red) and hit the delete key.


Area hotspots[edit]

◊ NOTE: HTML5 does not support area hotspots and we do not recommend using them for new projects.

  1. In the hotspot editor, open the Area Hotspots tab.
  2. Select, Enable.
    Enable area hotspot.png
    A message pops up and asks if the hotspot file should be created. Choose, Yes.
    HSmessage.png
  3. Click the Add new Hotspot button, Add area hotspot.png. This will activate the Tools and fields as well as assign the hotspot an ID.
  4. Zoom in to the image to get better detail for drawing your hotspot. Use the Zoom option to choose how far to zoom in.
  5. Draw the hotspot.
    Choose a shape from the tool section and click and drag over the area in the image that is to be interactive.
    The area hotspot that you created will be red.
    Area hs v4.png
To delete the area hotspot, select it from the ID menu and click the red X to the right.


How to use the hotspots[edit]

The following sections will explain how to use the hotspots that were created in the previous section.

Tooltip[edit]

A tooltip is "A contextual popup that displays a description for an element." - w3.org

Tooltips have many uses in panoramas. They can be a way to describe something (e.g. painting) in the image, to help direct the user in a tour to the next panorama, etc.

Tooltip in Flash output.

To create simple tooltips:

  1. Open the hotspot editor.
  2. Draw either a polygon hotspot or an area hotspot.
  3. Enter text in the Title text box.
    ◊ TIP: simple HTML tags can be used.
    Tooltip tags.png
  4. Open the Advanced Settings tab in the Flash output settings or the HTML5 output settings.
  5. Select, Enabled, in the Hotspot Text Box section. This is where the text box can be customized.
  6. Output the project and test.

◊ TIP: If using polygon hotspots, you can choose to have the hotspots be visible either when the cursor hovers over it, or always. The background color and border of the shape can also be defined.


Link to a Website[edit]

Hotspots can be used to direct a user to external URL (any file or webpage that exists outside of the project). The most basic of these is to link to a webpage/website.

To link to a website:

  1. Open the hotspot editor.
  2. Add any of the hotspot types (point, polygon or area).
  3. (Optional) Give the link a Title.
    This will appear as a tooltip (hotspot text box) when the mouse hovers over the hotspot.
  4. In the URL field, enter a web address.
    Enter web url.png
    ◊ NOTE: The URL must be absolute in order for it to work. Meaning, that it must include http://.
  5. (Optional) In the Target field, use the drop-down menu to choose how the page will open. _blank will open the page in a new window.
  6. Output and test the project.


Link to another Panorama[edit]

If you have more than one panorama, you can link to them via hotspots. This is generally called a panorama tour or VR tour.

If you have a large amount of panoramas to connect, it might be worth upgrading to Pano2VR Pro, where you can create a tour in a faster,more effecient way.

To link to another panorama, you will need two projects. For example, pano1.p2vr and pano2.p2vr.

  1. Open a new project (pano2.p2vr) and create the panorama that will be linked (pano2_out.swf or/and pano2_out.xml).
  2. In a separate project - the starting panorama (pano1.p2vr) - open the hotspot editor.
  3. Add any of the hotspot types (point, polygon or area).
  4. (Optional) Give the panorama a Title. For example, Go to the next panorama.
    This will appear as a tooltip (hotspot text box) when the mouse hovers over the hotspot.
  5. In the URL field, enter the file name of the next panorama (the panorama you just created: pano2_out.swf or pano2_out.xml).
    NOTE1: If outputting to both Flash and HTML5, use the SWF, only.
    NOTE2: The SWF and/or XML and images must be located in the same folder as the starting panorama.
  6. Click, OK to exit and save the changes.
  7. Create the panorama and test the result. You should be able to click on the hotspot and it will open the next panorama.

To add a return link back to the starting panorama:

  1. Open the project of the second panorama (pano2.p2vr).
  2. Go the hotspot editor and add a hotspot.
  3. (Optional) Give the panorama a Title.
  4. In the URL field, enter the file name of the next panorama (the starting panorama: pano1_out.swf or pano1_out.xml).
    ◊ NOTE: The SWF and/or XML file and images must be located in the same folder as the starting panorama.
  5. Click, OK to exit and save the changes.
  6. Create the panorama and test the result. You should be able to click on the hotspot and it will open the next panorama.

If you have Pano2VR pro, you can use the Auto Place and Auto Place Both Ways feature. Make sure the images have GPS coordinates added in the User Data and do the following:

  1. Open the panorama in the Hotspot Editor.
  2. Drag in the connecting panorama from the Tour Browser to the preview. In the top-left corner, you'll see drop area called, Auto Place. Drop the pano here.
    Alternatively, hold the ALT key as you drag and you'll see Auto Place Both Ways. This will set the connection between both images.
Auto place.png

Autoplace both ways.png

Build a Tour[edit]

We use hotspots to also link to other panoramas allowing a user to virtually discover a building, area, etc. If your tour is small (just a few panoramas), it can be built using the steps above.

If the tour is large (many panoramas), it may be best to upgrade your license to the pro version and take advantage of the tour browser.

Learn more:


Connecting Hotspots with Skin Elements[edit]

When hotspots are used in conjunction with the skin, one can do a lot more with the panorama or tour than just moving between panoramas.

For example, you can use the hotspots to open information boxes or pop-ups:

  1. Open a project.
  2. Go to the hotspot editor, and add a hotspot.
  3. Give the hotspot a unique ID, e.g. popup1.
  4. Open the Skin Editor.
  5. Add a text box and then open its settings.
  6. Deselect, Visible.
  7. Add text to the text field.
    ◊ TIP: Simple HTML tags can be used here.
  8. Customize the text box's look.
  9. For the Hotspot Proxy ID, add the unique ID that was added to the hotspot (popup1).
    This text box will now have its actions triggered when the user clicks on that particular hotspot.
  10. Go to the Actions/Modifiers tab.
  11. Enter the following action:
    Source: Mouse Click
    Action: Toggle Element Visibility
    Target: $self.
  12. Click, OK and exit the skin editor, making sure to save the changes.
  13. Create the panorama and test the interaction.

This is a simple example. There is a lot more that can be done with hotspot proxies. For instance, you can have hotspots for just navigation and hotspots for just information boxes in the same panorama/project. Any element in the skin can be assigned a hotspot proxy ID; letting that element react to a particular hotspot.


Create custom hotspot images[edit]

If you want to take your hotspots to the next level, you can create a skin for your hotspots and add custom hotspot images (using Hotspot templates) and then add actions to them.

  1. Open the Skin Editor and either use your own skin or a pre-loaded skin like, simplex.ggsk.
  2. Click on the hotspot template button Hotspot.png and click in the Editor to add a hotspot template.
    This template acts as a placeholder and affects only point hotspots. The crosshair image will not be visible in the skin.
    You can place the template anywhere, as it's placement on the skin is arbitrary.
  3. Add a hotspot image, as a button,Add button.png.
    Importing the image as a button will cause the cursor to change to a pointing finger when the mouse hovers over the image, indicating interactivity.
    Importing the image as an image, will result in the mouse pointer not changing when it enters the hotspot area.
  4. Place the image over (or on top of) the hotspot template (the crosshairs).
  5. Make the image a child of the template.
    Child.png
  6. Using the Add Text button Text.png, draw a text box.
  7. Place the text box above your hotspot image.
    Textover.png
  8. Make the text box also a child of the hotspot template.
  9. Customize the text by double-clicking on the text box in the editor window or the tree.
  10. In the settings tab, give the text box an ID. This will help to identify it later. For this example, you can call it, HS Text.
  11. In the text field, enter: $hs.
    $hs is a placeholder that tells Pano2VR to find the information that has been entered in the title field in the hotspot editor and to display it in this text box.
  12. Customize the text box further by choosing the text color, it's text alignment, background color, and border color.

So far, your skin editor should look something like this:
Part3-1.png

Next, add actions to the hotspot template to have it call up information added in the User Data:

  1. Click OK to close the element editor for the text box.
  2. Open the element editor for the hotspot template and go to the Actions/Modifiers tab.
  3. Click on Add Action Addaction.png to bring up the source and action menus. Add the following action:
    Source = Mouse Click; Action = Go To URL
  4. Add the placeholder, $hu, in the URL field.
    This placeholder will call up the information already entered in the URL field in the hotspot editor.
  5. Add another placeholder, $ht, in the Target field.
    This placeholder will use the information found in the Target field in the hotspot editor.
  6. Click OK to exit the element editor.

Add actions to create a fade in/fade out effect to your hotspot image when the mouse enters the hotspot area:

  1. Open the element editor for the hotspot image.
  2. In the Settings tab, change the image's transparency by entering, 0.50, in the Alpha field. This will make the image 50% transparent.
  3. Go to the Actions tab and add the following action:
    Source = Mouse Enter
    Action = Change Element Alpha. Enter the number, 1, in the Alpha Field.
    This action will cause the image to fade in to 100% transparency from 50% transparency when the mouse enters the hotspot area.
  4. Finish the action by adding the following action:
    Source = Mouse Leave
    Action = Change Element Alpha; Alpha = .5.
    This action will cause the image to fade out to 50% transparency from 100% transparency when the mouse leaves the hotspot area.
  5. Click OK to exit the element editor.
  6. In the Skin Editor, click OK.
  7. Save the skin.
  8. Now, go back to the Hotspot Editor and add the ID of the hotspot template to the Skin-ID for the hotspot.
    This is especially important if you have more than one hotspot template in the Skin Editor. For instance, if you have one for information and one for navigation.
  9. Output the movie.

When you roll over the hotspot, it should have a fade in effect, and when then the mouse leaves, it should fade out.

◊ NOTE: This fading effect will affect all point hotspots associated with this panorama. This makes it easy to apply actions and effects to all hotspots within your project.

See also[edit]

Hotspot Editor (Pano2VR)
Building a Tour (Pano2VR)
Hotspot proxy
Using the Skin Editor
Floating Tooltip - Build a text box that stays with the mouse pointer.
Pop-up with Narration - Learn to build a custom skin that pops up a text box with an image and a sound file.