28172 sujets

CSS et mise en forme, CSS3

Superposer deux images

Bonjour,
Je fais une petite animation fondue enchainée,
Cette animation se situe dans un mini DIV (fixe)
Pourtant classique, Smiley confused , mais je n'y arrives pas ...
mon contexte est

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
<!-- etc... ->
<div class='mondiv'>
<img id="La1" class='img1' src="gite_img/1x.jpg">
<img id="La2" class='img2' src="gite_img/2x.jpg">
</div>

Les images sont seules dans le div

div.mondiv {
position: fixed;top:125px;left:20px
margin: 0 ;     padding: 0 ; border:0;
overflow: hidden;

Voila je crois que vous avez le contexte complet
merci de votre aide
Modifié par Christele (22 Jul 2011 - 22:09)
Bonjour,

pour un fondu enchainé, JQUERY. il suffit ensuite de "jouer" avec les fadeIn, fadeOut et delay. 



<div >
<img name="image" src="image_ un.jpg" id="one"  style="display:none"/>
<img name="image" src="image_deux.jpg" id="two" style="display:none"/>
<script type="text/JavaScript">
<!--
$("img#one").fadeIn(3000).fadeOut(3000);
$("img#two").delay(6000).fadeIn(3000);
//-->
</script>
</div>


par exemple...
Modifié par FloydinBremen (22 Jul 2011 - 11:40)
jb_gfx a écrit :
Non, pas vraiment compris...
Si ton but est de superposer les 2 images :

img { position: absolute; }

C'est tout.
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html#position-absolue

Parfaitement ma question, du reste c'était le titre de ma question Smiley cligne
merci ça marche parfait

FloydinBremen@
Ce n'était pas la question et mes javascript je les fait "a l'ancienne, a la main"
au moins je maitrises
Merci a toi l'Ami de ta réponse
Escusez moi, mais j'ais mi RESOLU, alors que j'ais un probléme sous firefox 5
En fait j'ais mis la partie de style dans le HTML pour vous aider a m' aider Smiley smile 
<style> 
div.cr1 {border: 1px solid #000000;margin : auto;text-align:center;width:500px;height:375px;overflow: hidden;
}
img.a1 { position: absolute;-moz-opacity:0;filter:alpha(opacity=0);z-index: -12;}
img.a2 { position: absolute;-moz-opacity:0;filter:alpha(opacity=100);z-index: -12;}
</style>

ça marche sur IE mais si vous avez FF regardez Smiley decu
http://www.chambres-d-hotes-loire.com/gite_photo.php

merci d' avance
Hello,

JS à l'ancienne ? Comme avec Mootools ? Smiley lol

Il te faut un position: relative; sur div.cr1, et un top:0; left:0; sur les deux images.

L'absolute prend en référentiel le dernier élément parent positionné.
Ici tu n'as rien de réellement positionné (pas explicitement), il te faut donc dire à ton parent (.cr1) qu'il est positionné en relatif, pour que les deux images positionnées en absolu le prennent en référentiel.

Bonne fin de journée Smiley cligne
C'est sûr que si le code final n'a rien à voir avec le code de la question du début ça va pas bien marcher. Smiley cligne
jb_gfx a écrit :
C'est sûr que si le code final n'a rien à voir avec le code de la question du début ça va pas bien marcher. Smiley cligne

Oui escuses moi, mais j'avais deux endroits avec le même propbléme,
J'aurais du séparer le premier était (EST) résolu.

Je pensais nêtement que je pouvais l'appliquer dans le deuxiéme cas Smiley confused
Tu n'as pas de raison de t'excuser. Smiley cligne

Dans ton premier exemple ton div était positionné (position: fixed), c'est pour ça que ça ne fonctionnait pas avec le second code.
Modifié par jb_gfx (22 Jul 2011 - 19:11)
Sujet clos
Aller à