> 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
29,99 €Radio réveil Lenovo Smart Clock Essential avec assistant Google à 29,99 €
Valable jusqu'au 18 Septembre

Boulanger via Rakuten fait une promotion sur le radio réveil Lenovo Smart Clock Essential avec assistant Google qui passe à 29,99 € au lieu de 59 €. Avec son large affichage extrêmement visible, vous pouvez consulter l’heure depuis l’autre bout de la pièce. Parlez à Google pour lui poser des questions, écouter de la musique, définir votre heure de réveil, contrôler vos appareils domestiques intelligents et bien plus encore. Cette horloge intelligente est là pour vous aider à être plus productif et à gagner du temps. Elle dispose également d’une veilleuse, d’un haut-parleur et de microphones intégrés.

Notez que si vous n'avez jamais commandé sur Rakuten, cette offre de parrainage vous permettra de déduire 10 € de votre commande. Le radio réveil ne vous reviendrait alors qu'à 19,99 € !


> Voir l'offre
79,99 €Alimentation modulaire Corsair RM650 80+ Gold à 79,99 €
Valable jusqu'au 18 Septembre

Cdiscount propose actuellement l'alimentation modulaire Corsair RM650 à 79,99 €. Cette alimentation de 650W est certifiée 80+ Gold et est garantie 10 ans. Entièrement modulaire, vous pourrez brancher uniquement les câbles (fournis) dont vous avez besoin. On la trouve ailleurs à partir de 100 €. 


> Voir l'offre
8,00 €Câble antivol Ewent EW1241 (1.5 m, à combinaison) à 8 €
Valable jusqu'au 18 Septembre

Amazon fait une promotion sur le câble antivol Ewent EW1241 qui passe à 8 € seulement au lieu de 12 €. Ce câble de 1,5 m est universel et facile à utiliser avec n'importe quel ordinateur portable ou de bureau avec un slot de sécurité. intégré. Protégez votre ordinateur contre le vol grâce à la serrure à combinaison à 4 chiffres.


> 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