28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Modifier l'opacité d'une div sans modifier celle d'une sous

Bonjour a tous,

Je vous explique brièvement mon problème :

Je souhaite créer un bandeau qui puisse changer d'image de fond toutes les x secondes avec une transition pas trop dégueulasse.

J'utilise pour cela Javascript , j'ai créé plusieurs fonctions pour ça:


//me permet de changer la source de l'image (path) de la div id
function changeImageSrc(id,path){
		var url = "url(\""+path+"\")";
		document.getElementById(id).style.background= url;
		fondu_t();
	}
	
//réduit l'opacité de la div pour la première partie de la transition	
function fondu_d(){
		var bandeau = document.getElementById('bandeau');
		var opacity =  window.getComputedStyle(bandeau,null).getPropertyValue('opacity');
		if(opacity>0.1){
			//alert(1);
			opacity /=2;
			document.getElementById('bandeau').style.opacity=opacity;
			var timer = window.setTimeout("fondu_d()",100);
		}
	}

//augmente l'opacité de la div pour la 2e partie de la transition	
function fondu_t(){
		var bandeau = document.getElementById('bandeau');
		var opacity = window.getComputedStyle(bandeau,null).getPropertyValue('opacity');
		if(opacity<1){
			//alert(1);
			opacity *=2;
			document.getElementById('bandeau').style.opacity=opacity;
			var timer = window.setTimeout("fondu_t()",100);
		}
	}

//me permet d'attendre	pour faire la transition
var time =0;
function diapo(){
		
		if(time!=4){
			
			time++
			var timer = window.setTimeout("diapo()",2000);
			
			
		}
		else{
			fondu_d();
			time=0;
		}
	}
	
	
//définit les images et permet de les changer avac transition	
	var Images = ["./img1.png", "./img2.png", "./img3.png"];
	var i =0;
	function slideshow(){	
		if(i==3)
			i=0;
		diapo();
		changeImageSrc('bandeau' ,''+Images[i]+'');
		i++;
		var timer = window.setTimeout("slideshow()",8500);
	}


Ce code change donc d'image toutes les 8,5 secondes et modifie l'opacité de la div pour essayer de faire une transition pas trop moche. ( A améliorer encore a mon goût, mais la n'est pas le problème).
Le problème vient du fait que la div "bandeau" contient une div "menu" et que l'opacité de cette div est modifiée aussi.

J'ai essayé de modifier le z-index des deux div mais ça n'y change rien.

Existe-t-il une solution autre que passer par le JavaScript pour que ma div "menu" ne soit pas modifiée?

Voilà le css pour ces deux div


#menu{
	width : 170px;
	height:184px;
	background : url("./fond-menu.png");
	opacity : 0.8;
	/* for IE */
  filter:alpha(opacity=80);
	z-index:8;
	position : absolute;
	top : 0px;
	left:0px;
}

#bandeau{
	position : relative;
	float : left;
	width : 996px;
	height: 212px;
	background : url("./img1.png");
	opacity : 1.0;
	/* for IE */
  filter:alpha(opacity=100);
  z-index:1;
}


En espérant que quelqu'un à déjà eu ce problème et qu'il l'a résolu. Smiley biggrin

Bien cordialement,

elkastor
[/i]
Modifié par elkastor (29 Jul 2010 - 14:00)
Salut elkastor »

Tu n'est certe pas obliger d'avoir une sous div de cette façon.
Un div conteneur peut aussi être utile dans ton cas. Celui-ci pourra avoir deux sous div.

Un à cibler par ton script javaScript et l'autre (menu), flottant à côter. Un peu comme ceci »


<div id="conteneur">
  <div id="diaporama">
     // -- Ton contenu ici
  </div>
  <div id="menu">
     // -- Ton contenu ici
  </div>
</div>


Ton style CSS pourra faire flotter à gauche ou à droite les div's en interne. Ils seront côte à côte. Visuellement tu pourras faire comme si il n'y avait qu'un seul espace. Sans margin ni border et un background de même couleur sur les div's, afin qu'il soit coller ne formant qu'un ensemble visuel.

Seul le id du div diaporama (bandeau dans ton cas) sera cibler par programmation. Espérant t'avoir aider.

Il est évident que ton div menu subit les effets du programme car il est un sous div de bandeau donc considérer comme un contenu. C'est l'héritage : parent/enfant.

++ zardoz.
Modifié par zardoz (28 Jul 2010 - 19:43)
En effet , ça marche mieux comme ça


<div id="header">
			<div id="title">
			</div>
			<!-- fin du title -->
			<div id="bandeau" >
			</div>
			<!-- fin du bandeau -->
			<div id="menu">
					<table>
						<tr>
							<td class="first"></td><td><img src="img1.png" /></td><td><a href="">Menu1</a></td>
						</tr>
						<tr>
							<td class="first"></td><td><img src="pimg2.png" /></td><td><a href="">Menu2</a></td>
						</tr>
						<tr>
							<td class="first"></td><td><img src="img3.png" /></td><td><a href="">Menu3</a></td>
						</tr>
						<tr>
							<td class="first"></td><td><img src="img4.png" /></td><td><a href="">Menu4</a></td>
						</tr>
						<tr>
							<td class="first"></td><td><img src="img5.png" /></td><td><a href="">Menu5</a></td>
						</tr>
						<tr>
							<td class="first"></td><td><img src="img6.png" /></td><td><a href="">Menu6</a></td>
						</tr>
					</table>
				</div>
				<!-- fin du menu -->
		</div>
		<!--fin du header-->


et le css : 

#header{
	width : 996px;
	height : 250px;
	background-color : #FFFFFF;
}

#title{
	width : 205px;
	height : 38px;
	background: url("./titre.png") no-repeat;
}

#menu{
	width : 170px;
	height:184px;
	background : url("./fond-menu.png");
	opacity : 0.8;
	position : absolute;
	top : 38px;
	left : 0px;
	z-index : 2;
}

#menu table{
	margin-left : 10px;
	border :0px;
}

#menu td{
	font-variant : small-caps;
	line-height : 25px;
	font-size : 12px;
}

#menu a{
	text-decoration : none;
	color : #7A7067;
}

#menu a:hover{
	color : #000000;
	font-weight : bold;
	white-space : nowrap;
	
}

#bandeau{
	position : relative;
	float : left;
	width : 996px;
	height: 212px;
	background : url("./restaurant1.png");
	opacity : 1.0;
	/* for IE */
  filter:alpha(opacity=100);
  z-index:1;
}


merci pour ta réponse

elkastor
Sujet clos
Aller à