Firma de correo HTML

[forilinki]

Buenas a todos,

Lo primero de todo decir que aunque estoy acostumbrado a modificar parte de códigos para pequeñas modificaciones, no soy programador.

Necesito crear una firma de correo para outlook. Había pensado realizarla a través de una imagen mapeada, pero el problema surge cuando se visualiza en un móvil o tablet, ya que la imagen se redimensiona, pero no las áreas con los hipervínculos.

Leyendo por la red he leído que es mejor hacerlo con div en lugar de area. Pero no sé muy bien como es esto.

Os adjunto el código del mapeado a ver si me lo podéis modificar para que aunque se visualice en otro dispositivo, funcionen los enlaces.

Código HTML:

<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> 

Gracias de antemano,

[NueveReinas]

Imagino que quieres hacer esto:



Pero con HTML y CSS, ¿no?

[forilinki]

Sí. Exacto. Al final he tenido que hacerlo integrando la firma en una tabla.

Una cosa más. 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.