Diapo multiples en fondu

Télécharger le projet
Commenter

Description

script qui sert a mettre plusieurs diapo en fondu
il y a entre autre un prechargement des image
compatible IE 6 a 8 firefox opera chrome et safarie fonctionne aussi avec IE 5.5 mais le diapo n'est pas en fondu

Source / Exemple : 


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

tbimagea=new Array('bateau','peli','bateau2','dauphin','crabe','oiseau'); //tableau des image mettre le nom de toutes les images pour un diapo
tbimageb=new Array('dd','de','df','dg','dh','di','dj','dk');
tbimagec=new Array('aa','ab','ac','ad','ae','af','ag','ah','ai','aj');
preImages=new Array;

function precharge(){
var tbg = tbimagea.concat(tbimageb,tbimagec);  //tableau des tableau afin de precharger toutes les images en une fois preciser le nom de tous les tableaux
for (i = 0; i < tbg.length; i++){
    preImages[i] = new Image();
	preImages[i].src = 'images/'+tbg[i]+'.jpg';
	}
d1=new fondu('divconteneur',tbimagea,2000);  // preciser l'id du diapo , le nom du tableau  contenant le nom des image ainsi que la duree d'attente avant transition du diapo concerne
d2=new fondu('divconteneur2',tbimageb,1000);
d3=new fondu('divconteneur3',tbimagec,500);
}

function fondu(ctn,tb,tps){			//a partir d'ici il n'y a plus rien a faire

if(navigator.appName.substring(0,3)=="Mic"){
this.Imagea=document.getElementById(ctn).childNodes[0];
this.Imageb=document.getElementById(ctn).childNodes[2];
}
else{
this.Imagea=document.getElementById(ctn).childNodes[1];
this.Imageb=document.getElementById(ctn).childNodes[3];
}
this.Tableau=tb;
this.temp=tps;
this.compteur=1;
this.opaa=0;
this.opab=100;
this.oxo=0;
this.defilmage();
}

fondu.prototype.defilmage = function(){

if(this.compteur==this.Tableau.length-1){
this.compteur=-1;
}
if(this.oxo==1){
this.compteur++;
this.opaa=10;
this.Imagea.src="images/"+this.Tableau[this.compteur]+".jpg";
this.oxo=0;
}
this.opaa+=3;
this.opab-=4;
if(document.all && !window.opera){
this.Imagea.style.filter = 'alpha(opacity=' + this.opaa + ');';
this.Imageb.style.filter = 'alpha(opacity=' + this.opab + ');';
}
else{
this.Imagea.style.opacity = this.opaa/100;
this.Imageb.style.opacity = this.opab/100;
}
if(this.opaa>=100){
this.opaa=10;
this.opab=100;
var xcc=this.Imagea.src.length-4;
var cxx=this.Imagea.src.lastIndexOf("/")+1;
var nomimg=this.Imagea.src.substring(cxx,xcc);
this.Imageb.src='images/'+nomimg+'.jpg';
this.oxo=1;
var lui=this;
setTimeout(function() { lui.defilmage(); },this.temp);
return false;
}
var lui=this;
setTimeout( function() { lui.defilmage(); }, 25 );
}

if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>
<body bgcolor='black'>
<div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
<img src="images/bateau.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img src="images/peli.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>

<div id="divconteneur2"STYLE="position:absolute;top:150px;left:320px;">
<img src="images/dd.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img src="images/de.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>

<div id="divconteneur3"STYLE="position:absolute;top:150px;left:580px;">
<img src="images/aa.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img src="images/ab.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>

</body>
</html>

Conclusion :


RAS
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)