> 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
85,11 €SSD Crucial P2 1 To (3D NAND, NVMe, PCIe, M.2, 2400 Mo/s) à 85,11 € livré
Valable jusqu'au 16 Octobre

Amazon Allemagne fait une promotion sur le SSD Crucial P2 1 To (3D NAND, NVMe, PCIe, M.2) qui passe à 80,57 € (avec la TVA ajustée). Comptez 4,54 € pour la livraison en France soit un total de 85,11 € livré. On le trouve ailleurs à partir de 110 €. Ce SSD offre des vitesses de lecture/écriture séquentielle allant jusqu’à 2 400/ 1 900 Mo/s. Il est garanti 5 ans.

Vous pouvez utiliser votre compte Amazon France sur Amazon Allemagne et il n'y a pas de douane. Si vous êtes perdu en allemand, vous pouvez traduire le site en anglais.


> Voir l'offre
414,49 €Ecran PC incurvé 34 pouces Gigabyte G34WQC (WQHD, 144 Hz) à 414,49 € livré
Valable jusqu'au 16 Octobre

Amazon Espagne fait une promotion sur l'écran PC incurvé 34 pouces Gigabyte G34WQC qui passe à 396,68 €. Comptez 17,81 € pour la livraison en France soit un total de 414,49 € livré. On le trouve ailleurs à partir de 549 €. Cet écran possède une dalle incurvée 34 pouces VA WQHD (3440x1440) à 1 ms et à 144 Hz (FreeSync Premium et Adaptive Sync). Elle offre le HDR400 et intègre 2 haut-parleurs 2W. Son pied est réglable en hauteur et en inclinaison.


> Voir l'offre
69,99 €Casque gamer Logitech G635 (DTS Headphone : X v2.0) pour PC, Mac, XBox, PS4, Switch à 69,99 €
Valable jusqu'au 16 Octobre

Amazon fait une belle promotion sur le casque gamer Logitech G635 qui passe à à 69,99 € livré gratuitement alors qu'on le trouve ailleurs à partir de 120 €. Ce casque est compatible PC, Mac, Xbox One, PS4 et Nintendo Switch. Plongez au coeur de l'action avec le casque Logitech G635 et son son surround DTS Headphone:X 2.0. Ce dernier crée une précision positionnelle exceptionnelle en jeu pour que vous puissiez entendre vos ennemis se faufiler derrière vous et ainsi anticipez leurs attaques. Équipé de transducteurs Pro-G 50 mm en maillage hybride vous allez entendre encore plus de détails avec un son d'une grande profondeur et d'une clarté incroyable. De plus, il est équipé d'un microphone unidirectionnel avec fonction de sourdine ! Quant au rétro-éclairage Lightsync RGB entièrement personnalisable, il réagira aux actions se passant dans votre jeu pour une immersion encore plus grande.


> 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