Expression Answers

Expression Web Designer has an easy way to add an image map to a web page.   To use this control, look in the Toolbox under the ASP.NET Controls section and find the "ImageMap" control and drag and drop the control to the area on your web page where you would like the image map to appear.

 The properties of the ImageMap need to be configured so in the Tag Properties window for the ImageMap control, find the "ImageUrl" ID and click the elipsis (...) button to open up the "Select Image" window.

From the Select Image window, select the image that will be your image map.  In this example, the image is named "menu_image.jpg".  After setting the ImageUrl to your image, click on the "HotSpotMode" property, click the down arrow key and choose "Navigate". 

We now need to define the actual hotspots on the image map, so click on the "HotSpots" property and click the elipsis button to bring up the "HotSpot Collection Editor" window.  To add a hotspot, click and hold the down arrow located on the "Add" button.  The choices for hotspot configurations are: CircleHotSpot, RectangleHotSpot, and PolygonHotspot.  In this example we are going to use a RectangleHotSpot.  When this option is selected, the RectangleHotSpot properties window appears for the first rectangle hotspot. 

In the Appearance category are properties for: Bottom, Left, Right and Top.  These are the x, y values that will define the first "clickable" area.  Unfortunately, there isn't an interactive way to draw the coordinates for the map on the image.  You can easily find coordinates for an image while the image is loaded in an image editor like Paint, so after you find the appropriate coodinates for your first map, enter the values in the Appearance section. 

In this example, a 500x50 pixel image is being used as a menu system, and the first image map will be defined for the area of the image that says "Home".  This mapped area translates to: Bottom=50, Left=1, Right=100 and Top=1. 

We now need to define where the user will navigate to when this area of the image map is clicked on. In the RectangleHotSpot Properties window, find the NavigateUrl property and enter the URL for the intended destination.  In this example, the destination for the "home" area of the map will send the user to "default.aspx" so that file name is entered in the NavigateUrl property.  "The HotSpotMode" property needs to be changed to "Navigate".  The HotSpot Collection Editor now looks like below.

To add further links to your image map, just click the "Add" button and repeat the same procedures as above.  When finished, save the file and when this page is viewed in a browser, your web page should display the image map with hyperlinks sensitive to the area of the image where clicked on.  The code generated from the above actions looks like below:

 <asp:ImageMap runat="server" id="ImageMap1" ImageUrl="menu_image.jpg" HotSpotMode="Navigate">
  <asp:rectanglehotspot HotSpotMode="Navigate" Top="1" Left="1" Bottom="50" Right="100" NavigateUrl="default.aspx" />
 </asp:ImageMap>