Etiqueta Area en diseño responsivo

[Benderzuelo]

Hola amigos/as,

resulta que tengo un problema, tengo la siguiente imagen:



Lo que he hecho es con el dreamweaver la etiqueta <area> mapear lo que son los cartelitos, pero el problema es que el diseño es RESPONSIVO, por lo tanto cuando lo abro en una patalla mas grande o mas pequeña de la que lo hago con el dreamweaver, las coordenadas de <area> no son responsivas por lo tanto al hacer pequeña la pantalla todo se hace pequeño pero las areas se quedan en el mismo sitio .

De que manera podría hacerlo?, yo lo que quiero es que los cartelitos sean una zona de acción que al pasar por encima :hover mostrar info dentro de un div y si hago click que me lleve a otra acción.

Como puedo hacerlo?

Muchas gracias

[pzin]

Pues tendrás que crear esos elementos individualmente y no como una imagen.

[sprwilly]

Hola, creo que la opción más sencilla es hacerlo utilizando este [URL="https://github.com/stowball/jQuery-rwdImageMaps"]plugin jQuery[/URL] es muy sencillo de usar, simplemente subes el plugin a tu server y pones el código que te pongo a continuación antes de cerrar el body.

Código HTML:

 <img />
  <map>
    <area>
    <area>
    ...
  </map>

   <!-- Código para convertir en responsivo un objeto map -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.rwdImageMaps.min.js"></script>
  <script>
     $(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
     });
  </script>
</body> 

Saludos ;)

[CircuitoX]

Otra ayuda:

http://stackoverflow.com/questions/1...d-what-scalema

Demostración de Responsive image map.

http://jsfiddle.net/jamietre/jQG48/

[caricatos]

Hola:

No sé porqué se usa la palabra "responsivo"... supongo que existirá alguna en español que se pueda usar... en la wiki usan "adaptable"; yo también usaría flexible

El formato svg podría servirte: SVG: Mapas con coordenadas relativas.

Saludos

[Linton]

Iniciado por caricatos

...No sé porqué se usa la palabra "responsivo"... supongo que existirá alguna en español que se pueda usar... en la wiki usan "adaptable"...

Completamente de acuerdo, y adaptable mejor que el incipiente adaptativo, generado por el papanatismo de copiar del inglés al menos el sufijo

[pzin]

Qué manía con cambiar la terminología. Responsivo existe en español (desde 1956) y está bien empleada en este contexto, ya que «pertenece o es relativo a la respuesta». Responde a las medidas del dispositivo.

[caricatos]

Hola:

Iniciado por pzin

Qué manía con cambiar la terminología.
...

¡Je, je!, podrá existir tal como confirmas, pero me sigue sonando fatal. Adaptable creo que define mejor el concepto.

Sobre nuevos términos, muchos no terminan de gustarme; es más, la tendencia es que se vayan generando por tendencias o modas, y no por lingüistas o filólogos... y de esos nuevos términos, los que menos me gustan son los políticos... la polémica esa de "los miembros y las miembras" es un ejemplo.

Bueno, espero que será mejor centrarnos en el problema del hilo...

En el formato svg, en la misma etiqueta svg se puede indicar las medidas reales en el atributo viewbox, y luego se inserta la imagen con las medidas que se definan en los atributos width y height (por ejemplo 100%), también existe el atributo preserveAspectoRatio que es útil para evitar estiramientos indeseados (y evitar que un circulo se convierta en un óvalo).

Luego los distintos áreas se equivalen con los tags polygon, que a la vez puede estar dentro de un enlace... Me parece de las mejores opciones.

Saludos

[Linton]

Oh sí, existe en español, nadie lo niega... pero al fin y al cabo es un anglicismo de tantos, y provoca fuerte rechazo a los españoles de ambos mundos en los foros especializados en gramática. El hilo de estas citas es del año 2012:
Un argentino:

No logro entender qué diablos se quiere decir con ese responsivo. (En realidad no sé que quiere decir responsivo, y como no pienso seguir las extravagancias de la academia creo que no leeré la definición).

Un español:

Yo tampoco sé lo que es responsivo/a en español. Ni lo he usado, ni oído, ni escrito nunca.

La Academia, como ya he señalado otras veces, está alcanzando con paso firme el rango de simple consultor. No hay que tomarla por el Oráculo.

[pzin]

Entonces como la gente no sabe lo que es la entropía es mejor no usarla y explicarla a parrafadas.

En serio, no se puede uno guiar por la ignorancia ajena. Si así fuese, aquello de la idiocracia se convertiría rápidamente en verdad.

[Linton]

Hombre, que no estamos hablando de analfabetos Ya he dicho que es un foro de gramática, el más solvente en español, de modo que no existe ignorancia sino todo lo contrario.

Repito que cometes el error de pensar que la Real Academia de la Lengua promulga el idioma, cuando sólo lo compila. Y desde hace tiempo bastante mal, según afirman voces muy autorizadas, incluyendo académicos con sillón.

[Rafael]

Chicos, no se secuestren (otro) el hilo con temas de linguística.

[forilinki]

Iniciado por sprwilly

Hola, creo que la opción más sencilla es hacerlo utilizando este [URL="https://github.com/stowball/jQuery-rwdImageMaps"]plugin jQuery[/URL] es muy sencillo de usar, simplemente subes el plugin a tu server y pones el código que te pongo a continuación antes de cerrar el body.

Código HTML:

 <img />
  <map>
    <area>
    <area>
    ...
  </map>

   <!-- Código para convertir en responsivo un objeto map -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.rwdImageMaps.min.js"></script>
  <script>
     $(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
     });
  </script>
</body> 

Saludos ;)

Hola, necesito incrustar una imagen mapeada como firma de mi correo electrónico en outlook 2013. El mapeo lo he realizado con (https://www.image-maps.com/) y con el código obtenido y lo comentado por ti me ha quedado así:

Código:

<img alt="" border="0" height="300" id="Image-Maps-Com-image-maps-2015-04-27-031841" orgheight="300" orgwidth="900" src="https://lh4.googleusercontent.com/-4yfZe9QrrzA/VSjk6uwoH2I/AAAAAAAAAXQ/-GM0msE7w-I/w900-h300-no/Dom%C3%B3tica%2BKNX.jpg" usemap="#image-maps-2015-04-27-031841" width="900" />
<map id="ImageMapsCom-image-maps-2015-04-27-031841" name="image-maps-2015-04-27-031841">
<area alt="" coords="25,108,162,136" href="http://www.image-maps.com/" shape="rect" style="outline: none;" target="_self" title=""></area>
<area alt="" coords="24,135,136,161" href="www.google.es" shape="rect" style="outline: none;" target="_self" title=""></area>
<area alt="" coords="21,165,133,191" href="www.hotmail.com" shape="rect" style="outline: none;" target="_self" title=""></area>
<area alt="" coords="22,192,134,218" href="www.gmail.com" shape="rect" style="outline: none;" target="_self" title=""></area>
<area alt="Image Map" coords="898,298,900,300" href="http://www.image-maps.com/index.php?aff=mapped_users_50175" shape="rect" style="outline: none;" title="Image Map"></area>
</map>
   <!-- Código para convertir en responsivo un objeto map -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.rwdImageMaps.min.js"></script>
  <script>
     $(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
     });
  </script>

Después he ido a donde outlook guarda las firmas, he abierto el archivo html con el bloc de notas y he pegado ese código. Pero cuando lo mando por correo y llega a un móvil o tablet, sigue sin funcionar correctamente.

Puedes echarme una mano con esto?

Gracias de antemano,