Como definir regiões sensíveis em figuras

Um imagemap anteriormente so podia ser usado da seguinte maneira, quando o usuário clicava uma região, o browser (Netscape, por exemplo) enviava para o servidor as coordenadas e a informação de que era um imagemap. O servidor processava (executando um programa em PERL ou C) e enviava a página correspondente.

Com a versão 3.0 do HTML, imagemaps podem ser executados na máquina do usuário. Apenas as versões mais recentes do Netscape e do Internet Explorer aceitam esta opção. Neste caso cada página traz além do mapa as informações necessárias para sua execução, ou seja, desencadear a chamada de um página correspondente à região clicada.

Um tutorial completo sobre como produzir mapas selecionáveis pode ser encontrado em: Mapas em HTML

Um tutorial sobre a ferramenta Mapedit pode ser encontrada em: Tutorial do Mapedit

Eis as etapas para criar essas regiões:

1. Antes de mais nada é preciso criar uma imagem e usando um programa de edição de mapas pode-se demarcar as regiões. Mapedit ou MapThis! são dois exemplos deste tipo de programa mas existem outros. Usando as ferramentas existentes em cada um pode-se marcar as áreas que poderão ser clicadas pelos usuários.
2. Criar um conjunto de coordenadas a ser associado à figura, contendo as definicoes de regiões (retângulos, círculos ou polígonos). Digamos que o arquivo com a imagem seja chamado meumap.gif
3. Definir as áreas usando as ferramentas do software que irá usar para isto.
   Para definir um circulo basta a coordenada do ponto central e o raio.
   Para definir um retângulo bastam as coordenadas dos pontos diametralmente opostos
   Para definir um polígono há que specificar as coordenadas de cada ponto que o forma.
   À cada área corresponderá um URL
4. Salvar esta definição no arquivo .htm onde a figura será incluída
   Um programa denominado imagemap deverá estar no diretório cgi-bin para interpretar estas definições
5. Na página onde o mapa sensitivo irá ser usado deverá ser colocado o seguinte:
   Como atributo da imagem deverá constar <img src="nomeimag.gif usemap="#meunome">
   O símbolo # indica que a especificação dos pontos que definem as regiões sensíveis estará dentro da própria página
   Exemplo:<IMG SRC="liane.gif" usemap="#liane">
6. Mais adiante (ao final) você colocará nesta página uma série de tags
   • para indicar o início da definição das regiões sensitivas use o tag map name=
   • para definir cada região use o tag area shape="xxxx" alt="texto alternativo" coords="sequencia de coordenadas dos pontos que delimitam a região"
     xxxx pode ser circle rect ou polygnon
   • ao final coloque uma definição de shape="default" nohref para indicar que se for clicado algum ponto fora das áreas delimitadas nenhuma ação será desencadeada
     
   • encerre com a tag </map> Exemplo <map name="liane"> <area shape="rect" alt="Pescoço" coords="28,151,111,184" href="pescoco.html"> <area shape="circle" alt="Rosto" coords="69,101,47" href="rosto.html"> <area shape="polygon" alt="cabelo" coords="15,93,13,63,28,37,59,18,82,14,98,24,114,38,123,54,125,75,126,92,116,91,111,73,101,60,85,52,85,52,60,46,60,46,41,56,41,56,26,68,21,85,15,93" href="cabelo.html"> <area shape="default" nohref> </map>

• Uma imagem de um grupo com três pessoas
• Minha foto , criado com o Mapedit usando uma imagem capturada com camara acoplada ao computador.