Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: Thunderbird : image animée html avec des liens dans le corps du message...  (Lu 5581 fois)

cricri31

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 118
  • cricri31
    • Voir le profil

Bonjour,


Comment insérer une image html animé, avec des liens (image tranchée dans photoshop) dans un message (thunderbird) ?

Merci.
IP archivée
"La langue bute toujours sur la dent qui fait mal"

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Thunderbird : image animée html avec des liens dans le corps du message...
« Réponse #1 le: janvier 21, 2010, 23:20:16 pm »

Salut.
Il faut le faire par un code html et CSS ou javascript mais avec javascript, c'est pas conseillé et avec CSS, ça peut être limité d'après ce que j'ai pu lire ci et là mais je n'ai jamais eu de soucis.

L'idéal, est de faire le mail dans un éditeur de html (DreamWeaver par exemple) avec des images zébergées sur la toile et des liens zabsolus vers leurs url.

Ensuite dans un courielleur comme Thunderbird (je ne connais pas les autres), créer un nouveau message, cliquer la première entrée et choisir dans le menu «insérer / HTML» dans la petite fenêtre qui s'ouvre, tu fais un copier / coller de ton code html.

Voici un exemple de code avec des images (boutons) que j'ai trouvé sur le web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon email</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
p {color:red;}
li {
list-style:none; /*retirer la puce des listes*/
}

ul.btn li {
margin:0 0 5px 0; donner une marge aux éléments de listes*/
}


ul.btn a {
height:30px; /*donner une hauteur*/
line-height:30px; /*donner une hauteur de ligne pour aligner le texte au milieu verticalement*/
display:inline-block; /*transformer les liens en balise de type block afin de leur donner une taille qui puisse accepter l'image */
background:transparent url(http://slaout.linux62.org/html_css/images/exemples/bouton-2-gauche.png) no-repeat top left; /*propriété du fond avec lein vers l'iamge sur la toile*/
color:white; /*couleur du texte*/
font-weight:bold; /*graisse du texte */
text-decoration:none; /*ôter le soulignement des liens au repos*/
}
/* la partie supérieure est commentée, ci-dessous c'est répétitif, à toi de jouer... */

ul.btn a span {
height: 30px;
display:block;
background:transparent url(http://slaout.linux62.org/html_css/images/exemples/bouton-2-droite.png) no-repeat top right;
padding:0 8px;
}

ul.btn a:hover {
background:transparent url(http://slaout.linux62.org/html_css/images/exemples/bouton-2-gauche.png) no-repeat bottom left;
color:grey;
text-decoration:underline;
}

ul.btn a:hover span {
background:transparent url(http://slaout.linux62.org/html_css/images/exemples/bouton-2-droite.png) no-repeat bottom right;
}

-->
</style>
</head>
<body>
<p>Ceci est un paragraphe et il devrait être rouge</p>
<ul>
<li>ceci est un item de liste et devrait être sans puce.</li>
<li>ceci est un item de liste et devrait être sans puce.</li>
<li>ceci est un item de liste et devrait être sans puce.</li>
</ul>
<p>Ceci est une liste avec des boutons cliquables. Ils doivent être hébergés sur la toile et son déclarés en CSS.</p>
<ul class="btn">
<li><a href="#"><span>item 1</span></a></li>
<li><a href="#"><span>item 2 un peu pus long</span></a></li>
<li><a href="#"><span>item 3 toujours avec les même images</span></a></li>
</ul>
</body>
</html>
Dans ce cas précis, les boutons sont extensibles selon la longueur du texte.
Aperçu :

« Modifié: janvier 22, 2010, 10:59:52 am par edfred »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

cricri31

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 118
  • cricri31
    • Voir le profil
Re : Thunderbird : image animée html avec des liens dans le corps du message...
« Réponse #2 le: janvier 22, 2010, 09:30:22 am »

Merci, c'est une réponse complète !

J'essaye de mettre en pratique. ;)

Merci encore
IP archivée
"La langue bute toujours sur la dent qui fait mal"
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum