> Tous les forums > Forum des Webmasters
 Créer un mail "newletter" en html avec zone cliquableSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
mitai
  Posté le 23/05/2016 @ 16:59 
Aller en bas de la page 
Astucien

Salut !!

Voilà, je souhaiterai créer un mail de type "newsletter" avec une image.jpg que j'ai déjà créé.

Je souhaite insérer une zone cliquable sur une partie de l'image (zone en orange intitulée "Je Participe"), j'ai donc défini ma zone puis enregistré le tout en .html (avec un éditeur html).

Le résultat fonctionne, voilà ce que ça donne : visualiser ici (télécharger et extraire le dossier puis ouvrir le index.html)

Voilà le code HTML complet :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>essai</title>
<meta name="" content="">
<link href="Sans_Titre1.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wb_ImageMap2" style="position:absolute;left:65px;top:38px;width:482px;height:873px;z-index:0;">
<img src="images/MergedObject1.jpg" id="ImageMap2" alt="" usemap="#ImageMap2_map">
<map name="ImageMap2_map">
<area shape="rect" coords="85,649,391,739" href="http://www.google.fr" target="http://www.google.fr" alt="" title="">
</map>
</div>
</body>
</html>

Tout est donc OK jusque là.


Le problème c'est que quand je l'envoie par mail, lors de la réception, j'ai mon image qui apparait mais la zone cliquable ne fonctionne pas...

Comment faire ?

PS : dans "format du texte" sous outlook, lors de l'envoi du mail, je suis bien en HTML,

lors que j'ai ajouté mon fichier html je suis allé dans "Joindre un fichier", j'ai choisi mon fichier html et j'ai fait "insérer comme texte".

Merci par avance !!



Modifié par mitai le 23/05/2016 17:00
Publicité
Malcolm
 Posté le 23/05/2016 à 19:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Salut,

à mon humble avis, c'est une mauvaise idée ... Car tous les lecteurs de mails (outlook en ses différentes versions, thunderbird, ...) ainsi que les webmails (gmail, outlook.com, etc.) et les smartphones (iphone, android, windows phone) risquent de ne pas interpréter de la même façon cette fonctionnalité.

Je te suggère plutôt de découper en plusieurs images ton jpeg, et de le mettre dans la newsletter, une des "sous images" étant cliquable vers le lien "je participe".

Par contre, c'est pareil, rien ne te garantit que tu auras le bon rendu dans tous les systèmes de messagerie ...



Modifié par Malcolm le 23/05/2016 19:08
mitai
 Posté le 23/05/2016 à 19:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci Malcolm !

Mais du coup il n'y aurait aucun autre moyen de trouver une solution plus 'pro' à partir d'un seul fichier HTML ?

Ou bien de créer une page html et de l'insérer simplement dans un mail (mais comment faire ça ?) ^^

Comment font les pro de la newsletter (ebay, rue du commerce, cdiscount etc) pour faire les newsletter qu'ils font ?

Merci encore :)



Modifié par mitai le 23/05/2016 19:14
Malcolm
 Posté le 23/05/2016 à 19:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Pour les "pros" type Rue du commerce, ebay etc, ils font un mail au code source "crade" (entends par là : en tableaux pour la mise en forme) avec une image découpée en plusieurs sous-images et celles-ci sont placées dans les cases du tableau, dont les bordures ont été évidemment masquées.

Mais ça m'arrive de lire une newsletter sur mon smartphone en téléchargeant les images et de la lire sur un webmail (exemple sur Horde / free.fr) et de ne pas avoir le même rendu visuel des 2 côtés, même pour rueducommerce.

mitai
 Posté le 23/05/2016 à 19:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

D'accord, je ne connaissais pas du tout leur méthode... c'est donc bien du "bricolage" aussi

Je vais suivre tes indications et tenter de découper mon image en plusieurs morceaux... (pourquoi pas dans un tableau)

Mais du coup j'assemble ensuite tout dans outlook ou bien dans un logiciel de création de page web (tel que dreamweaver ou wyziwyg webbuilder) ?

Merci !

Malcolm
 Posté le 23/05/2016 à 20:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

non, dans le logiciel de création de page web :-)

Ensuite tu envoies :

- soit la page HTML avec un lien absolu (tes images sont stockées en ligne et l'utilisateur ne pourra les télécharger que s'il a une connexion à internet

- soit la page HTML avec des images "embarquées" mais le mail reçu est alors plus lourd.

Vu ton image, je pense que tu peux la diviser en 3 images que tu empiles verticalement. Le "haut", le bandeau "je participe" et le dessous du bouton/bandeau.

mitai
 Posté le 23/05/2016 à 20:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Super merci !

Je ferai ça demain alors :)

Bonne soirée

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
256,41 €Disque dur externe Seagate Backup Plus Hub 14 To USB 3.0 à 256,41 € livré
Valable jusqu'au 17 Octobre

Amazon Espagne propose actuellement le disque dur externe Seagate 14 To Backup Plus Hub USB 3.0 à 249,62 €. Comptez 6,79 € pour la livraison en France soit un total de 256,41 € livré. On le trouve ailleurs à partir de 325 €. Grâce à la connectique USB 3.0 (compatible USB 2.0), ce disque dur vous offrira d'excellents débits pour vos transferts et vos sauvegardes. Doté de deux ports USB intégrés en façade, ce disque vous permet de sauvegarder vos fichiers, ainsi que vos photos et vidéos, tout en parcourant et en rechargeant votre tablette, smartphone ou appareil photo, même si votre système est éteint ou en veille. 

Le disque dur ST14000DM001 à l'intérieur est de type CMR.

Vous pouvez utiliser votre compte Amazon France sur Amazon Espagne et il n'y a pas de douane. 


> Voir l'offre
6,63 €Adaptateur Benfei HDMI -> VGA à 6,63 €
Valable jusqu'au 16 Octobre

Amazon fait une promotion sur l'adapteur Benfei HDMI vers VGA qui passe à 6,63 € au lieu de 8,49 €. Cet adaptateur vous permettra de connecter un ordinateur ou une console avec un port HDMI sur un écran ou un projecteur possédant une interface VGA. 


> Voir l'offre
GratuitUn livre audio offert sur Amazon.fr
Valable jusqu'au 31 Décembre

En vous inscrivant à l'offre d'essai gratuite du service de livres audio Audible (qui appartient à Amazon) vous pourrez télécharger gratuitement un livre audio. L'abonnement passe ensuite à 9,95 € / mois après ce mois d'essai. Notez que l'offre est résiliable à tout moment et facilement et ce, même avant la fin de l'essai gratuit. Les membres Amazon Prime bénéficient de 2 mois gratuits (2 livres audio offerts).

Vous pouvez prendre n'importe quel livre audio parmi une large sélection de 500 000 titres, peu importe sa durée ou son prix. Vous pourrez télécharger et d'écouter (même hors connexion) vos livres via l'application Audible ou directivement via le site.

Vous n'avez pas le temps de lire ? Avec Audible, écoutez vos livres en voiture, en marchant, en faisant du sport, ...


> Voir l'offre

Sujets relatifs
Pas de mail recu avec formulaire html et php
créer site avec webself
créer mappage avec dreamweaver!
Bulle de texte dans une zone cliquable
Créer mon site avec Webzoo.fr
Codage HTML dans Dreamweaver avec une template Photoshop
Pas d'affichage de la zone de saisie avec IE11
Créer un site avec Wiféo
Créer un site avec WIFEO
créer une page web sans codage avec photoshop
Plus de sujets relatifs à Créer un mail "newletter" en html avec zone cliquable
 > Tous les forums > Forum Forum des Webmasters