Help, une ptite fonction jouant sur les z-index

Sujet résolu

20 décembre 2009 à 19:32:25

Bonjour a tous,
Bon faut l'avouer j'ai pas mal de difficulté en javascript (Normal:pas de tuto M@téo

) et je ve faire un truc tout simple mais je galere :
Exemple :
J'ai 2 carré :

<div id="numero1"></div>
<div id="numero2"></div>

qui on pour style :

#numero1 {
background-color:red; 
position:absolute;
top:25px;
left:25px;
width:50px;
height:50px;
z-index:1;
}

#numero2 {
background-color:green; 
position:absolute;
top:50px;
left:50px;
width:50px;
height:50px;
z-index:2;
}

Donc Le carré 2 est au dessus du 1

Moi j'aimerai que quand on clique sur le carré 1 (genre un onclick:) je change le z-index pour quil soit en premier plan

Si quelq'un aurai une ptite idée ?
Merci d'avance les 0.

Golmote

20 décembre 2009 à 19:39:54

Bah... une fonction de ce genre :

function z(el1, el2) {
  if(typeof el1=='string') { el1 = document.getElementById(el1); }
  if(typeof el2=='string') { el2 = document.getElementById(el2); }

  el1.style.indexOf = el2.style.indexOf;
  el2.style.indexOf = parseInt(el2.style.indexOf,10)-1;
}

<div id="numero1" onclick="z(this,'numero2');"></div>
<div id="numero2" onclick="z(this,'numero1');"></div>

Pas testé, j'espère que ça fonctionne.

Tillertan

20 décembre 2009 à 19:40:47

document.getElementById('truc').zIndex = 3;

Et tu sais, c'est pas parce que le tuto n'est pas Matéo qu'il est forcement pourri hein :/

Grilled

GOLMOTE ! indexOf ? tu sors ça d'où :-°

?

Et pas besoin de parseInt avec zIndex

LikeQ

20 décembre 2009 à 19:44:03

Citation : Tiller

Et tu sais, c'est pas parce que le tuto n'est pas Matéo qu'il est forcement pourri hein :/

Nan,nan je dis pas ca mais bon on comprend mieux et c'est plus complet
Enfin en tout cas merci les gars jvais tester ca !

Tillertan

20 décembre 2009 à 19:44:51

Si tu tests le script a Golmote fait un replace des indexOf par zIndex, son cerveau a buggé

LikeQ

20 décembre 2009 à 19:49:02

Golmote

20 décembre 2009 à 19:51:14

Euh oui, pardon... :euh:

Bug total de mon cerveau.

Même l'idée est pas top en fait... Vaudrait inverser purement et simplement les deux zIndex en passant par une troisième variable temporaire...

(Sinon plusieurs clics à suivre sur le div 1 baisseraient continuellement les deux zIndex, c'est stupide...)

LikeQ

20 décembre 2009 à 20:18:20

Donc ca donne ca :

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
            <style type="text/css">
            #numero1 {
background-color:red; 
position:absolute;
top:25px;
left:25px;
width:50px;
height:50px;
z-index:1;
}

#numero2 {
background-color:green; 
position:absolute;
top:50px;
left:50px;
width:50px;
height:50px;
z-index:2;
}

            
            
            </style>
            <title></title>
        </head>
    
        <script type="text/javascript">
        function z(el1, el2) {
  if(typeof el1=='string') { el1 = document.getElementById(el1); }
  if(typeof el2=='string') { el2 = document.getElementById(el2); }

  el1.style.zIndex = el2.style.zIndex;
  el2.style.zIndex = parseInt(el2.style.zIndex,10)-1;
}
        </script>
        <body>
<div id="numero1" onclick="z(this,'numero2');"></div>
<div id="numero2" onclick="z(this,'numero1');"></div>
        </body>
        </html>

Golmote

20 décembre 2009 à 20:52:04

Ouais c'est ça. Mais met plutôt cette fonction (suivant la remarque de mon post précédent) :

function z(el1, el2) {
  if(typeof el1=='string') { el1 = document.getElementById(el1); }
  if(typeof el2=='string') { el2 = document.getElementById(el2); }

  var z1 = parseInt(el1.style.zIndex,10);
  var z2 = parseInt(el2.style.zIndex,10);
  if(z1<z2) {
    el1.style.zIndex = z2;
    el2.style.zIndex = z1;
  }
}

Comme ça, on inverse les zIndex, si celui de numero1 et inférieur à celui de numero2. Sinon, on ne fait rien.

LikeQ

20 décembre 2009 à 21:40:20

Nan ca marche pas :/

Golmote

21 décembre 2009 à 15:10:27

Arf oui mince, il faut que les z-index soient indiquées dans les attributs style, et non pas dans la balise... Sinon JS peut pas les lire (enfin si, mais c'est chiant, et j'ai pas la tête à ça).

Bref, ajoute juste les styles dans le HTML :

<div style="z-index:1;" id="numero1" onclick="z(this,'numero2');"></div>
<div style="z-index:2;" id="numero2" onclick="z(this,'numero1');"></div>

Et là ça marche du feu de dieu.

LikeQ

21 décembre 2009 à 22:56:24

Ah ouais ca c'est cool ! Merci les gars