doc_mm.cont9.htm

HOTSpot Resolution

From Microsoft

"You cannot directly graphically draw the hotspots for an ASP.NET ImageMap control, but you can use the Microsoft® Expression® Web Hotspot tools to layout the hotspots on your graphic, then copy and paste those coordinates as properties in the HotSpot Collection Editor dialog box "

Also see a hidden field that can be used as a marked source while sending message across the page.

Step : 1 Add an ASP.Net WebSsite, it will add default.aspx.cs and web config

Code Web.config

<?xml version="1.0"?>
<configuration>
<system.web>
<authentication mode="Forms">
<forms loginUrl="default.aspx" protection="All" timeout="60"/>
</authentication>
<authorization>
<allow users="*"/>
</authorization>
<compilation debug="true"/>
<customErrors mode="Off"/>
</system.web>
</configuration>

Step : 2 Now add an image map control

I just drag the image map to demonstrate the height property

Step 3: Before we proceed let us look at the property of this control

Expression provides access to the

Now click on Image url and load the image

The image will be added to this control.

Now set the hotspot mode

Next, let us add hot-spot

When you click on the dotted link, one console will pop-up, choose

I choose to add all thre

Code Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>mm.cont9: image map</title>
</head>
<body>
<form id="from1" runat="server">
<div style="width: 500px; height: 371px">
<asp:Label ID="L2" runat="server" ></asp:Label>
<asp:HiddenField ID="HD1" runat="server" Value="Hidden Field" />
Image map is configured on WA, NE and IL. <br />Please navigate with your mouse around; and when you see the tool tip, click on the link.<br />

<asp:ImageMap ID="ImageMap1" runat="server" Height="300px" HotSpotMode="PostBack" ImageUrl="~/states.jpg"
Width="337px" onclick="ImageMap1_Click" >
<asp:CircleHotSpot HotSpotMode="PostBack" Radius="10" X="150" Y="100"
AccessKey="L" AlternateText="This NE" PostBackValue="NE" />
<asp:CircleHotSpot HotSpotMode="PostBack" Radius="10" X="200" Y="120"
AccessKey="R" AlternateText="This Illinois" PostBackValue="IL" />
<asp:RectangleHotSpot HotSpotMode="PostBack" Left="0" Top="10" Right="50"
Bottom="50" AlternateText="This Washington" PostBackValue="WA" />

</asp:ImageMap><br />

<asp:Label ID="L1" runat="server" Text="Hot-spot postback"></asp:Label>
<br /> It is musch easier to use with html pages and to view that click on the hyperlink <br />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/image-map.htm">HyperLink</asp:HyperLink>
</div>
</form>
</body>
</html>

code Default.aspx.cs

using System;
using System.Configuration;
using System.Data;
//using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
//using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
}

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
String region = "";
switch (e.PostBackValue)
{
      case "WA":
            region = "This is WA";
             break;
      case "IL":
         region = "This is IL";
         break;
      case "NE":
         region = "This is NE";
         break;
     default:
      region= "This USA Map";
      break;

}
L1.Text = "You clicked the " + region + " region.";

}
}

image map with HTML

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>mm.contr9: Image map html</title>
<script language="javascript" type="text/javascript">

function start(str)
{
var display = document.getElementById("div1");
display.innerHTML = "This is " + str;
}

</script>
</head>

<body>

<table border="2" cellpadding="2" width="250" bordercolor="#000080" bgcolor="#FFFF99">
<tr>
<td>
<p align="center">Home</td>
<td>
<p align="center">Page-1</td>
<td>
<p align="center">Page-2</td>
<td>
<p align="center">page 3</td>
</tr>
</table>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 156px; top: 94px" id="layer1">
<map name="FPMap0">
<area alt="This is Illinois" coords="258, 130, 20" shape="circle" href="#This is IL" onclick="javascript:start('Illinois')">
<area href="#" shape="polygon" coords="291, 179, 303, 215, 328, 211, 333, 195, 312, 174, 295, 176" onclick="javascript:start('Georgia')">
<area alt="This NE" href="#" shape="rect" coords="158, 49, 210, 81" onclick="javascript:start('NE')">
<area alt="This is Washington" href="#this is Washingto" shape="circle" coords="54, 47, 24" onclick="javascript:start('WA')">
</map>
<img alt="states" src="states.jpg" style="width: 418px; height: 328px" usemap="#FPMap0"/></div>

<div style="position: absolute; width: 254px; height: 100px; z-index: 2; left: 112px; top: 460px" id="div1"/>

</body>

</html>

Runtime analysis

Note the tool tip for Washington

Now Click on "Washington"

Try others

Now try HTML page

Try others like Georgia