Mapas de Imagenes en temas responsives

Inicio Foros WordPress Themes y Diseño Mapas de Imagenes en temas responsives

Etiquetado: , ,

Este debate contiene 3 respuestas, tiene 2 mensajes y lo actualizó  jcglp hace 5 años, 10 meses.

  • Autor
    Publicaciones
  • #67264

    jcglp
    Participante

    Saludos a todos, os cuento lo que me ocurre a ver si alguien ha pasado ya por aquí.

    En una pagina (que parte de una templante especifica) de un tema responsive, uso una imagen de un mapa de España, que esta “mapeado” con links sobre las provincias. La imagen del mapa esta dentro del template y el mapa de coordenadas esta sobre un tamaño especifico (920×730).  Ahora cuando cambio el tamaño del navegador o consulta  la página desde un smartphone, la imagen cambia e tamaño, y el mapa de coordenadas ya no me vale.

    Ahora la pregunta

    ¿Es posible dentro la plantilla de la que parto para hacer la imagen conocer cual es el tamaño actual de la imagen para cambiar dinámicamente el mapa de coordenadas?

    Muchas gracias.

  • #67275

    LGrusin
    Miembro

    Cada dispositivo tiene unas dimensiones y resolución de pantalla diferente. Tendrías que adaptar el theme para cada uno de ellos. Para los efectos es como si tuvieras diferentes themes según el dispositivo que tenga el visitante.

    Un saludo

  • #67284

    jcglp
    Participante

    Estoy todavía un poco verde con esto de wordpress, y espero no decir niguna tontería, pero creo que el theme que estoy usando, hace todo eso sin que yo modifique nada. Según accedo a la pagina desde un dispositivo u otro recoloca todo y pone las imagenes en otro tamaño. Por eso me gustaría saber si es posible saber que tamaño tiene la imagen en cada momento.

     

    LGrusin, gracias por responder

     

  • #67342

    jcglp
    Participante

    Al final lo conseguí con un poco de Jquery.  Lo que hice al final es crear tantos mapas de coordenadas como posibles tamaños me pone el theme, 920×730, 718×570 etc.. Luego Mediante Jquery miro cual es el tamaño de la imagen y le pongo el mapa de coordenadas correspondiente.

    Con este código. La verdad es que no se si es la solución más óptima, pero por ahora me funciona.

    <script language=”JavaScript” type=”text/javascript”>

    jQuery(function($){
    $(document).ready(function(){

    $(‘img#mapajuzgados’).mouseover(function(){

    var imagen = $(this);
    ancho = imagen.width();
    alto = imagen.height();

    nombre_mapa = “#Map”+ancho+”x”+alto;

    $(this).attr(“usemap”,nombre_mapa);

    return false;
    });

    });
    });

    </script>

     

    Un saludo a todos

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest