[html][css][js] changer le z-index avec js

Résolu
Utilisateur anonyme -  
 Bane -
Bonjour à tous,

Depuis 2 jours, je suis bloqué sur comment changé le z-index d'une couche en cliquant sur une image grace au JS...

En fait mon site à l'apparence d'un dossier sur une table et lorsqu'on clique sur les onglets, cela fait passer la page concernée devant!

Voici mes codes :
HTML (page index.html) 
<html>
<head>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<!--[if lt IE 7]>
	<script defer type="text/javascript" src="pngfix.js"></script>
	<![endif]-->
	<script defer type="text/javascript" src="script.js"></script>
	<title></title>
</head>
<body>
<div id="outer">
	<div id="inner">
		<div id ="layer4">
			<img src ="imag/fiche4.png" width="680" height="394" border="0" \>
			<div id ="content4">
				dddddddd
			</div>
		</div>
		<div id ="layer3">
			<img src ="imag/fiche3.png" width="680" height="394" border="0" \>
			<div id ="content3">
				cccccccc
			</div>
		</div>
		<div id ="layer2">
			<img src ="imag/fiche2.png" width="680" height="394" border="0" \>
			<div id ="content2">
				bbbbbbbb
			</div>
		</div>
		<div id ="layer1">
			<img src ="imag/fiche1.png" width="680" height="394" border="0" \>
			<div id ="content1">
				aaaaaaaa
			</div>
			<div id ="trombonne">
				<img src ="imag/trombonne.png" width="93" height="90" \>
			</div>
			<div id ="photo">
				<img src ="imag/photo.png" width="120" height="160"\>
			</div>
		</div>

		<span id="titre4"><img src="imag/bouton4.png" onClick="BringToTop(layer4,titre4)" width="167" height="34" border="0" \></span>
		<span id="titre3"><img src="imag/bouton3.png" onClick="BringToTop(layer3,titre3)" width="167" height="34" border="0" \></span>
		<span id="titre2"><img src="imag/bouton2.png" onClick="BringToTop(layer2,titre2)" width="167" height="34" border="0" \></span>
		<span id="titre1"><img src="imag/bouton1.png" onClick="BringToTop(layer1,titre1)" width="162" height="34" border="0" \></span>
		
	</div>
</div>
</body>
</html>


CSS (page css/style.css) 
body {
	background-image:url('../imag/bckgrnd.jpg');
	background-repeat:repeat;
	z-index: -1;
}
#outer {
	position: absolute;
	top: 45%;
	left: 0px;
	width: 100%;
	height: 1px;
}
#inner {
	margin-left: -350px;
	position: absolute;
	top: -160px;
	left: 50%;
	width: 840px;
	height: 450px;
}

#layer1 {
	position: absolute;
	top: 34px;
}

#layer2 {
	position: absolute;
	top: 34px;
}
#layer3 {
	position: absolute;
	top: 34px;
}
#layer4 {
	position: absolute;
	top: 34px;
}

#titre1{
	position: absolute;
	top: 0px;
	left: 0px;	
}
#titre2{
	position: absolute;
	top: 0px;
	left: 151px;	
}
#titre3{
	position: absolute;
	top: 0px;
	left: 307px;	
}
#titre4{
	position: absolute;
	top: 0px;
	left: 463px;	
}
#trombonne{
	position: absolute;
	left: -14px;
	top: 30px;
}
#photo{
	position: absolute;
	top: 20px;
	left: 3px;
}
#content1{
	position:absolute;
	top:40px;
	left:180px;
}
#content2{
	position:absolute;
	top:40px;
	left:180px;
}
#content3{
	position:absolute;
	top:40px;
	left:180px;
}
#content4{
	position:absolute;
	top:40px;
	left:180px;
}


et JS (page js/script.js) 
function BringToTop(layer,titre){
	document.getElementById(layer).style.zIndex = document.getElementById(layer).style.zIndex++;
	document.getElementById(titre).style.zIndex = document.getElementById(titre).style.zIndex++;
}


Quelqu'un peut-il me donner un coup de main??

Merci beaucoup
W.
A voir également:

4 réponses

Réponse 1 / 4
Harricote Messages postés 417 Date d'inscription   Statut Membre Dernière intervention   41
 
<script text="javascript">
function zindex(page)
{
document.getElementById(page).style.z-index ='100';
}
</script>

<div id="page1" style="z-index:0">
<img src="ton_image" onclick="zindex('page1');" />
</div>

Voilà !
2
grandbrinus
 
Je n'ai rien a dire sur ce code, mis à part une petite erreur (qui n'est pas si petite que ça au final)

<div id="page1" style="z-index:0;">
<img src="ton_image" onclick="zindex('page1');" />
</div>

( il manquais un ';' dans la balise style, pour que le code soit correct. )
Simple remarque.
0
Bane
 
Le ";" n'est nécessaire que s'il y a une autre instruction CSS derrière... -_-'
0
Réponse 2 / 4
Utilisateur anonyme
 
Merci beaucoup pour ta réponse...
le seul problème avec ça c'est que je suis obligé de mettre le code JS dans la page html alors que je voulais séparer tous mon code en 3 pages (1 html, 1 css et 1 js)...
Mais sinon a part cela, ca marche tres bien!
Merci beaucoup
0
Réponse 3 / 4
Harricote Messages postés 417 Date d'inscription   Statut Membre Dernière intervention   41
 
Non, tu peux mettre ton code js dans une page .js. Par contre, il faut que tu mettes ceci pour lui dire où est ton code : 
<script src="adresse_de_ta_page.js" type="text/javascript"></script>


Voilà
0
Réponse 4 / 4
Utilisateur anonyme
 
Super merci... ca marche tres bien!!
0

Discussions similaires

Samsung Z Flip 4 s'éteint lorsque je le plie.
BOBJENNY -
Tinoon -

4 réponses
A quoi sert CPU-Z ?
mathilde15 -
fabul -

1 réponse