11548 sujets

JavaScript, DOM et API Web HTML5

Fondu d'image qui ne focntionne pas

Bonjour,

voilà j'essaie d'obtenir le fondu mais ça ne fonctionne pas...

J'ai uniquement la première images qui apparaît et il n'y pas du tout de fondu avec les autres..

Voici mon html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>

	   <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="styles\styles.css" />

		<script type="text/javascript">
			var defilement = true;
			var Fondu = function(classe_img){
				this.classe_img = classe_img;
				this.courant = 0;
				this.coeff = 100;
				this.collection = this.getImages();
				this.collection[0].style.zIndex = 100;
				this.total = this.collection.length - 1;
				this.encours = false;
			}
			Fondu.prototype.getImages = function(){
				var tmp = [];
				if(document.getElementsByClassName){
					tmp = document.getElementsByClassName(this.classe_img);
				}
				else{
					var i=0;
					while(document.getElementsByTagName('*')[i]){
						if(document.getElementsByTagName('*')[i].indexOf(this.classe_img)>-1){
							tmp.push(document.getElementsByTagName('*')[i]);
						}
						i++;
					}
				}
				var j=tmp.length;
				while(j--){
					if(tmp[j].filters){
						tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
						tmp[j].style.filter = 'alpha(opacity=100)';
						tmp[j].opaque = tmp[j].filters[0];
						this.coeff = 1;
					}
					else{
						tmp[j].opaque = tmp[j].style;
					}
				}
				return tmp;
			}
			Fondu.prototype.change = function(sens){
				var prevObj = this.collection[this.courant];
				if(this.encours){
					return false;
				}
				this.encours = true;
				if(sens){
					this.courant++;
					if(this.courant>this.total){
						this.courant = 0;
					}
				}
				else{
					this.courant--;
					if(this.courant<0){
						this.courant = this.total;
					}
				}
				var nextObj = this.collection[this.courant];
				nextObj.style.zIndex = 50;
				var tmpOp = 100;
				var that = this;
				var timer = setInterval(function(){
					if(tmpOp<0){
						clearInterval(timer);
						timer = null;
						prevObj.opaque.opacity = 0;
						nextObj.style.zIndex = 100;
						prevObj.style.zIndex = 0;
						prevObj.opaque.opacity = 100 / that.coeff;
						that.encours = false;
					}
					else{
						prevObj.opaque.opacity = tmpOp / that.coeff;
						tmpOp -= 5;
					}
				}, 25);
			}
	
		</script>

	


   </head>
   
   <!--commentaire-->


   
<body onload="window.monFondu = new Fondu('img_142')">


<div class="global">



<div class="banniere">

<p class="galerie_image"><a href="lien1"><img src="images/es.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/fr.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/en.gif" ></a></p>



</div>





<div class="total">


<div class="colonne_gauche">




</div>

<div class="colonne_milieu">


	
	

<div class="isol_142_first">

<img src="images/photo/12/1.jpeg" class="img_142" style="z-index:100" />>
<img src="images/photo/12/3.jpeg" class="img_142">
<img src="images/photo/12/4.jpeg" class="img_142">
<img src="images/photo/12/8.jpeg" class="img_142">

</div>



</div>


</div> <!--fin du div total-->


</div> <!-- fin de div global -->

</body>


</html>


le css de la classe img_142 est le suivant :




.img_142
 {
 /*width:142px;*/
height:142px;
position: absolute;
top: 5em;
z-index: 0;
}


Merci d'avance pour votre aide.[/i][/i][/i]
Sujet clos
Aller à