Superposition de deux div.

**zulot** · 11/06/2007, 12h03

Bonjour.

J'aimerais pouvoir superposer deux div.

chacune contenant du texte different, et les faire switcher grace a du java script. Mais il faut qu'elles aient le meme emplacement.

Comment faire pour qu'elles aient le meme emplacement?
Quel attribut pour les rendre visible et invisible?

Merci

**E.Bzz** · 11/06/2007, 15h01

Bonjour,
en les positionnant en absolute, tu pourras les mettre au "même emplacement".
Ensuite, attribut leur un z-index : celui ayant la valeur la + grande sera au-dessus.
Tu n'a plus qu'à modifier les z-index via JS pour les faire passer en-dessus / en-dessous ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<style type="text/css">
#div1 {position : absolute;
top:200px;
left:50px;
width:100px;
background-color:blue;
}
#div2 {position : absolute;
top:200px;
left:50px;
width:100px;
background-color:red;
}
</style>
<script type="text/javascript">
function SwitchIt() {
var z = document.getElementById('div2').style.zIndex;
document.getElementById('div2').style.zIndex = document.getElementById('div1').style.zIndex;
document.getElementById('div1').style.zIndex = z;
}
</script>
</head>
<body>
<div id="div1" style="z-index:10;">
div1
</div>
<div id="div2" style="z-index:5;">
div deux
</div>
<input type="button" onclick="SwitchIt();" value="Switch">
</body>
</html>

A+

**zulot** · 11/06/2007, 15h57

Euh z-index y a pas mieux genre visible unvisible?

Pourquoi ca a ete deplacer en javascript je demande rien de javascript je veux des renseignement html et un argument de div??????

**E.Bzz** · 11/06/2007, 15h59

Envoyé par zulot

Euh z-index y a pas mieux genre visible unvisible?

z-index c'est pour la superposition.
Si tu voulais masquer, fallait demander comment ... masquer

**zulot** · 13/06/2007, 14h24

Pardon je me suis mal exprimer c'etait en fait 2 div au meme emplacement mais je les masques alternativement. Et je me suviens plus de l'argument pour visible lol

Et pour l'emplacement c'est donc en absolute

Et je comprends tjs pas pourquoi j'ai atteri en javascript

**E.Bzz** · 13/06/2007, 14h34

Envoyé par zulot

je les masques alternativement. Et je me suviens plus de l'argument pour visible lol

Ben comment tu as fait, alors ?

visible = "visible" / "hidden"

Et je comprends tjs pas pourquoi j'ai atteri en javascript

Ca va venir

**Bowen** · 13/06/2007, 14h39

tiens, j'ai ça sous la main, ça devrait t'être utile.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function show(DivId){
	if(dom){
		document.getElementById(DivId).style.visibility = "visible";
	}else if(ie4){
		document.all[DivId].style.visibility = "visible";
	}else if (ns4){
		document.layers[DivId].visibility = "show";
	}
}
function hide(DivId){
	if (dom){
		document.getElementById(DivId).style.visibility = "hidden";
	}else if (ie4){
		document.all[DivId].style.visibility = "hidden";
	}else if (ns4){
		document.layers[DivId].visibility = "hide";
	}
}

**marcha** · 13/06/2007, 14h48

Y encore des gens sur IE4 et Netscape 4

?

Pour tes div tu peux en effet les placer en absolu, mais le problème
dans ce cas c'est qu'elles sortent du flux. Cela peut être génant pour
le contenu qui suit.

le code document.getElementById(DivId).style.visibility = "hidden"; // ou visible
permet en effet de masquer / afficher la div, mais celles-ci restent dans le flux.

je te conseil document.getElementById(DivId).style.display = 'none'; // block
pour qu'elle n'occupe plus d'espace dans le flux et tu laisse le div en position static
(positionnement par défaut).

Le positionnement en absolu n'est pas forcement une mauvaise solution, mais
si il n'est pas nécessaire, autant l'éviter pour des raisons d'accessibilité. Les mal
voyant utilisent beaucoup le zoom texte (CTRL + molette sur FF) ce qui provoque des chevauchements avec les positions absolues.

**zulot** · 14/06/2007, 12h18

oki merci.

Et dans mon css de base je met comment en invisible?

je met visibility: hidden;

Superposition de deux div.

JavaScript

Discussions similaires

Partager

Partager