Pra começar vou falar em qual situação pode ser utilizado o controle ImageMap.
Vamos supor que você tem uma imagem no seu site e quando você clicar na parte superior da imagem dispare um valor e ao clicar na parte inferior dispare outro valor ou na parte superior redirecione para uma tela e na parte inferior redirecione para outra tela, com o controle ImageMap você pode fazer isso. Neste artigo irei mostrar como fazer esses dois exemplos.
Vamos lá, crie um novo Web Site e na página Default adicione um controle ImageMap.
Como nós iremos utilizar uma imagem, adicione uma imagem ao seu projeto, para isso clique com o botão direito do mouse em cima do projeto e em Add Existing Item e selecione a imagem Por-do-Sol na pasta amostra de imagens como mostra a figura abaixo:
O código html para o nosso controle deve ficar da seguinte forma:
<asp:ImageMap ID="Imagemap1" runat="server" ImageUrl="~/Pôr-do-sol.jpg" Height="300" Width="300" OnClick="Imagemap1_Click" HotSpotMode="PostBack">
<asp:RectangleHotSpot Top="0" Bottom="150" Left="0" Right="300" PostBackValue="Parte de Cima" />
<asp:RectangleHotSpot Top="151" Bottom="300" Left="0" Right="300" PostBackValue="Parte de Baixo" />
</asp:ImageMap>
Note que na propriedade HotSpotMode foi informado PostBack o que quer dizer que ao ao clicar na imagem irá entrar no método OnClick dá imagem. Veja que dentro do objeto ImageMap foi acrescentado a propriedade RectangleHotSpot para configurar em qual lugar da figura irá acionar o postback através das propriedades Top/Bottom e Left/Right. O valor nós vamos informar na propriedade PostBackValue.
Para que funcione esse nosso exemplo, no método OnClick do controle ImageMap adicione o seguinte código para escrever na tela em qual parte da imagem nós clicamos.
protected void Imagemap1_Click(object sender, ImageMapEventArgs e)
{
Response.Write(e.PostBackValue);
}
Execute a aplicação e após clicar na parte superior da imagem ele deverá escrever na tela Parte de Cima como está na imagem abaixo:
Caso você clique na parte inferior da imagem ele irá escrever Parte de Baixo.
Agora vamos alterar o exemplo para quando ele clicar na parte superior redirecione para o site AspNeti e ao clicar na parte de baixo para o site MSDN, Ok!
A primeira coisa a ser alterada é a propriedade HotSpotMode para Navigate.
Apague as propriedade PostBackValue e acrescente a propriedade NavigateUrl. O código html do controle ImageMap deve ficar assim:
<asp:ImageMap ID="Imagemap1" runat="server" ImageUrl="~/Pôr-do-sol.jpg" Height="300" Width="300" OnClick="Imagemap1_Click" HotSpotMode="Navigate">
<asp:RectangleHotSpot Top="0" Bottom="150" Left="0" Right="300" NavigateUrl="http:\\www.aspneti.com" />
<asp:RectangleHotSpot Top="151" Bottom="300" Left="0" Right="300" NavigateUrl="http:\\www.msdn.com.br" />
</asp:ImageMap>
Execute a aplicação e faça os testes...
Finalizando...
Vimos como é fácil utilizar o controle ImageMap do Asp.Net 2.0 e as suas propriedade. Este componente pode ser muito útil se no site tiver um Mapa e ao clicar em determinada região do mapa redirecione para uma tela ou mostre em qual região foi clicada pelo usuário.