Tutorial - Exporting "imagemap" web tour

This tutorial shows how to take a linked scene and export it as single nodes using a template that creates a predefined imagemap for you to start designing a web tour with.

Step 1

We assume you already have a fully linked project ready to export, completed with imported nodes, hotspots, and connections to nodes. If you need assistance making such a project, see the "Gazebo Walk" tutorial. (We are going to use Gazebo Walk to illustrate this tutorial.)

Step 2

Click the "Export Single Nodes..." button and type a name for the folder of movies (all files a written into a folder to keep them together).

Step 3

Choose "Movies + HTML Imagemap" from the Format popup and click "Save".

Step 4

Allow the files to be written to disk (this will take approximately one second per node on a typical G4).

Step 5

Open the resulting folder from the Finder.

You will notice that there are ".html" files interspersed with ".mov" files.

There are also the files 'nodemap.html' and 'nodemap.jpg'. These are the imagemap related files and are the ones you will need to modify to improve the appearance of your web tour.

Step 6

Double-click the "" file to open the template web tour in your default browser.

In the top left area is the node list in text. Underneath it is the imagemap.

If you click one of the blue circles on the imagemap, the node movie to the right should update. All of these "href" links are defined in the file 'nodemap.html'.

The image itself is contained in the file 'nodemap.jpg'.

The whole frameset is held together in the file 'index.html'.

This ends the tutorial.

Watch Movie of Tutorial Being Performed  [1:01]

(Return to List of Tutorials)