ASP.NET 2.0 - Usando o controle ImageMap

O controle ImageMap é outro controle novo liberado com ASP.NET 2.0 que permite a você trabalhar com regiões de navegação (hot spot) em uma imagem.

Geralmente para alcançar o objetivo de criar regiões sensíveis ao clique do mouse em uma imagem os programadores quebravam uma imagem em diversos pedaços e depois reuniam tudo em uma tabela. Quando o usuário clicava em uma região da imagem uma ação era disparada conforme a lógica definida.

Com o novo controle ImageMap você pode definir imagens com regiões distintas chamadas HotSpots as quais são identificadas pelo uso de coordenadas. Cada região é um elemento independente o qual pode responder a ação do usuário como por exemplo com um postback para o servidor ou ir para uma URL especificada.

Podemos usar o controle para exibir mapas geográficos de regiões e quando o usuário clicar em uma região específica do mapa o controle pode navegar para a URL que irá fornecer informações adicionais sobre a região selecionada.

ImageMap - Características dos Hot spots

• Não há limite para o número de regiões que cada imagem pode conter;
• Cada hotspot esta caracterizado por vários atributos como shape, location e size;
• Hot Spots são definidos usando as coordenadas x e y;
• Hot Spots pode ser atribuídos a URLs de imagens e são capazes de efetuar postback

Existem três tipos diferentes de hot spots oferecidos pelo controle ImageMap:

• CircleHotspot -  Define um região circular em um controle ImageMap. Para definir a região para um hot spot circular , você deverá definir as coordenadas X e Y para um círculo bem como a propriedade radius a qual é a distância do centro do círculo a borda do circulo.

• RectangleHotspot - Define uma região retangular. Para definir a região você deve definir as coordenadas Top, Bottom, Left e Right.

• PolygonHotspot - Define uma região poligonal. Para definir a região você deve definir as coordenadas Top, Bottom, Left e Right.

Definimos um controle ImageMap na seguintes etapas:

1- Incluindo um controle ImageMap a partir da ToolBox para o formulário (aba Standard)
2- Definindo a imagem que o controle irá exibir através da propriedade ImageUrl.
3- Configurando os hotspots para o controle definindo a propriedade HotSpotMode :
4- Definindo a coleção HotSpots da janela de propriedades:

Perceba que no HotSpot Collection Editor através do botão Add podemos escolher qual Membro vamos incluir. A seguir basta definir as propriedades para definir o comportamento do controle. As propriedades Bottom, Left, Right e Top definem a região na imagem ; a propriedade PostBackValue permite definir o texto que será exibido quando da ocorrência do PostBack.

Depois de definir os HotSpots na imagem, você pode responder ao clique do usuário de diversas formas.  Primeiro você tem que definir como vai a maneira como vai tratar o clique no  hotspot no elemento raiz <asp:ImageMap> através do atributo HostSpotMode .

O atributo HotSpotMode permite definir o comportamento que será obtido quando o usuário clicar na região. Os valores possíveis são : Not Set, PostBack, Navigate e Inative. No exemplo  acima temos o atributo definido como PostBack o que significa que depois que o usuário clicar na região definida da imagem como hostpot você vai enviar um postback para o servidor e tratar com o click a partir deste ponto.

Para determinar qual hotspot foi selecionado atribuímos um valor a propriedade PostBackValue que será exibido permitindo a identificação.

A propriedade ToolTip permite exibir textos de ajuda quando o usuário passa com o mouse sobre a região da figura.

Além disto podemos definir o HotSpotMode como Navigate o que permite a navegação para uma URL quando uma região da imagem for selecionada.

Usando o ImageMap

Vamos então criar um novo web site no Visual Web Developer Express chamado imageMap  e na página Default.aspx inclua a partir do menu Layout um tabela com um alinha e 3 colunas.

A partir da janela Solution Explorer clique com o botão direito do mouse e selecione a opção Add Existing Item e inclua algumas 4 imagens no seu projeto. Neste exemplo eu estou incluindo algumas imagens de Brasília e um mapa das Américas.

A partir da ToolBox inclua 4 controles ImageMap na página e atribua para cada uma imagem na propriedade  ImageUrl ; A seguir para as 3 primeiras imagens defina o HotPostMode como PostBack e na propriedade PostBackValue define uma texto para cada imagem e também a região para cada imagem. Para a última imagem defina duas regiões, uma para América do Norte e outra para América do Sul; atribua o HotPostMode como Navigate e atribua as urls para cada uma das regiões de forma que quando o usuário clicar na região seja direcionado para a url definida.

 O leiaute do projeto esta exibido a seguir:

Nota: Se você tiver dúvidas sobre as dimensões da imagem pode clicar sobre a imagem e no menu suspenso selecionar a opção Style...
A seguir na janela Style Builder você pode definir um tamanho para imagem.

Após a definição das propriedades se espiarmos o código fonte na guia Source iremos ver o código abaixo, onde podemos identificar as propriedades e atributos definidos para cada controle ImageMap:

Observe que para o primeiro ImageMap definimos duas regiões que eu chamei de brasilianorte e brasilasul. Conforme o lado da imagem que o usuário clicar será exibida a mensagem pertinente.

O código fonte para o ImageMap que exibe o mapa das Américas é o seguinte :

Executando o projeto teremos a exibição da seguinte página:

Imagine as possibilidades...

Pegue o projeto completo aqui: imageMap.zip

Eu sei é apenas ASP.NET , but I like it...

José Carlos Macoratti