[html][css][js] changer le z-index avec js [Résolu/Fermé]

Signaler
-
 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.

7 réponses

Messages postés
417
Date d'inscription
mercredi 21 janvier 2009
Statut
Membre
Dernière intervention
30 janvier 2011
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62870 internautes nous ont dit merci ce mois-ci


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.
Le ";" n'est nécessaire que s'il y a une autre instruction CSS derrière... -_-'

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
Messages postés
417
Date d'inscription
mercredi 21 janvier 2009
Statut
Membre
Dernière intervention
30 janvier 2011
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à

Super merci... ca marche tres bien!!