Craft Lodge Outdoor Skills The Pool Staff Area Office Trading Post Nature Climbing Tower Low C.O.P.E. High C.O.P.E. Commissary Director Cabins Health Lodge The Bowl The Workshop The Lake Rifle Range Rangers House Kiwanis Lodge Shotgun Range Archery Range Family Cabins Wrangler Thunderbird Outpost Upper Meadow Serpentine Meadow Middle Meadow Lower Meadow The Tribe of Tahquitz Tahquitz Bifröst Bridge
If you hover over some of the buildings in this image you will see working HTML map areas. HTML <map> and <area> tags allow us to create clickable hotspots on any image. There are two major drawbacks to using <map> and <area> tags though:
  1. You can not use CSS styles on map areas in any consistent cross-browser friendly way.
  2. Map areas are linked to the images size and break if that changes. Users resizing their web browser often break your map areas.
Map Area was designed to solve both of these problems for you. Map Area:
  1. Redraws your map areas in Scalable Vector Graphics (SVGs) that can be styled with CSS.
  2. Keeps an eye on the image and will resize the map areas and SVGs automatically for you.
In this demo we use a simple see through background color but you can use any styles you want. Click the Run Demo button below to see this in action. Please Note: Clicking on any map area will cause the page to reload.