[Carl0701]

Hola foreros:

Estoy desarrollando una aplicación de monitorizado con PHP y para conseguir la idea que tengo en la mente necesitaría colocar pequeñas imagenes con formato jpg o png en diferentes coordenadas de la pantalla, es decir, suponiendo que tengo como fondo un mapa de España, colocar un pequeño icono sobre cada una de las capitales y al hacer click en ellos, abrir una nueva pagina.

No se si esto es posible hacerlo con PHP, ya que no tengo mucha experiencia en programación pero si muchas ganas de aprender...

Un saludo y gracias de antemano...

[haggenx]

usa un mapa de imagen para eso https://desarrolloweb.com/articulos/753.php

[Carl0701]

Muchas gracias haggenx por tu respuesta. Es justo lo que andaba buscando, pero no se porque motivo no me aparecen en pantalla las areas donde hacer click. Es como si quedaran ocultas tras la imagen de fondo.

Este es mi codigo:

Código:

<table border=1 width=1350><tr><td align="left"> 
<map name="mapa1"> 
<area data-id-product="Jimmy Page" title="Jimmy Page" shape="circle" coords="10,36,,10" alt="Jimmy Page" href="http://www.forosdelweb.com/f18/content/devices.php">
<area data-id-product="Jimmy Page" title="Jimmy Page" shape="rect" coords="70,36, 150, 80" alt="Jimmy Page..." href="http://www.forosdelweb.com/f18/content/devices.php">
</map> 

<img src="img/wallpaper.jpg" width="1400" height="1850" alt="Pulsa en cada una de los circulos." border="1" usemap="#mapa1"> 
</table>

<script>
    var elementos = document.querySelectorAll('area');
    for (var i = 0, s = elementos.length; i < s; i++) {
        elementos[i].addEventListener('click', function() {
            var dato = this.getAttribute('data-id-product');
            alert('Llamada a la monitorizacion de dispositivos de ' + dato);
        });
    };
</script>

[haggenx]

<img src="img/wallpaper.jpg" width="1400" height="1850" alt="Pulsa en cada una de los circulos." border="1" usemap="#mapa1">
</table>

No tienes cerrada la celda, tal vez sea eso.

<img src="img/wallpaper.jpg" width="1400" height="1850" alt="Pulsa en cada una de los circulos." border="1" usemap="#mapa1">
</td>
</tr>
</table>