begin process at 2010 02 10 07:18:55
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > DIAPO MULTIPLES EN FONDU

DIAPO MULTIPLES EN FONDU


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :fondu, plusieur fondu, diapo fondu, diaporama Niveau :Débutant Date de création :28/05/2009 Date de mise à jour :03/06/2009 19:15:27 Vu / téléchargé :6 356 / 1 011
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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>
<!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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

03 juin 2009 19:15:27 :
optimisation

 Sources du même auteur

Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML
Source avec Zip Source avec une capture OGG MEDIA PLAYER
Source avec Zip Source avec une capture FENETRE D'ACTUALITE
Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT
Source avec Zip Source avec une capture AFFICHAGE D'IMAGE
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture DEFILEMENT D'IMAGE PAR TABLEAU par kazma
Source avec Zip Source avec une capture DIAPOS MULTIPLES par kazma
Source avec Zip Source avec une capture DIAPO EN FONDU ENCHAINE par kazma
Source avec Zip BANNIÈRE, DIAPORAMA, FONDU, AJAX par abdoulax

Commentaires et avis

Commentaire de mickaelpfr le 29/05/2009 10:52:32

script pas mal , mais j'ai horreur de l'instanciation du tableau d'image ...
une méthode récupérant les images avec un rel="diapo" ou autre aurait été plus pratique :)

Commentaire de kazma le 29/05/2009 12:30:39

je ne conait pas du tout la methode j'ai fait qq recherche mais comme souvent ces temps je n'ai rien trouve

Commentaire de mickaelpfr le 29/05/2009 13:32:19

exemple d'images dans un conteneur :

<div id="listeimages">
<img src="..." rel="diapo"/>
<img src="..." rel="diapo"/>
<img src="..." rel="diapo"/>
</div>


//Méthode d'instanciation de ton diapo :

function getAllImgForDiapo(idConteneur){
tontablImage = null; //Le tableau qui sera passé a ta méthode créant le diapo
var listeImage = document.getElementById(idConteneur).getElementsByTagName('img');
for(var i = 0 , l = listeImage.length; i <l ; i++){
if(listeImage[i].rel == "diapo"){
tontablImage.push(listeImage[i]);
}
}
//Appel de ta méthode soit en passant le tableau d'image , soit en le mettant en variable globale
}

donc on pourra créer autant de diapo voulut juste en faisant :

getAllImgForDiapo(idConteneur); ...

ou en passant par le document complet etc ...

Commentaire de jdmcreator le 29/05/2009 23:03:24

Ou alors on peut passer par getAttribute :

<img src="....jpg" diapo="true">

et avec comme javascript :

document.getElementsByTagName('img')[i].getAttribute("true")

Quant à la source, elle fonctionne bien sous IE7 et Safari 3 malgré que sur Safari, il y a le bogue habituel (les setTimeOut et les SetInterval sont trop lent) mais c'est un détail

JDMCreator

Commentaire de mickaelpfr le 30/05/2009 00:25:23

mouai mais avec les attributes non natif , ce ne sera pas valide w3c.
De plus utilise plutôt un setinterval :) ( comme ça tu ne seras pas bloqué par la gestion de la boucle en cours ...

Commentaire de jdmcreator le 30/05/2009 02:17:36

Personellement, j'utilise cette méthode lorsque j'ai beaucoup d'information à gérer pour chacun des éléments. Pour le setInverval, ça dépend il y a combien d'éléments. Je préfère les boucles aux setInterval/setTimeout que je trouve trop relatifs. Mais c'est personnel. Mais c'est vrai que c'est meilleur au cas où le nombre d'éléments est trop grand ;)

Commentaire de kazma le 31/05/2009 18:48:53

finalement je pense que je vais la laisser tel quel

le motif :
la source est quand meme pas mal comme ca et surtout totalement fonctionnel et pas trop complique a mettre en œuvre
de toute facon rien n'empeche de faire des modifs sur la source

Commentaire de plarts le 01/06/2009 14:23:06

Comment ralentir la vitesse du Fondu ?
y t il une variable, à changer ?

Commentaire de kazma le 01/06/2009 15:20:23

tu modifie ces deux valeurs et sa devrait etre bon met une plus petite valeur

this.opaa+=3;
this.opab-=4;

tu peut aussi jouer ici mais on est deja dans l'extreme diminue le 25

setTimeout( function() { lui.defilmage(); }, 25 );

Commentaire de thomeuxe le 15/10/2009 20:03:36 10/10

Good job ! ;)

Commentaire de PopCorn38 le 21/10/2009 17:21:02 10/10

Super ton code!!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Diaporama javascript [ par standoff ] effet de fondu [ par seb019 ] Bonjour,Voila sur un site j'ai vu un truc qui me plait, je pense que c'est du javascript mais je suis pas sur :lorsqu'on clic sur un lien la page s'ou SVP!!! configurer diaporama [ par el gringo ] Bonjour à tous,Je développe actuellement mon site internet et afin de présenter mes différentes illustrations j'aimerais inclure des diaporamas.Malheu diaporama [ par jcb54 ] bonjourqui pourra me depanner je viens de copier un script sur jejavascript et je suis bloquer sur la premiere image je ne comprend pas bien la fonct Controle SlideShow [ par Miloflyer ] Bonjours a tous. J'ai trouver cet bribe de code qui permet de faire une sorte de petit diaporama avec des photos, mais j'aimerai l'adapter... J'aimera diaporama [ par morgandetoi06 ] bonjour, j ai voulu faire un diaporama en PHP/JSmaius il ne marche pas et je ne voit pas pksvp aidez moi: voila le code que j ai fait merci de me donn lien sur photos en javascript [ par missFlo17 ] Bonjour bonjour,Voilà, j'ai un diaporama de photos en javascript et j'aimerai que chaque photo correspond à un lien vers une page (1 page différente p Diaporama dans une page web [ par Winnieptitourson ] Sur mon site j'ai mis un diaporama dans une page web.Mais il parait que ça fonctionne pas avec tous les navigateurs.Quelqu'un a-t-il une solution ?htt Image flottante qui apparait et disparait en fondu, aléatoirement [ par benmp2p ] Bonjour SVP j'ai besoin d'un peut d'aide Voila je cherche un script qui permet d'afficher une image cliquable flottante (qui reste affiché méme en b Diaporama 3D [ par walimoha ] J'ai installé le diaporama 3D, mais le nombre d'image est limité à 12 et il n'ya pas moyen d'en rajouter! Comment faire pour pouvoir afficher plusieur


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,983 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)