18041 sujets

Questions générales et questions de débutants

Superposition de plusieurs images et transparence

Salut à tous
Après avoir recherché des cas similaires au mien sur le forum, je n'en ai pas trouvé qui puissent m'aider. Mon porblème est donc que j'ai plusieurs images de même taille que je voudrais superposer les unes au dessus des autres, pour obtenir un jeu de transparences, je leur ai donc mis l'attribut z-index en fonction de la place que je voulais qu'elles occupent, mais cependant je n'obtiens pas ce que j'attend: les images apparaissent toutes les unes au dessus des autres.
Comment faire?

Voici mon code
html
<div class="ligne">
<span class="case">
<img alt="Sable" class="fond" src="./images/textures/sable/5.png">
<img onclick="plip(8,10)" class="texture" alt="" src="./images/textures/herbe/5.4.png"></span></div>


css
.case{
position:relative;
}

.ligne{
position:relative;
}


.fond {
position: absolute; 
z-index:1;

}



.texture {

position: absolute; 

z-index:2;

}

.zone {
position: absolute; 
z-index:3;
}

.event {
position: absolute; 
z-index:4;
}


Merci d'avance
Modifié par azmeuk (05 Mar 2006 - 16:47)
Bonjour,
est-ce que tu veux avoir plusieurs images qui s'affichent individuellement seulement quand tu fais une action ou que tu passe la souris sur un endroit spécifique ?
ou alors, comme tu utilises des images *.PNG, chaque fois que tu cliques sur un bouton, une image devient visible et le reste.
J'ai connu ce style de programme en son temps, mais dans le sens opposé ou en cliquant sur des boutons, une charmante personne affichée perdait petit à petit ses vètements.
Rien de tout cela, le javascript ici n'est pas mon probleme, je veut simplement afficher des images les unes au dessus des autres.
Bonjour,

Ne serait-ce pas plus simple de créer ta composition avec Inkscape et de l'exporter en une seule image png ? Inkscape gère très bien la transparence.
Oki doki Smiley cligne

Petite remarque : je crois que tu as décroché la timbale avec le validateur lol : 772 erreurs Smiley eek

Remarques, beaucoup qui se répétent.

A commencer par la non fermeture correcte des balises images. Toutes les balises seules comme "img", mais aussi "meta", "link", "br" se codent avec un espace et un slash avant la fermeture.

Exemples :
<img />
<meta />
<br />
...
Smiley smile
Humph
Normalement mon code est valide mais, il y avait 90% du code généré par javascript ( blablabla.innerHTML += 'blablabla' ) et ce code généré ne s'affiche pas dans la source, et c'est donc grace a un plugin firefox que j'ai réussi à retouver le code et que j'ai fait un copier coller dans la page ci dessus.
Mais on s'éloigne du sujet, qui est je le rapelle de trouver un moyen de superposer mes images Smiley langue
t'as essayé comme ça :

#img1 {
	position: absolute;
	width:100px;
	height:100px;
	z-index:1;
	}
#img2 {
	position: absolute;
	width:100px;
	height:100px;
	z-index:2;
	}


Et tu insères ça dans le flux :

<div id="img1">
<img src="image1.gif" width="100" height="100" />
</div>
<div id="img2">
<img src="image2.gif" width="100" height="100" />
</div>


Moi, ça marche...
Modifié par ulysse (06 Nov 2006 - 11:07)
Sujet clos
Aller à