[Debutant] profondeur d'image

[smokingsmile]

Bonjour, je tiens à préciser que je débute dans le domaine (j'suis plutôt issu de l'as3 ), merci d'être conciliant avec la question...Qui n'a peut être pas de sens ;-) .

J'ai une div :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
////HTML
<div id="ecrans">
<a href="#screen1"><img src="images1.jpg"  /></a>
<a href="#screen2"><img src="images2.jpg"  /></a>
<a href="#screen3"><img src="images3.jpg"  /></a>
<a href="#screen4"><img src="images4.jpg"  /></a>
</div>
//CSS
#ecrans { position: absolute; left: 0; top: 0; width: 402px; height: 204px; overflow: hidden; }
 
///JSJQUERY
function profondeur() {
	$('#yr-ecrans a:eq(1)').css({opacity: 0})
	$('#yr-ecrans a:eq(1)').stop().animate({opacity: 1});
///Bon là il me manque du code mais je ne sais vers quoi me tourner !;-)
}

Ce que je cherche à faire dans ma fonction profondeur.
Opacité image2 = 0
Faire monter mon image 2 à la position 1
Animation Opacité image2=1
....
Si tant est que j'ai été clair cela est il possible ?...
Comment faire remonter mon image2 ?...
Dois je m'y prendre d'une manière différente ?...
Mille Mercis ;-) !

[SpaceFrog]

regarde du coté de jquery pour une gestion de l'opacité ...

[smokingsmile]

Envoyé par SpaceFrog

regarde du coté de jquery pour une gestion de l'opacité ...

Oups, mon premier pb n'est pas un souci d'opacité...
Mais de cibler l'image2 et de la faire remonter dans la liste d'affichage...?
Afin qu'elle vienne s'afficher par dessus l'image1...
Est ce cohérent ?

[SpaceFrog]

Code :

eq(1)

fait varier le 1 ...
1 = première image

[smokingsmile]

Envoyé par SpaceFrog

Code :

eq(1)

fait varier le 1 ...
1 = première image

Euh ok eq(nbre) cible là j'avais compris.
Alors je ne dois pas être clair.
Pour moi...
dans ma div ecrans j'ai 4 images qui se superposent par défaut la première image est affichée.
Je souhaite afficher l'image2 avec un fadeIn en gros.
Donc mon idée est que ma fonction qui est appelé par un bouton, me permettent de la déplacer (au niveau html et non graphique) (ou la cloner) avec une opacité de 0 pour la faire passer en première position puis de lui appliquer un fadeIn...

Je veux bien cibler ma deuxième image avec :


$('#yr-ecrans a:eq(1)')

Mais comment fais je pour
1. Lui appliquer une opacité de 0
2. la faire remonter dans liste (pour qu'elle soit au dessus de l’image 1 en terme de profondeur)
3.la faire apparaître

...J'suis toujours pas clair Vraiment je débute donc c'est fort possible !!! ;-)


//////////////////////
EDIT
//////////////////////

Bon en fait j'ai de gros pbs...!!!

Je pensais que les images se supersposaient les unes aux autres mais ceci ne semble pas être le cas...En effet quand j'applique un fadeOut 100% sur ma première image...Je ne vois pas ma seconde image mais un fond blanc ça ne me paraît pas logique...Qui saurait me dire ou est mon mauvais raisonnement ? ?...

[SpaceFrog]

profondeur =>

Code :

.css ({"z-index": value})

[smokingsmile]

Envoyé par SpaceFrog

profondeur =>

Code :

.css ({"z-index": value})

Bon ce n'est pas encore résolu mais ça m'a permis d'avancer, merci. ;-) !