Firma de correo HTML

[konexion]

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 [Seleccionar] Expandir

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

[Pablo Videla]

Konexion como no puedo probar tus cosas, te hice 3 opciones diferentes para que pruebas segun lo que dijiste.

Espero que alguna te sirva 

Código (html4strict) [Seleccionar] Expandir



<!-- primera opcion -->
<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">
<a href="http://www.image-maps.com/" target="_blank"><area alt="" coords="25,108,162,136"  shape="rect" style="outline: none;" title=""></area></a>
<a href="http://www.google.es" target="_blank"><area alt="" coords="24,135,136,161" href="http://www.google.es" shape="rect" style="outline: none;" target="_self" title=""></area></a>
<a href="http://www.hotmail.com" target="_blank"><area alt="" coords="21,165,133,191" href="http://www.hotmail.com" shape="rect" style="outline: none;" target="_self" title=""></area></a>
<a href="http://www.gmail.com" target="_blank"><area alt="" coords="22,192,134,218" href="http://www.gmail.com" shape="rect" style="outline: none;" target="_self" title=""></area></a>
<a href="http://www.image-maps.com/index.php?aff=mapped_users_50175" target="_blank"><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></a>
</map>
<!--segunda opcion -->
<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">
<div alt="" coords="25,108,162,136" href="http://www.image-maps.com/" shape="rect" style="outline: none;" target="_self" title=""></div>
<div alt="" coords="24,135,136,161" href="http://www.google.es" shape="rect" style="outline: none;" target="_self" title=""></div>
<div alt="" coords="21,165,133,191" href="http://www.hotmail.com" shape="rect" style="outline: none;" target="_self" title=""></div>
<div alt="" coords="22,192,134,218" href="http://www.gmail.com" shape="rect" style="outline: none;" target="_self" title=""></div>
<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>
</map>

<!--tercera opcion -->

<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">
<a href="http://www.image-maps.com/" target="_blank"><div alt="" coords="25,108,162,136"  shape="rect" style="outline: none;"  title=""></div></a>
<a href="http://www.google.es" target="_blank"><div alt="" coords="24,135,136,161"  shape="rect" style="outline: none;" title=""></div></a>
<a href="http://www.hotmail.com" target="_blank"><div alt="" coords="21,165,133,191"  shape="rect" style="outline: none;" target="_self" title=""></div></a>
<a href="http://www.gmail.com" target="_blank"><div alt="" coords="22,192,134,218"  shape="rect" style="outline: none;"  title=""></div></a>
<a href="http://www.image-maps.com/index.php?aff=mapped_users_50175" target="_blank"><div alt="Image Map" coords="898,298,900,300" shape="rect" style="outline: none;" title="Image Map"></div></a>
</map>




[konexion]

Muchas gracias Pablo.

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.

[Pablo Videla]

Muchas gracias Pablo.

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.

Mandame el codigo con el css incluido y vemos que onda.

[konexion]

Puede que los enlaces, incluso las imágenes no funcionen, ya que las cambié de ruta, pero el problema que tengo es cómo se ven los números de teléfono, email, direcciones, enlaces... en algunos dispositivos. Lo que quiero es forzarlo para que se vea según el CSS, sea cual sea el medio que lo lee. Aquí va el código:

Código [Seleccionar] Expandir

