Poser une image dans une autre.
Fermé
Kawaii
-
17 sept. 2007 à 12:40
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 17 sept. 2007 à 15:24
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 17 sept. 2007 à 15:24
A voir également:
- Poser une image dans une autre.
- Légender une image - Guide
- Créer une image iso - Guide
- Comment agrandir une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Telecharger une image disque windows 10 fichier iso - Guide
12 réponses
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
17 sept. 2007 à 12:50
17 sept. 2007 à 12:50
salut
Dans la config d un email , je ne pense pas
L image est un fichier importé donc ne remplace pas le fond
Si tu importe une autre image , elle va soit écraser la premier , soit se mettre à suivre
Je pense que ton montage devrai être fait en gif et ensuite importer dans ton mail/html
Enfin je ne suis pas non plus Billou , il existe peu être une soluce , mais dunno :)
Dans la config d un email , je ne pense pas
L image est un fichier importé donc ne remplace pas le fond
Si tu importe une autre image , elle va soit écraser la premier , soit se mettre à suivre
Je pense que ton montage devrai être fait en gif et ensuite importer dans ton mail/html
Enfin je ne suis pas non plus Billou , il existe peu être une soluce , mais dunno :)
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
17 sept. 2007 à 13:29
17 sept. 2007 à 13:29
salut,
oui tu peux.
il faut utiliser la propriété {position}.
et tu fais pareil avec les deux.
par contre la mise en page avec les tableaux tu devrais éviter.
oui tu peux.
il faut utiliser la propriété {position}.
container /* balise qui contient les images */
{
position:relative; /* les éléments contenus seront positionnés par rapport à cette balise */
}
img#identifiant
{
position:absolute; /* sort la balise du flux de positionnement */
left:50px; /* distance par rapport au bord gauche de la boite parente, tu peux aussi placer avec 'top', 'right' et 'bottom' */
}
et tu fais pareil avec les deux.
par contre la mise en page avec les tableaux tu devrais éviter.
Merci beaucoup, mais je ne comprends pas bien les balises.
Voici mon code sans les gifs
<body>
<table width="360" height="292" border="0" align="center" cellpadding="0">
<tr>
<th scope="col"><img src="emailing_blabla.jpg" width="800" height="1052" border="0" usemap="#Map" /></th>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="465,313,795,343" href=" http://www.blabla" /><area shape="rect" coords="569,967,791,989" href="http://www.blabla.fr/poujoulat/fr/pro_societe_reportage_credit.asp" />
</map>
</body>
</html>
Voilà...
Voici mon code sans les gifs
<body>
<table width="360" height="292" border="0" align="center" cellpadding="0">
<tr>
<th scope="col"><img src="emailing_blabla.jpg" width="800" height="1052" border="0" usemap="#Map" /></th>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="465,313,795,343" href=" http://www.blabla" /><area shape="rect" coords="569,967,791,989" href="http://www.blabla.fr/poujoulat/fr/pro_societe_reportage_credit.asp" />
</map>
</body>
</html>
Voilà...
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
17 sept. 2007 à 13:41
17 sept. 2007 à 13:41
mon exemple ne fait que présenter des techniques possibles.
en voyant ton code, je suppose que tu utilises le tableau uniquement pour la mise en page et que tu dois mettre du contenu textuel sous forme d'image…
si c'est bien cela, ce n'est pas une bonne façon de coder.
donc je veux bien essayer de trouver une solution mais il faut que tu saches que des problèmes de mise en page comme celui-là viennent d'une mauvaise conception à la base.
à toi de nous dire ce que tu préfères !
en voyant ton code, je suppose que tu utilises le tableau uniquement pour la mise en page et que tu dois mettre du contenu textuel sous forme d'image…
si c'est bien cela, ce n'est pas une bonne façon de coder.
donc je veux bien essayer de trouver une solution mais il faut que tu saches que des problèmes de mise en page comme celui-là viennent d'une mauvaise conception à la base.
à toi de nous dire ce que tu préfères !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Un emailing est une pub qu'une entreprise envoie à tous ses clients sous forme d'email.
En général on fait un grand jpeg avec le fond et le texte, et seulements quelques zones réactives dessus pour envoyer sur le site.
En fait on ne m'a pas demandé mon avis sur le code, c'est comme ça en tableau et point barre. Je ne trouve pas ça terrible non plus...
Seulement du coup, aujourd'hui avec ces deux gifs tout bêtes à mettre par-dessus, je suis bien ennuyée...
Merci de vos efforts en tout cas.
En général on fait un grand jpeg avec le fond et le texte, et seulements quelques zones réactives dessus pour envoyer sur le site.
En fait on ne m'a pas demandé mon avis sur le code, c'est comme ça en tableau et point barre. Je ne trouve pas ça terrible non plus...
Seulement du coup, aujourd'hui avec ces deux gifs tout bêtes à mettre par-dessus, je suis bien ennuyée...
Merci de vos efforts en tout cas.
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
17 sept. 2007 à 14:14
17 sept. 2007 à 14:14
ok, bon et bien il faut ajouter tes deux '<img>' dans la même cellule.
faire de la cellule la référence de positionnement :
sortir les gifs du flux normal et les placer avec 'top', 'right', 'bottom' ou 'left' :
bien sûr ça risque de ne pas fonctionner du premier coup mais fais déjà un essai avec ça qu'on voit ce que ça donne.
<body> <table width="360" height="292" border="0" align="center" cellpadding="0"> <tr> <th scope="col"> <img src="emailing_blabla.jpg" width="800" height="1052" border="0" usemap="#Map" /> <img id="gif1" src="gif1.gif" width="" height="" /> <img id="gif2" src="gif2.gif" width="" height="" /> </th> </tr> </table>
faire de la cellule la référence de positionnement :
th
{
position:relative;
}
sortir les gifs du flux normal et les placer avec 'top', 'right', 'bottom' ou 'left' :
img#gif1
{
position:absolute;
top:20px; /* à régler */
left:50px; /* à régler */
}
img#gif2
{
position:absolute;
bottom:80px; /* à régler */
right:30px; /* à régler */
}
bien sûr ça risque de ne pas fonctionner du premier coup mais fais déjà un essai avec ça qu'on voit ce que ça donne.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
{
position:relative;
}
img#gif1
{
position:absolute;
top:20px;
left:50px;
}
img#gif2
{
position:absolute;
bottom:80px;
right:30px;
}
<title>Document sans nom</title>
</head>
<body>
<table width="360" height="292" border="0" align="center" cellpadding="0">
<tr>
<th scope="col">
<img src="email.jpg" width="800" height="1052" border="0" usemap="#Map" />
<img id="gif1" src="sep 2007/g1.gif" width=100 height=100 />
<img id="gif2" src="sep 2007g2.gif" width=100 height=100 />
</th>
</tr>
</table>
Voilà. Pour le moment, c'est déjà mieux, sauf que les 2 gifs sont sous la grande image. Ils sont bien au milieu par contre...
Merci, on progresse!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
{
position:relative;
}
img#gif1
{
position:absolute;
top:20px;
left:50px;
}
img#gif2
{
position:absolute;
bottom:80px;
right:30px;
}
<title>Document sans nom</title>
</head>
<body>
<table width="360" height="292" border="0" align="center" cellpadding="0">
<tr>
<th scope="col">
<img src="email.jpg" width="800" height="1052" border="0" usemap="#Map" />
<img id="gif1" src="sep 2007/g1.gif" width=100 height=100 />
<img id="gif2" src="sep 2007g2.gif" width=100 height=100 />
</th>
</tr>
</table>
Voilà. Pour le moment, c'est déjà mieux, sauf que les 2 gifs sont sous la grande image. Ils sont bien au milieu par contre...
Merci, on progresse!
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
17 sept. 2007 à 14:27
17 sept. 2007 à 14:27
le style n'est pas balisé et il manque le sélecteur de la première régle :
<!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/css"> th { position:relative; } img#gif1 { position:absolute; top:20px; left:50px; } img#gif2 { position:absolute; bottom:80px; right:30px; } </script> <title>Document sans nom</title> </head> <body> <table width="360" height="292" border="0" align="center" cellpadding="0"> <tr> <th scope="col"> <img src="email.jpg" width="800" height="1052" border="0" usemap="#Map" /> <img id="gif1" src="sep 2007/g1.gif" width=100 height=100 /> <img id="gif2" src="sep 2007g2.gif" width=100 height=100 /> </th> </tr> </table>
Merci :)
J'ai fait exactement comme ça, mais les deux gifs restent soit dessous, soit d'un côté et de l'autre de l'image.
J'ai fait exactement comme ça, mais les deux gifs restent soit dessous, soit d'un côté et de l'autre de l'image.
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
17 sept. 2007 à 15:01
17 sept. 2007 à 15:01
aaaaaah !
ça aurait été étonnant que ça fonctionne du premier coup !
en fait il faut essayer car je n'ai jamais fait exactement ce que tu demandes.
mais c'est faisable.
j'ai fait cet exemple tout à l'heure pour une autre question.
regarde le premier tableau, il y a une image, plus une image collée à gauche de la cellule et une autre collée à droite.
ça aurait été étonnant que ça fonctionne du premier coup !
en fait il faut essayer car je n'ai jamais fait exactement ce que tu demandes.
mais c'est faisable.
j'ai fait cet exemple tout à l'heure pour une autre question.
regarde le premier tableau, il y a une image, plus une image collée à gauche de la cellule et une autre collée à droite.
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
922
17 sept. 2007 à 15:24
17 sept. 2007 à 15:24
je viens d'essayer avec ton code (mais pas tes images : lol !).
ça fonctionne plus ou moins.
pour un positionnement plus précis il faudra faire des essais.
et il faut sans doute modifier la taille de ton tableau qui est plus petit que l'image…
et il faut ajouter des {display:block;} à tout ce petit monde !
bon courage pour la suite !
ça fonctionne plus ou moins.
pour un positionnement plus précis il faudra faire des essais.
et il faut sans doute modifier la taille de ton tableau qui est plus petit que l'image…
et il faut ajouter des {display:block;} à tout ce petit monde !
bon courage pour la suite !
