Quick Tips for Working with Hotspots in MetaDraw
MetaDraw is a powerful tool for creating and responding to Hotspots within an image.
Better yet it's easy.
The technique is simple:
a) Set up the hotspot regions
b) Trap events in MetaDraw to respond to user actions;
clicks, double clicks, or mouse movement over a hotspot
A hotspot map is basically a set of shaped regions which overlay
some image. Each shape can have multiple named attributes
such as a name and a database pointer, perhaps a URL associated with the shape.
For a map of the USA we might have shape attributes such as state name, capital city, and population.
For simple application you can use the HS Editor utility included with MetaDraw to create hotspot maps which you will then ship with your application.
If you prefer, the shapes can be created in your own application, either by drawing them directly with your code, or by allowing users to draw the hotspots in your application ( using MetaDraw ) similar to the way it is done in HS Editor ( remember HS Editor was itself created using MetaDraw )
Creating a HotSpot Map Using HS Editor Tool
- Open our Hotspot Editor utility
- User File / Load menu to open your background image
- Use the toolbar to choose shapes you may wish to add as hotspots
- Draw your desired shapes.
- Pick the select tool ( Arrow ) from toolbar and then select a shape
The shape should now have selection / resize handles
on it. You can move, or resize the shape,
or you can hit Delete key to delete it.
- To make a shape into a hotspot
- Choose the Format / Hotspot Info menu while the shape is selected
- Select the checkboxes for the desired HotSpot attributes
- HotSpot - MetaDraw triggers onHotSpot event when
user moves into, within, or out of a hotspot
- Visible - probably you want false so shape is not seen
- Web URL - allows MetaDraw to control IE in response to
clicks on the hotspots
- Click - MetaDraw will trigger HitObject Events when user
clicks a hotspot
- DoubleClick - MetaDraw will trigger HitObjectDouble Events
when user clicks a hotspot
- Cursor - makes cursor change while over a hotspot
- Specify name for object in the HotSpot info area
- If desired specify a URL
- Click OK
- If desired additional tags can be set using the Format / Object Tags menu
- Repeat steps 4 through 6 as desired for multiple shapes
- Test by selecting View Only tool ( first on left ) from toolbar
Invisible objects should now be hidden
- Depending on checkboxes you selected in step (6/2) above
- The Mouse should change when moving over hotspot
- The name you specified in objTag / HotSpot Info field should appear as a tooltip
- A msg box should appear in response to Click or Double Click
- IE should open to the URL specified in response to double click
- OK now save the Hotspot map
Probably you do not want to include the background image
so select the Selection tool and click on the background
( not on a hotspot ) and hit Delete key
- Now select File / Save As menu
- Specify MetaDraw Picture ( mdp ) as the format
- If you later want to revise the hotspots
- Use File / Load to load the Jpg image
- Use File / Merge to load the hotspot layout
- Remember to delete the background again before saving the layout
HS EDITOR NOTES
- If you don't mind big files, you can save and load the original background and hotspots together
- To Undo use Shift Backspace
- HS Editor was written using MetaDraw
Responding to HotSpots using MetaDraw in your Application
- Use LoadPicture with 2nd parameter PIC_PICTURE to load initial JPG
- Use LoadPicture again with 2nd parameter PIC_PICTURECLIP to load the hotspot Map
- Set EditMode = ED_VIEW, ShowInvisible = False, HotSpots = True
- Trap the events OnHotSpot, HitObject, HitObjectDouble and read the ObjTag property
so you'll know what object was hit or moved over
Creating a HTML ImageMap with MetaDraw
It's easy to create HTML ImageMaps - setting up hotspot areas for any raster image in a web browser
Just create your hotspots as described above and call the CreateImageMap method from MetaDraw - yes, it's that easy.
EXAMPLE - Hotspot Creation Application in your web browser
to see an example right in your web browser. You'll be able to draw shapes, and create and name hotspots,
and then test it out. To see the actual code just right click ( outside of MetaDraw ) and select "View Source"
Believe it or not that's all the code you need - you are done !
sssh! - Remember - don't tell your boss how easy this was.