HTML/PHP - superposition d'image gif
Fermé
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
-
22 avril 2005 à 19:33
Anais - 13 avril 2008 à 21:36
Anais - 13 avril 2008 à 21:36
Bonjour
Je cherche à superposer deux, trois images gif dans un tableau qui peux varier d'emplacement sur la page (donc je ne peux superposer par rapport à une position relative à l'ecran)
Je cherche donc à superposer des images (avec fond transparent) dans un tableau.
Si je ne suis pas claire, poser moi des questions
merci d'avance
Je cherche à superposer deux, trois images gif dans un tableau qui peux varier d'emplacement sur la page (donc je ne peux superposer par rapport à une position relative à l'ecran)
Je cherche donc à superposer des images (avec fond transparent) dans un tableau.
Si je ne suis pas claire, poser moi des questions
merci d'avance
A voir également:
- HTML/PHP - superposition d'image gif
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Acronis true image - Télécharger - Sauvegarde
- Inkscape rogner image ✓ - Forum Graphisme
- Image iso windows 10 - Guide
21 réponses
kij_82
Messages postés
4089
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
1 mai 2005 à 12:44
1 mai 2005 à 12:44
Oui, dsl j'ai qq pb en ce moment, je me suis fait coupé du net :(
Alors, les layers c'est comme des panneaux si tu veux qi ont des coordonnées x et y dans ta page, mais aussi z, ce qui fait que tu peux en mettre plusieur au meme endroit, mais qui ont une coordonnées z différentes et qui donc se superposent. Tout ca c'est du HTML.
Un petit exemple de ce que cé donne en code :
Voilà, si tu as d'autre question je reste à ta disposition.
++
Alors, les layers c'est comme des panneaux si tu veux qi ont des coordonnées x et y dans ta page, mais aussi z, ce qui fait que tu peux en mettre plusieur au meme endroit, mais qui ont une coordonnées z différentes et qui donc se superposent. Tout ca c'est du HTML.
Un petit exemple de ce que cé donne en code :
<html>
<head>
<title>entete</title>
<style type="text/css">
// ICI CE SONT LES LAYERS AVEC UN POSITION (absolute ici, et les
//coordonnées (top / left / hauteur / largeur) top et left pour définir
//les coordonnées du points haut gauche de ton layer. Et z-index
//pour la "hauteur" :
#layer1img {position:absolute; top:30px; left:150px; width:200px; height:25px; vivibility:show; z-index:1;}
#layer1anim {position:absolute; top:0px; left:300px; width:200px; height:25px; vivibility:show; z-index:2;}
#layer1text { position:absolute; top:70px; left:350px; width:1000px; height:25px; vivibility:show; z-index:3;}
#layerrep { position:absolute; top:0px; left:0px; width:"100%"; height:"100%"; vivibility:show; z-index:4;}
.text1 {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: White;text-align : left;}
.text2 {font-family: Arial, Helvetica, sans-serif;font-size: 46px;color: White;text-align : left;}
h1 { color : white; font-size : 15pt; }
</style>
</head>
<body>
<div id="layer1anim"> <img src="dragon.gif" name="dragon"> </div>
...
<div id="layerrep">
Voilà, si tu as d'autre question je reste à ta disposition.
++
bacchuss
Messages postés
1162
Date d'inscription
samedi 13 décembre 2003
Statut
Membre
Dernière intervention
6 avril 2009
190
23 avril 2005 à 00:13
23 avril 2005 à 00:13
ca doit pouvoir se faire avec des balises <div> non ?
C'est un genre de calques que tu peux superposer.
Quoi qu'il en soit, si tu veux superposer des choses, tu dois au moins connaitre la position d'un element pour mettre les autres au dessus me semble-t-il...
C'est un genre de calques que tu peux superposer.
Quoi qu'il en soit, si tu veux superposer des choses, tu dois au moins connaitre la position d'un element pour mettre les autres au dessus me semble-t-il...
kij_82
Messages postés
4089
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
30 avril 2005 à 18:28
30 avril 2005 à 18:28
Ben tu fais des layers
Moi aussi je voudrais connaitre un logiciel plus pratique que celui que j'emploi actuellement.
De Magix vidéo 2007.Il est trés possible de monter en calque plusieurs images (découpées ou détourées) sur un méme fond
il suffit que chaque sujet est un fond neutre (blanc de préférence ).
Me contacter sur mon site pour plus d'information VERIMAGESON@aol.com
De Magix vidéo 2007.Il est trés possible de monter en calque plusieurs images (découpées ou détourées) sur un méme fond
il suffit que chaque sujet est un fond neutre (blanc de préférence ).
Me contacter sur mon site pour plus d'information VERIMAGESON@aol.com
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
24 avril 2005 à 17:52
24 avril 2005 à 17:52
Ben ce que je voudrais, c'est mettre plusieurs images les une au dessus des autres dans un tableau, comme des calques
Mais je vois pas comment...
Mais je vois pas comment...
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
30 avril 2005 à 16:26
30 avril 2005 à 16:26
personne ne sait?
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
1 mai 2005 à 08:47
1 mai 2005 à 08:47
tu pourrais etre un peu plus precis?
Salut
Oui mais là c'est en absolu et Slyvore veut du relatif, il me semble.
Alors je pense à emboiter plusieurs DIV en position relative chacun ayant une image de fond différente.
Exple :
<div de l'image 1>
<div de l'image 2>
<div de l'image 3>
</div>
</div>
</div>
Oui mais là c'est en absolu et Slyvore veut du relatif, il me semble.
Alors je pense à emboiter plusieurs DIV en position relative chacun ayant une image de fond différente.
Exple :
<div de l'image 1>
<div de l'image 2>
<div de l'image 3>
</div>
</div>
</div>
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
1 mai 2005 à 19:30
1 mai 2005 à 19:30
ca marcherais d'emboiter plusieurs <DIV>?
moi j'avais essayé comme ca :
<DIV>image1, image2</DIV>
et
<DIV>image1</DIV>
<DIV>image2</DIV>
mais j'avais pas essayé comme toi, je vais essayé ca se soir
Merci kij_82, mais je cherche à faire plusieur images dans un tableau sans connaitre d'avance sa position sur la page...
merci quand meme
moi j'avais essayé comme ca :
<DIV>image1, image2</DIV>
et
<DIV>image1</DIV>
<DIV>image2</DIV>
mais j'avais pas essayé comme toi, je vais essayé ca se soir
Merci kij_82, mais je cherche à faire plusieur images dans un tableau sans connaitre d'avance sa position sur la page...
merci quand meme
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
1 mai 2005 à 20:03
1 mai 2005 à 20:03
bon, je viens de faire le test, ca ne marche pas, mais ta methode fonctionne kij_82, mais en absolue
Je vais voir si j'arrive à me referer par rapport au tableau, mais c'est pas gagné helas
Je vais voir si j'arrive à me referer par rapport au tableau, mais c'est pas gagné helas
kij_82
Messages postés
4089
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
1 mai 2005 à 20:12
1 mai 2005 à 20:12
il suffit de changer la facon de faire, avec un calcul automatique par rapport à l'emplacement de ton tableau : Il te suffit de connaitre le coin gaut gauche du tableau, et de décaler suivant les longueurs de case en pixel pour calculer l'emplacement de tes images. Moi c'est ce que je suit en train de faire pour la gestion de mon inventaire (pour un MMORP), et pour le moment ca marche (g pas encore fini). Mais je te conseil aussi de faire en javascript ( pour calculer les positions car tu dois avoir une méthodes déjà faite qui te retourne la position du coin haut gauche d'un documents (comme un table par exemple).
Voilà,
++
Voilà,
++
<style type="text/css" media="screen"><!--
#image1 { position: relative; background-image: url(../images/bronzes/bronz1g.gif); background-repeat: no-repeat; top: 0px; left: 0px; visibility: visible; }
#image2 { position: relative; background-image: url(../images/bronzes/bronz4p.gif); background-repeat: no-repeat; top: 0px; left: 0px; visibility: visible; }
#image3 { position: relative; background-image: url(../images/bronzes/vbro1.gif); background-repeat: no-repeat; top: 1px; left: 0px; visibility: visible; }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="600" border="1" cellspacing="2" cellpadding="0">
<tr>
<td>
<div id="image1">
<div id="image2">
<div id="image3">
<img src="../images/espaceur.gif" alt="" height="1" width="240" border="0"><br />
<img src="../images/espaceur.gif" alt="" height="240" width="1" border="0">
</div>
</div>
</div>
</td>
</tr>
</table>
De cette manière, je superpose les 3 images dans le coin supérieur gauche de la cellule.
kij_82
Messages postés
4089
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
1 mai 2005 à 20:29
1 mai 2005 à 20:29
c'est vrai que c plus simple, malheureusement, je ne pourrai pas l'appliquer pour moi, snif !
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
1 mai 2005 à 21:20
1 mai 2005 à 21:20
faut que j'essaye ca, ca a l'air sympas
je vous tiens au courant
je vous tiens au courant
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
1 mai 2005 à 21:32
1 mai 2005 à 21:32
yes, ca a l'air de très bien fonctionner, merci ric.
Juste pour que je comprenne, tu fais se superposer plusieurs background dans la meme case, et tu affiche 1 image par dessus pour ajuster la taille de la case? Dans ce cas, n'est t'il pas plus simple de faire une image transparente de la bonne taille et de mettre un truc du genre pour une case de 50x50?
<div id="image1">
<div id="image2">
<div id="image3">
<img src="../images/calque.gif" alt="" height="50" width="50" border="0"><br />
</div>
</div>
</div>
Sinon kij_82, ton RPG, c'est quoi? Moi aussi je posais la question car je programme un rpg sur mon temps libre en php :o)
Juste pour que je comprenne, tu fais se superposer plusieurs background dans la meme case, et tu affiche 1 image par dessus pour ajuster la taille de la case? Dans ce cas, n'est t'il pas plus simple de faire une image transparente de la bonne taille et de mettre un truc du genre pour une case de 50x50?
<div id="image1">
<div id="image2">
<div id="image3">
<img src="../images/calque.gif" alt="" height="50" width="50" border="0"><br />
</div>
</div>
</div>
Sinon kij_82, ton RPG, c'est quoi? Moi aussi je posais la question car je programme un rpg sur mon temps libre en php :o)
Juste pour que je comprenne, tu fais se superposer plusieurs background dans la meme case, et tu affiche 1 image par dessus pour ajuster la taille de la case? Dans ce cas, n'est t'il pas plus simple de faire une image transparente de la bonne taille et de mettre un truc du genre pour une case de 50x50?C'est tout à fait ça, mais je n'avais pas d'image transparente sous la main.
kij_82
Messages postés
4089
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
2 mai 2005 à 09:17
2 mai 2005 à 09:17
RPG basic ou tu nait dans la capitale de ta race (pour avoir un toit ou revivre si tu meurt). Par la suite, tu es libre de faire ce que tu souhaite : pour le moemnt la carte est une ile. Dessus tu as bien sur des perso de type monstre, des pnj de quetes, des pj... Tu peux créer des alliances avec d'autre joueurs (des clans quoi), et rassembler toute ta clique dans une ville : si ton groupe est suffisament nombreux et répond à certains critère tu peux demandée l'autorisation à l'administrateur de créer ta propre ville pour ton clan : dans ce cas, il faut procédé à l'élection d'un maire afin de gérer la ville : la gestion de la ville est attribuée à un joueur désigné maire par les autres membre de la ville. Tu peux aussi t'affilier à une ville autre que la capitale de ta race par la suite. Le but est que les joueurs s'autogèrent sur cette map : au début tu te fais de l'XP sur des quetes et des monstres, puis au fur et à mesure, ce sera plus un jeu de sociabilité entre les joueurs, avec un système d'appréciation entre les races, et en fonctions des actions des personnages.
Voilà en gros le truc. Sinon, les autres chose basique : Un personnage est constitué d'une race, d'un métier, des caractéristiques définie par la race et le métier, idem pour ses capacités et ses différentes compétences (Un peu à la morrowind la dessus).
Voilà, l'époque est fantastico-médiévale pour changer.. :)
++
Voilà en gros le truc. Sinon, les autres chose basique : Un personnage est constitué d'une race, d'un métier, des caractéristiques définie par la race et le métier, idem pour ses capacités et ses différentes compétences (Un peu à la morrowind la dessus).
Voilà, l'époque est fantastico-médiévale pour changer.. :)
++
m0n0-le-14r3
Messages postés
174
Date d'inscription
mercredi 13 avril 2005
Statut
Membre
Dernière intervention
25 octobre 2005
17
2 mai 2005 à 09:51
2 mai 2005 à 09:51
ça me rappelle vaguement quelque chose, .. mais quoi ??!!! :)
Slyvore
Messages postés
19
Date d'inscription
jeudi 2 septembre 2004
Statut
Membre
Dernière intervention
26 avril 2006
2
2 mai 2005 à 11:01
2 mai 2005 à 11:01
Merci pour tout ric, j'ai bien avancer grace a toi
Sinon kij_82, tu as une adresse pour voir à quoi ca ressemble?
Sinon kij_82, tu as une adresse pour voir à quoi ca ressemble?
Salut. Je cherche à mettre plusieurs images en fond d'écran (genre une en haut à droite et une en bas à gauche)... j'ai essayer avec des div mais rien à faire: il n'en affiche qu'une sur deux... qqn pourrait me donner un coup de main ? (je signale que je débute en informatique donc je patauge un peu lol)... merki !
<div class="fond1">
<div class="fond2">
</div>
</div>
<style type="text/css">
div.fond1
{
background-image: url("Eni.jpeg");
background-repeat: no-repeat;
background-position: 0% 0%;
}
div.fond2
{
background-image: url("fond2.jpg");
background-repeat: no-repeat;
background-position: 100% 0%;
}
</style>
<div class="fond1">
<div class="fond2">
</div>
</div>
<style type="text/css">
div.fond1
{
background-image: url("Eni.jpeg");
background-repeat: no-repeat;
background-position: 0% 0%;
}
div.fond2
{
background-image: url("fond2.jpg");
background-repeat: no-repeat;
background-position: 100% 0%;
}
</style>
