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:
Alguien puede echarme una mano con esto?
Gracias de antemano,
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
0