<style type="text/css">
.web {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
color: #178dba;
text-decoration:none;
}
.Direccion {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #81a636;
text-decoration:none;
}
.nombre {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #87af20;
text-decoration:none;
}
.dpto {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
color: #84d3a8;
text-decoration:none;
}
.email {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #178dba;
font-style: italic;
text-decoration:none;
}
.tel {
font-family: Arial, Helvetica, sans-serif;
color: #87af20;
font-size: 18px;
font-style: italic;
text-decoration:none;
}
.imprimir {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #81a636;
font-style: italic;
font-weight: bold;
text-align: justify;
}
.ley {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
color: #626262;
}
.vcard {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #626262;
text-decoration:none;
}
.linkvcard {
font-weight: bold;
color: #81a636;
text-decoration:none;
}
</style>
<table width="819" height="516" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="61" rowspan="13" valign="bottom"><p align="right"><img src="https://lh4.googleusercontent.com/-vyV1ai5M8Tptg/VUHbJBDD4gI/AAAAAAAAAgk/s85dm4ZZHBM/w125-h864-no/hojas.png" alt="" width="61" height="422" /></p></td>
    <td colspan="8" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="8" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td colspan="6" valign="middle" class="nombre">Jesús María Martínez González</td>
    <td width="98" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><p>&nbsp;</p></td>
    <td colspan="6" valign="middle" class="dpto">Departamento de Ingeniería</td>
    <td width="98" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><p>&nbsp;</p></td>
    <td colspan="6" valign="middle" class="email">ingenieria@inst-martinezgonzalez.es</td>
    <td width="98" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><p>&nbsp;</p></td>
    <td width="449" valign="middle" class="tel">629 686 961</td>
    <td width="42" valign="middle">&nbsp;</td>
    <td width="42" valign="middle">&nbsp;</td>
    <td width="42" valign="middle">&nbsp;</td>
    <td width="42" valign="middle">&nbsp;</td>
    <td width="42" valign="middle">&nbsp;</td>
    <td width="98" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td valign="middle" class="tel"><span class="vcard">Descarga mi <span class="linkvcard"><a href="https://www.dropbox.com/s/ytglf5rt0dh510sm/Datos%20de%20Jes%C3%BAs%20Manuel%20Martinez.vcf?dl=0" target="_blank" class="linkvcard">vCard</a></span></span></td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><p>&nbsp;</p></td>
    <td valign="middle" class="tel">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="middle">&nbsp;</td>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="160" colspan="8"><p><a href="inst-martinezgonzalez.blogspot.com" target="_blank"><img src="https://lh4.googleusercontent.com/-35l6kzX7G9CU/VUHWQC-K_uI/AAAAAAAAAgQ/m40Y4EBj8Yo/w1597-h365-no/Instalador%2Belectricista%2Balmagro.png" alt="" width="754" height="172" /></a></p></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="98"><p align="center">&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="2" valign="middle"><p class="web"><a href="inst-martinezgonzalez.blogspot.com" target="_blank" class="web">inst-martinezgonzalez.blogspot.com</a></p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="42" valign="top"><p>&nbsp;</p></td>
    <td width="98" rowspan="2"><p align="center"><a href="http://inst-martinezgonzalez.blogspot.com.com/2015/02/domotica-knx.html" target="_blank"><img src="https://lh4.googleusercontent.com/-BZM152FqfsI/VQb1t4hwnosI/AAAAAAAAATg/amc5NFLjiZ8/w150-h99-no/KNK.png" alt="" width="97" height="59" /></a></p></td>
  </tr>
  <tr>
    <td colspan="3" align="left" valign="middle"><p class="Direccion">administracion@inst-martinezgonzalez.com<br />
      Tel.: 926 262 252 - 926 862 296 · Fax: 926 671 391</p></td>
    <td width="42"><p align="center"><a href="http://inst-martinezgonzalez.blogspot.com/" target="_blank"><img src="https://lh4.googleusercontent.com/-cmBMrjNo_m0/VQb1tIbOQ0I/AAAAA2AAAATk/qzQbmo2H_kg/s32-no/1426522272_Blogger-32.png" alt="Nuestra Web" width="32" height="32" /></a></p></td>
    <td width="42"><p align="center"><a href="http://es.linkedin.com/in/instalacionesmartinezgonzalez/" target="_blank"><img src="https://lh4.googleusercontent.com/-GC5ykvDvUdc/VQb1s82GTarI/AAAAAAAAAT0/GZG6MpTuzDw/s32-no/1426522231_LinkedIn-32.png" alt="" width="32" height="32" /></a></p></td>
    <td width="42"><p align="center"><a href="http://www.facebook.com/instalacionesmartinezgonzalez" target="_blank"><img src="https://lh4.googleusercontent.com/-Hp63tqu7BY4/VQb1sQzS1IrI/AAAAAAAAATs/vq5pwxVDF-E/s32-no/1426522248_Facebook-32.png" alt="" width="32" height="32" /></a></p></td>
    <td width="42"><p align="center"><a href="http://twitter.com/inst_mayg" target="_blank"><img src="https://lh4.googleusercontent.com/-ew19dHU3OLTI/VQb1sgauPvI/AAAAAAAAATo/wk_JIVvOWxI/s32-no/1426522255_Twitter-32.png" alt="" width="32" height="32" /></a></p></td>
  </tr>
  <tr>
    <td colspan="8" valign="middle"><p class="Direccion">Polígono Industrial Cerrillo del Villar, Calle Isaac Peral, 25 – Almagro (Ciudad Real)</p></td>
  </tr>
