HTML - Imagen mapeada responsive

 
Vista:

Imagen mapeada responsive

Publicado por Forilinki (4 intervenciones) el 28/04/2015 21:53:40
Buenas tardes,,

Escribo porque estoy tratando de poner en mi firma de correo de Outlook una imagen mapeada con diferentes enlaces. Esto lo he conseguido hacer con una web que lo hace online. El problema llega cuando mi firma de correo se visualiza en un móvil o tablet, al redimensionarse la imagen, los hipervínculos no se redimensionan y por lo tanto, no funcionan, ya que se pierden.

No tengo ni idea de programación, pero dado vueltas por internet vi esto:
--------------------------------------------------
Responsive

En mi caso, ya no funcionaba el mapeo de la imagen si le agregaba la clase "responsive", ya que el tamaño varía y las coordenadas ya no son válidas. Lo que hay que hacer ahora es utilizar un plugin de jQuery el cual se encarga de ir recalculando las coordenadas de acuerdo al nuevo tamaño que la imagen va adquiriendo debido al cambio de dimensiones por ser responsive.

Entonces hay que obtener el plugin rwdImageMaps.

Y bueno, al final de tu código HTML, justo antes de /body, hay que agregar básicamente tres scripts:

El script de jQuery (en caso de que no lo tengas).
El script rwdImageMaps.
El script que va a recalcular las dimensiones de la imagen deseada.
Entonces, estos tres pasos en código se ven así, y suponiendo que guardo los scripts en una carpeta llamada JS:


O puedes llamar los siguientes scripts de manera externa (desde su ubicación original) si en un momento dado asó lo requirieras:
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><!-- Latest compiled and minified CSS -->
2
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
Ahora, podrás ver cómo la imagen funciona aún si se redimensiona ;-)
-------------------------------------------------------------
Pero la verdad es que me queda grande, no se por donde meterle mano. Y buscando información he dado con este foro, de ahí que escriba.

Este es el código con el mapeado de una imagen:

1
2
3
4
5
6
7
8
<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>


Alguien puede echarme una mano con esto?

Gracias de antemano,
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Imagen mapeada responsive

Publicado por xve (1543 intervenciones) el 28/04/2015 22:30:41
Hola Forilinki creo que te estas liando...

No te recomiendo utilizas javascript en los correos, la mayoría de programas de correo los deshabilitan.

En vez de utilizar un mapa de imagen, te recomiendo utilizar div's, los cuales podrás aplicar el responsive de manera sencilla, pero tendrás que entender como funciona el responsive...

Yo te recomendaría que utilizaras capas flotantes (float) para que se adaptan al correo.

No se exactamente como es la imagen, pero se puede partir? o cambiar alguna parte por texto?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Imagen mapeada responsive

Publicado por Jesús (4 intervenciones) el 28/04/2015 23:32:28
Gracias por tu respuesta.

No me importaría cambiar imagen por texto, ya que casi todo es texto. Tiene un logo y luego, nombre, email, teléfono, web, dirección física y los iconos de las redes sociales.

La verdad es que no se muy bien lo que intentas explicarme, no se muy bien que son los div's y los float. Me suena de ver etiquetas en el código de blogs, pero no se como usarlas.

Si pudieras mandarme una imagen parecida con su código para que yo pueda hacerlo con la mía te lo agradecería muchísimo.

Un saludo,
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel Komander

Imagen mapeada responsive

Publicado por Angel Komander (101 intervenciones) el 29/04/2015 01:38:05
en ves de que tu codigo sea asi:
1
<area alt="" coords="25,108,162,136" href="http://www.image-maps.com/" shape="rect" style="outline: none;" target="_self" title=""></area>

se veria con divs asi:
1
<div alt="" coords="25,108,162,136" href="http://www.image-maps.com/" shape="rect" style="outline: none;" target="_self" title=""></div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Imagen mapeada responsive

Publicado por forilinki (4 intervenciones) el 29/04/2015 09:03:00
He cambiado los <area alt por <div alt pero sigue sin funcionar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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">
</map><br />
<div alt="" coords="25,108,162,136" href="http://www.image-maps.com/" shape="rect" style="outline: none;" target="_self" title="">
<div alt="" coords="24,135,136,161" href="www.google.es" shape="rect" style="outline: none;" target="_self" title="">
<div alt="" coords="21,165,133,191" href="www.hotmail.com" shape="rect" style="outline: none;" target="_self" title="">
<div alt="" coords="22,192,134,218" href="www.gmail.com" shape="rect" style="outline: none;" target="_self" title="">
<div 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">
</div>
</div>
</div>
</div>
</div>

Seguramente haya algo mal, a ver si me podéis ayudar. Y perdonar mi ignorancia.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Imagen mapeada responsive

Publicado por forilinki (4 intervenciones) el 30/04/2015 12:07:51
Gracias. Solucionado.

Otra pregunta de HTML.

En mi firma de correo hay texto de la dirección web, teléfonos, emails, dirección física, ect. Cuando envío el correo desde Outlook todo se ve bien, con el CSS creado para cada texto, pero cuando lo mando y lo visualizo en algunos dispositivos, estos campos me aparecen en azul y subrayados, perdiendo el estilo que tenía por CSS.

Creo que a esto le llaman texto inteligente, los navegadores son capaces de distinguir que es un teléfono, un enlace o una dirección física, pero hay alguna forma de evitar que me cambie el formato del texto y siga haciendo esa función.

Gracias de nuevo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar