Alternative à <map> sur Outlook?

Bonjour à tous,

Je suis actuellement en train de faire une campagne de mailing pour mon entreprise et ... QUELLE GALERE !

En fait, j'affiche une grande image contenue dans un <a></a>.
Puis, en bas j'ai un lien facebook, un lien contact, et un lien vers le site (Toujours dans l'image) .

J'ai tenté la balise map : Fonctionnne sous navigateur mais pas sous outlook.

Ou j'ai essayé de mettre une image transparente dessus : Fonctionne sous outlook 2013 mais pas 2010.

Je cherche une solution depuis deux jours, aidez moi


PS: Voici mon code actuel :

<div>
	<a href="http://acces-difficiles.com">
		<img src="http://r-team.fr/mailing/mailing.png"/>
		<img src="http://r-team.fr/mailing/mailing2.png" usemap="contact" />
	</a>
	<span style=" display: inline;position: absolute; top: 2750px; left:156px; width: 200px; height: 50px; cursor: pointer; border: 1px solid red;">
		<a href="http://acces-difficiles.com">
			<img src="http://www.scuolazoo.it/share/largeTransparent.gif" height="50px" width="200px" >
		</a>
	</span>

<br /><br /><br />

	<p style="color: #e2001a; margin-left: 150px; font-size: 18px;"> Si vous n'arrivez pas &agrave; visualiser ce message, rendez vous 
		<a href="http://r-team.fr/mailing" style="text-decoration: underline; font-weight: bolder; color: #e2001a;"> ici </a>
	</p>


	<span style="display: inline; position: absolute; top: 2750px; left:400px; width: 200px; height: 50px; cursor: pointer; z-index: 99; border: 1px solid red;">
		<a href="http://acces-difficiles.com/contact.html" style="z-index: 99">
			<img src="http://www.scuolazoo.it/share/largeTransparent.gif" height="50px" width="200px"style="z-index: 99" >
		</a>
	</span>


	<span style="display: inline; position: absolute; top: 2717px; left:865px; width: 55px; height: 59px;cursor: pointer; z-index: 99">
		<a href="https://facebook.com/accesdifficiles" style="z-index: 99">
			<img src="http://www.scuolazoo.it/share/largeTransparent.gif" height="59px" width="55px" style="z-index: 99; border: 1px solid red;" >
		</a>

	</span>

</div>

Modifié par Glowned (14 Aug 2013 - 15:47)

En fait, je comprend, les divisions se mettent à la suite de l'image, les unes après les autres .

je tente de les mettre en inline....


EDIT: Toujours la même chose, je ne comprend pas .. T.T
Modifié par Glowned (14 Aug 2013 - 15:47)

J'ai pas tout compris à ton problème ("fonctionne / fonctionne pas", c'ets un peu trop binaire comme indication )... mais globalement, quand il s'agis de mailing, le mieux c'est d'utiliser des tableaux. Tu découpes ton image de façon a avoir tes liens dans des cellules à part, épivoila.

Tout d'abord, merci pour ta réponse et pardonne mon manque de clarté.

On a vraiment aucun moyen de coller une image sur une autre en mail?

Sinon j'utiliserai cette option même si elle m'embête un peu (mon image étant déjà coupée en deux pour rentrer dans les limites de certains clients de messagerie .

Bonjour,
j'ai déjà eu le cas dans un e-mailing ça fonctionne correctement dans Outlook (2007 & 2010).

<map name="Map" id="Map">
  <area shape="rect" coords="517,194,585,213" href="#"/>
</map>

Pour le code que tu as fournis, il ne vaut mieux pas compter sur les positions (absolute, fixed, ...) Voici une grille qui te donne une idée du support CSS

Aussi, voici 2-3 règles de bases pour l'e-mailing :
- Pour un <table> il faut toujours définir cellpadding, cellspacing, font-family, font-size, color
- Toujours initialiser individuellement TOUTES tes balises HTML avec un

<div style="margin:0; padding:0;"></div>

- Sur les images dans un lien, Outlook ajoutera une bordure sur ton image

Bon amusement
Modifié par Yordi (19 Aug 2013 - 13:09)