</table>
<p><img src="https://lh5.googleusercontent.com/-AD6o0AkUfMw/VUJAJVfpGYI/AAAAAAAAAhM/dD8XOvIkZ_k/w1598-h71-no/L%C3%ADnea.png" width="829" height="40" /></p>
<table width="828" border="0">
  <tr>
    <td><img src="https://lh3.googleusercontent.com/-vqYOeajuNj4/VUJCm_5S9vI/AAAAAAAAAhw/nXYbrTuYsSg/s48-no/eco.png" width="48" height="48" /><span class="imprimir">Antes de imprimir este correo electrónico piense bien si es necesario hacerlo: El medioambiente es cosa de todos.</span></p></td>
  </tr>
  <tr>
    <td><p class="ley">******** INFORMACIÓN IMPORTANTE ********<br />
La información contenida en este e-mail  va dirigida únicamente a su destinatario y podría contener información privilegiada, confidencial y/o datos de carácter personal. Si Ud. no es el destinatario indicado (o persona autorizada), no debe copiar, distribuir, o llevar a cabo ninguna acción con el mismo. Si hubiera recibido este e-mail por error, por favor notifíquenoslo por e-mail o teléfono.<br />
Le informamos que su correo electrónico forma parte de nuestro fichero de contactos. Dicho correo electrónico es utilizado exclusivamente para el envío de información de nuestros productos y servicios y en ningún caso es objeto de venta o comunicación a ninguna entidad u organización, garantizando, de acuerdo con la legislación vigente, la más absoluta privacidad del mismo. Puede ejercitar sus derechos de acceso, rectificación, oposición o cancelación cuando lo desee.<br />
INSTALACIONES MARTINEZ &amp; GONZÁLEZ, S.L. desea utilizar el correo electrónico para poner a su disposición, de la forma más cómoda posible, información comercial de su interés, ofertas de productos y novedades, invitaciones a eventos, etc. No obstante, si usted no desea recibir más información comercial de INSTALACIONES MARTINEZ &amp; GONZÁLEZ, S.L. por este medio puede hacerlo reenviándonos este mail  indicando en el campo del asunto la palabra BAJA COMUNICACIONES COMERCIALES.</p></td>
  </tr>
</table>

Muchas gracias de nuevo,

[Pablo Videla]

Prueba a ver si te sirve esto, lo que hace el codigo que te envio le pone !important a todas las clases CSS para que le de prioridad a tus clases css 

Código (css) [Seleccionar] Expandir


<style type="text/css">
.web {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 25px !important;
color: #178dba !important;
text-decoration:none !important;
}
.Direccion {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
color: #81a636 !important;
text-decoration:none !important;
}
.nombre {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 24px !important;
color: #87af20 !important;
text-decoration:none !important;
}
.dpto {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 18px !important;
font-style: italic !important;
color: #84d3a8 !important;
text-decoration:none !important;
}
.email {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 18px !important;
color: #178dba !important;
font-style: italic !important;
text-decoration:none !important;
}
.tel {
font-family: Arial, Helvetica, sans-serif !important;
color: #87af20 !important;
font-size: 18px !important;
font-style: italic !important;
text-decoration:none !important;
}
.imprimir {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
color: #81a636 !important;
font-style: italic !important;
font-weight: bold !important;
text-align: justify !important;
}
.ley {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10px !important;
text-align: left !important;
color: #626262 !important;
}
.vcard {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
color: #626262 !important;
text-decoration:none !important;
}
.linkvcard {
font-weight: bold !important;
color: #81a636 !important;
text-decoration:none !important;
}
</style>


[konexion]

Muchas gracias Pablo, en cuanto pueda lo pruebo y te cuento.

[Pablo Videla]

Muchas gracias Pablo, en cuanto pueda lo pruebo y te cuento.

De nada, saludos 

[konexion]

Lo he probado en el Cloudmagic para iphone y no funciona. Cierto es que este programa le quita todo el formato al texto, ni siquiera antes de mandar el correo se visualiza con el estilo del css. Lo voy a probar en el outlook 2013 a ver si funciona, porque es lo que realmente me interesa.

Te mantengo informado y gracias de nuevo.

[ElP4nd4N3gro]

Muy buenas que tal. Mira en la empresa donde trabajo usamos otra empresa para el tema del mailing, y siempre, siempre que he tenido q mandar firmas ha tenido q ser sin css, la verdad es q nunca me he preocupado mucho por esto pero vamos todo lo que mandamos xa firmas de mail es sin css.
Porque con estilos no se visualiza, no los pilla..


un saludo