Learning Center
Contact Us
Create Interactive Map Solutions with MapsAlive

Make your maps even more interactive with mouse actions

A mouse action is what happens when a mouse event occurs. There are three mouse events:
  • Mouseover (you move the mouse onto a hotspot)
  • Mouseout (you move the mouse off of a hotspot)
  • Click (you click the mouse while over a hotspot)

You can assign an action for any of these events for each hotspot on your map. You simply go to the Hotspot Actions screen and specify which event and what action you want to occur. It's easy and very powerful.

See How It Works
The sample at left shows a few of the ways you can use mouse actions.
  • There are four text markers in the upper left (west of Maine). Each does something when a mouseover event occurs. The first makes the state shapes glow. The second displays star markers that are normally hidden. The third blinks a state shape. And the last displays a message and changes the color behind the checkboxes. This is done using JavaScript calls from each hotspot's mouseover handler. The mouseout handlers call JavaScript that restore the original appearance.
  • When you click a state it turns green and checks that states checkbox. Click the state again to turn it back to gray. You can also use the checkboxes to select or deselect a state. This is possible because the map can communicate with the checkboxes and the checkboxes can communicate with the map.
  • When you click the "+" marker the map zooms in. When you click the "-" marker it zooms out. This is a good example of how you can create your own zoom controls. Large controls like these would work well on a touch screen. Note that when the map first loads, the "-" marker is hidden since you can't zoom out yet. The click handler for the "+" marker makes the "-" marker visible.
  • When you click the PDF marker, a PDF file displays in a new browser window.
  • When you click the Wikipedia logo, a page about new England opens in a new browser window.
  • When you mouse over one of the six photo markers below the map, it shows its state flag and draws a route to its capital city.

To see how this tour works, click the Get this sample link and import the tour into your own account. Then look at the tour's Custom HTML screen and the Hotspot Actions screen for each hotspot.

Mini FAQ
How do I assign an action to a mouse event for a hotspot?
How do I link to a web page when I click a marker?
Will MapsAlive work on a touch screen?
MapsAlive Plans & Pricing