Neste artigo irei mostrar como utilizar o controle ImageMap que veio na versão 2.0 do Asp.NET.

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.