Usando HTML ISMAP

Para usar uma imagem com atributo ismap, você simplesmente coloca sua imagem dentro de um hiperlink e usa ismapque o torna uma imagem especial e quando o usuário clica em algum lugar dentro da imagem, o navegador passa as coordenadas do ponteiro do mouse junto com a URL especificada na tag <a> para o servidor web. O servidor usa as coordenadas do ponteiro do mouse para determinar qual documento deve ser devolvido ao navegador.

Quando ismap é usado, o atributo href da tag contendo <a> deve conter a URL de um aplicativo de servidor como um cgi ou script PHP etc. para processar a solicitação de entrada com base nas coordenadas passadas.

As coordenadas da posição do mouse são pixels da tela contados a partir do canto superior esquerdo da imagem, começando com (0,0). As coordenadas, precedidas por um ponto de interrogação, são adicionadas ao final da URL.

Por exemplo, se um usuário clicar em 50 pixels acima e 30 pixels abaixo do canto superior esquerdo da seguinte imagem:

Clique no link a seguir

Que foi gerado pelo seguinte snippet de código -

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/cgi-bin/ismap.cgi" target="_self"> 
         <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>

Em seguida, o navegador envia os seguintes parâmetros de pesquisa para o servidor da web -

/cgi-bin/ismap.cgi?20,30

Agora, essas coordenadas passadas podem ser processadas por uma das seguintes maneiras -

Usando um CGI (ou arquivo PHP se você não estiver usando um arquivo CGI)
Usando um arquivo de mapa

Um arquivo CGI ou PHP

A seguir está o código perl para ismap.cgi script que está sendo usado no exemplo acima -

#!/usr/bin/perl

local ($buffer, $x, $y);
# Read in text
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "GET") {
   $buffer = $ENV{'QUERY_STRING'};
}

# Split information into name/value pairs
($x, $y) = split(/,/, $buffer);

print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Passed Parameters are : X = $x, Y = $y </h2>";
print "</body>";
print "</html>";

1;

Porque você é capaz de analisar as coordenadas passadas, você pode colocar uma lista de if conditions para verificar as coordenadas passadas e enviar o documento vinculado apropriado de volta ao navegador.

Um arquivo de mapa

Um arquivo de mapa pode ser usado para armazenar a localização dos arquivos HTML que você deseja que o leitor seja levado quando a área entre as coordenadas identificadas for "clicada".

Você mantém o arquivo padrão no primeiro local e outros arquivos são colocados correspondendo a várias coordenadas como mostrado abaixo em ismap.map Arquivo.

default http://www.tutorialspoint.com
rect    http://www.tutorialspoint.com/html 5,5 64,141
rect    http://www.tutorialspoint.com/css  91,5 127,196
circle  http://www.tutorialspoint.com/javscript  154,150,59

Desta forma, você pode atribuir diferentes links para diferentes partes da imagem e quando essas coordenadas são clicadas, você pode abrir o documento vinculado. Então, vamos reescrever o exemplo acima usandoismap.map Arquivo:

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/html/ismap.map" target="_self"> 
         <img ismap src = "/images/logo.png" alt="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>

Antes de tentar o exemplo acima, você precisa ter certeza de que seu servidor web possui a configuração necessária para suportar o arquivo de mapa de imagem.

Sistema de coordenadas

O valor real de coords é totalmente dependente da forma em questão. Aqui está um resumo, a ser seguido por exemplos detalhados. Você pode usar qualquer ferramenta disponível como Adobe Photoshop ou MS Paint para detectar várias coordenadas disponíveis na imagem a ser usada para ISMAP.

As linhas que começam com # são comentários. Todas as outras linhas não em branco consistem no seguinte -

rect = x₁ , y₁ , x₂ , y₂: x ₁ ey ₁ são as coordenadas do canto superior esquerdo do retângulo; x ₂ ey ₂ são as coordenadas do canto inferior direito.
circle = x_c , y_c , radius: x _c e y _c são as coordenadas do centro do círculo e raio é o raio do círculo. Um círculo centrado em 200,50 com um raio de 25 teria o atributo coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n: Os vários pares xy definem vértices (pontos) do polígono, com uma "linha" sendo desenhada de um ponto ao próximo ponto. Um polígono em forma de diamante com seu ponto superior em 20,20 e 40 pixels em seus pontos mais largos teria o atributo coords = "20,20,40,40,20,60,0,40" .

Todas as coordenadas são relativas ao canto superior esquerdo da imagem (0,0). Cada forma tem um URL relacionado. Você pode usar qualquer software de imagem para saber as coordenadas de diferentes posições.

↰ Previous page