Sujet Précédent Sujet Suivant

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

Résolu/Fermé
Utilisateur anonyme - 29 mars 2009 à 12:28
 Bane - 18 sept. 2011 à 08:18
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 mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
29 mars 2009 à 12:49
<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
14 oct. 2009 à 17:39
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
18 sept. 2011 à 08:18
Le ";" n'est nécessaire que s'il y a une autre instruction CSS derrière... -_-'
0
Réponse 2 / 4
Utilisateur anonyme
29 mars 2009 à 15:27
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 mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
29 mars 2009 à 20:36
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
29 mars 2009 à 21:48
Super merci... ca marche tres bien!!
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
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
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses