Java y mapa de Imagen

Vamos a utilizar la web w3schools.com/ para realizar unas tareas sencillas sobre java para luego aplicarlo y crear una script que cambien una imagen en base a unas tareas lógicas. Vamos por partes.

Veremos que es estos de mapa de imagen y Java. Empezaremos por el mapa.

Una imagen puede contener a su vez determinadas zonas activas, esto es, que podemos programar tareas específicas como que al pinchar en una zona se redirija a otra web, etc. En nuestro caso, queremos crear ciertas zonas ( delimitadas por coordenadas ) para que al pinchar en ellas, unas tareas de programación ( java ) entren en juego.

La manera mas sencilla es con GIMP. Por tanto

1º Pensar en alguna actividad que al pinchar en una zona , aparezca otra imagen. Tenemos un ejemplo al bajar este zip y ver el archivo index.

2º Crear el mapa de la imagen principal. El resto de imágenes deben tener la misma dimensión. Ver el manual donde se explica en el siguiente enlace Mapa de imagen

3º Hay que crear unas imágenes comodines para poner añadir un id. Para ello, al principio de la página hay que poner el siguiente texto ( código fuente ).

O sea hemos añadido una imagen con el identificador myimage1, con anchura y altura de 1 pixel que toma la imagen pic_bulboff.gif y que al pincharse se activa la función java changeImage1()

Tenemos que crear tantas imágenes como zonas activas tenga nuestro trabajo.

Fijaros que a la imagen principal la pongo el identificador id=»myimage4″. Esto es necesario para poder ir cambiando la imagen al pincharse sobre ella

4º Las funciones java son como las siguientes.

    function changeImage1()

    {

    element1=document.getElementById('myimage1')

    element2=document.getElementById('myimage2')

    element4=document.getElementById('myimage4')
    El primer paso es crear las variables element1, 2 y 3 que toman los valores de los identificadores myimage1
    // caso 00. Las dos apagadas
    if (element1.src.match("bulboff") && element2.src.match("bulboff"))
    {   element1.src="pic_bulbon.gif";
         element4.src="circuito1.png";   }

    En este caso se realiza una tarea de programación, esto es, vemos si la imagen del elemento 1 contiene la palabra bulboff element1.src.match("bulboff")
    y que el elemento 2 también la contiene, en cuyo caso tomamos la decisión
    de cambiar la imagen 1 a pic_bulbon.gif ( que no se verá porque  la hemos reducido a 1 X 1 px  y también cambiamos la imagen
    principal circuito1.png. Esta línea es   element4.src="circuito1.png";

Podemos comprobar el resto de los casos. hay que tener en cuenta que vuestr
o trabajo tendrá otra programación diferente porque esta responde a una puerta lógica Y que funciona cuando los dos pulsadores ( entradas ) están activas. El resto de la función es:

   // caso 01. La 2º encendida. Se enciende la bombilla
 else if (element1.src.match("bulboff") && element2.src.match("bulbon"))
 { element1.src="pic_bulbon.gif"; element4.src="circuito3.png"; }
// caso 10. activado el 1 y el 2 desactivado.
    else if (element1.src.match("bulbon") && element2.src.match("bulboff")) 
  {   element1.src="pic_bulboff.gif";
    element4.src="circuito.png";
  }
   // caso 11. activado el 1 y el 2. Pasa de Encendido a apagado
   else if (element1.src.match("bulbon") && element2.src.match("bulbon"))
   {  element1.src="pic_bulboff.gif";
    element4.src="circuito2.png";
   } }

5º En el caso de un mapa donde al pinchar en la región , aparezca el plato típico, tenemos que crear tantas imágenes como regiones, con el plato típico superpuesto en la región y de dimensiones iguales a la imagen principal. Para el caso de pinchar sobre Extremadura, la función será algo así como:

   function changeImage1()
   {  element1=document.getElementById('myimage1')
   element20=document.getElementById('myimage20')
   if (element1.src.match("bulboff")
    {element1.src="pic_bulbon.gif";
    element4.src="mapa-extremadura.png";
   } }.

Y si necesitamos que la imagen cambie cuando hacemos click sobre una zona

Este es el caso de una página que tiene una imagen y cuando hacemos clic sobre una zona de ella, aparece otra imagen. Este caso es más sencillo.

Supongamos que tenemos un mapa de imagen con 5 zonas. Lo primero es crear 5 script y cinco imágenes de 1 x 1 px. las funciones serán

    <script>    function changeImage1()
   {   element1=document.getElementById('myimage1')
    element4=document.getElementById('myimage4')
   // este es el caso para que aparezca la 1º imagen
    if (element1.src.match("bulboff"))
    {  element4.src="circuito1.png"; }
    }
    </script>
   <script>
   function changeImage2()
   // esta es la función para cargar la 2º imagen
    {   element2=document.getElementById('myimage2')  
  element4=document.getElementById('myimage4')
   if (element2.src.match("bulboff"))
    { element4.src="circuito2.png"; }  }
   </script>

Tendremos que poner los script que nos hagan faltan para nuestro trabajo

También tendremos que crear las imágenes de 1×1 px necesarias. Como ya teníamos dos, para una tercena tenemos que añadir

Completar ahora vuestro trabajo. Recordar, 1 imagen de 1 x 1 pixel, una función java y una zona para hacer click en el mapa.

Cuando copmpletéis todo el trabajo, verifiar que hay líneas de código que no son necesarias para vuestro trabajo concreto, porque es más sencillo que el originalmente expuesto en esta práctica.

<img fetchpriority="high" decoding="async" class="alignleft size-medium wp-image-1912" alt="java" src="https://www.tecnologia-informatica.es/wp-content/uploads/2013/12/java-262x300.jpg" width="262" height="300" />Java y mapa de Imagen

Java y mapa de Imagen