Accueil > > > DIAPO MULTIPLES EN FONDU
DIAPO MULTIPLES EN FONDU
Information sur la source
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
- <!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
Historique
- 03 juin 2009 19:15:27 :
- optimisation
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Diaporama image avec fondu enchainé, lien vers page, etdiapo suit scroll de page [ par nonosims ]
salut a tous, je viens vous solliciter pour vous expliquer mon problème. Débutant en script, j'essaye de mettre en place, un bandeau vertical à droite
diaporama en slide [ par francia2010 ]
Bonjour, je voudrais savoir comment faire une image animé (ou en diaporama je sais pas) en slide sur dreamweaver??? Merci! [^^happy10]
diaporama comparatif photos auto [ par maysounave ]
bonjour, cherche a créer un diaporama automatique afin de faire, dans un tableau de ma page web, une comparaison de photos avant et après intervention
header slideshow [ par aalana ]
bonjour, je développe un site sous joomla et j'aimerai bien intégrer un header slideshow, un changement d'images effet fondu, comme un zip javascriptf
diaporama javascript lent [ par nico12908 ]
Bonjour, Voila, j'ai réalisé un diaporama avec ce code javascrpit : <!-- Hide script from older browsers thisImg = 1 imgCt = 13 function newSlide(di
Fond d'écran avec images fondu enchaîné [ par fanzi ]
Bonjour, J'ai trouvé sur ce forum ce script suivant(il n'est pas de moi, mais de kazma): body{ background:url(1.jpg); } var compteur=0 tbimage=n
help!Diaporama ou mur d image [ par ameliecuisine ]
Bonjour, Voila je voudrais creer un diaporama d'image ou un mur d image avec pour chaque image une legende et un lien vers un site internet . Je voudr
simuler la touche F11 pour pouvoir voir un diaporama photo [ par dickyforwomen2003 ]
bonjour, j'ai un script pour faire un diaporama sur une page mais j'aimerais que cette page s'ouvre au maximum, comme avec la fonction F11 afin de po
avez vous une solution [ par leomae ]
bonjour, voilà j'ai créé un diaporama avec musique qui fonctionne nickel sur mon site mais j'ai une question: la musique et le diaporama se lance au
Création d'une diaporama de photo a l'entete du site web [ par khalidhaddaoui ]
S'il vous plait je veux crée une diaporama à l’entête du site web( site d'une association), qui passe de la gauche à la droite et dont la quell
|
Derniers Blogs
CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|