Usando HTML ISMAP

Para usar una imagen con el atributo ismap, simplemente coloque su imagen dentro de un hipervínculo y use ismapatributo que lo convierte en una imagen especial y cuando el usuario hace clic en algún lugar dentro de la imagen, el navegador pasa las coordenadas del puntero del mouse junto con la URL especificada en la etiqueta <a> al servidor web. El servidor usa las coordenadas del puntero del mouse para determinar qué documento entregar al navegador.

Cuando se usa ismap , el atributo href de la etiqueta <a> que lo contiene debe contener la URL de una aplicación de servidor como un script cgi o PHP, etc. para procesar la solicitud entrante en función de las coordenadas pasadas.

Las coordenadas de la posición del mouse son píxeles de la pantalla contados desde la esquina superior izquierda de la imagen, comenzando con (0,0). Las coordenadas, precedidas por un signo de interrogación, se agregan al final de la URL.

Por ejemplo, si un usuario hace clic en 50 píxeles sobre y 30 píxeles hacia abajo desde la esquina superior izquierda de la siguiente imagen:

Haga clic en el siguiente enlace

Que ha sido generado por el siguiente fragmento 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>

Luego, el navegador envía los siguientes parámetros de búsqueda al servidor web:

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

Ahora, estas coordenadas pasadas se pueden procesar de una de las dos formas siguientes:

Usando un archivo CGI (o un archivo PHP si no está usando un archivo CGI)
Usando un archivo de mapa

Un archivo CGI o PHP

A continuación se muestra el código de Perl para ismap.cgi script que se está utilizando en el ejemplo anterior -

#!/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;

Debido a que puede analizar las coordenadas pasadas, puede poner una lista de if conditions para comprobar las coordenadas pasadas y enviar el documento vinculado correspondiente de vuelta al navegador.

Un archivo de mapa

Se puede utilizar un archivo de mapa para almacenar la ubicación de los archivos HTML a los que desea que se dirija al lector cuando se haga "clic" en el área entre las coordenadas identificadas.

Mantiene el archivo predeterminado en la primera ubicación y otros archivos se colocan correspondientes a varias coordenadas como se muestra a continuación en ismap.map archivo.

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

De esta manera, puede asignar diferentes enlaces a diferentes partes de la imagen y cuando se hace clic en esas coordenadas, puede abrir el documento vinculado. Así que reescribamos el ejemplo anterior usandoismap.map archivo:

<!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 probar el ejemplo anterior, debe asegurarse de que su servidor web tenga la configuración requerida para admitir el archivo de mapa de imágenes.

Sistema coordinado

El valor real de las coordenadas depende totalmente de la forma en cuestión. A continuación se incluye un resumen, seguido de ejemplos detallados. Puede utilizar cualquier herramienta disponible como Adobe Photoshop o MS Paint para detectar varias coordenadas disponibles en la imagen que se utilizarán para ISMAP.

Las líneas que comienzan con # son comentarios. Todas las demás líneas que no están en blanco constan de lo siguiente:

rect = x₁ , y₁ , x₂ , y₂: x ₁ e y ₁ son las coordenadas de la esquina superior izquierda del rectángulo; x ₂ e y ₂ son las coordenadas de la esquina inferior derecha.
circle = x_c , y_c , radius: x _cy y _c son las coordenadas del centro del círculo y el radio es el radio del círculo. Un círculo centrado en 200,50 con un radio de 25 tendría el atributo coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n: Los diversos pares xy definen los vértices (puntos) del polígono, con una "línea" dibujada de un punto al siguiente. Un polígono en forma de diamante con su punto superior a 20,20 y 40 píxeles de ancho en sus puntos más anchos tendría el atributo coords = "20,20,40,40,20,60,0,40" .

Todas las coordenadas son relativas a la esquina superior izquierda de la imagen (0,0). Cada forma tiene una URL relacionada. Puede usar cualquier software de imagen para conocer las coordenadas de diferentes posiciones.

↰ Previous page