Accueil > > > DIAPO EN FONDU ENCHAINE
 DIAPO EN FONDU ENCHAINE
 Information sur la source
 Description
diapo en fondu enchaine c'est exactement sa des image qui s'enchaine avec un effet de fondu il y a quatre script un par selectione de l'image avec la sourie un autre avec bouton marche arret un avec marche arret au passage de la sourie et le dernier automatique les script peuvent paraitre cour mais il sont efficaces et simple a mettre en oeuvre compatible ie ff safa opera chrome et aussi IE 7 et 8 beta 2. afin d'optimise l'afichage il peut etre interressant d'ajouter un prechargement d'image
 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>
- var oxo=1;
- var opaa=0;
- var opab=100;
- function defilmage(selimage){
- if(oxo==1){
- opaa=30;
- document.getElementById('divimageb').src=selimage+".jpg";
- oxo=0;
- }
- imacibleb=document.getElementById('divimagea');
- imaciblea=document.getElementById('divimageb');
- if(imacibleb.src==imaciblea.src){
- return false;
- }
- opaa+=5;
- opab-=10;
- if(document.all && !window.opera){
- imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
- imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
- }
- else{
- imaciblea.style.opacity = opaa/100;
- imacibleb.style.opacity = opab/100;
- }
- if(opaa>=100){
- opaa=30;
- opab=100;
- document.getElementById('divimagea').src=document.getElementById('divimageb').src
- return false;
- }
- setTimeout("defilmage()",25);
- }
- </script>
- </head>
- <body>
- <div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
- <img id='divimagea' src="1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
- <img id='divimageb' src="3.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
- </div>
- <img src="1.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('1')">
- <img src="3.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('3')">
- <img src="4.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('4')">
- <img src="5.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('5')">
- <img src="6.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('6')">
- </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>
var oxo=1;
var opaa=0;
var opab=100;
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');
if(imacibleb.src==imaciblea.src){
return false;
}
opaa+=5;
opab-=10;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=30;
opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
return false;
}
setTimeout("defilmage()",25);
}
</script>
</head>
<body>
<div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
<img id='divimagea' src="1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb' src="3.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
<img src="1.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('1')">
<img src="3.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('3')">
<img src="4.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('4')">
<img src="5.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('5')">
<img src="6.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('6')">
</body>
</html>
 Conclusion
ca marche CA MAAAAAAACHE
 Historique
- 26 septembre 2008 10:41:37 :
- ajout d'un conteneur (un div)
- 28 septembre 2008 15:42:39 :
- reinitilisation d'une variable plutot afin de mieux gere les deplacements rapides
- 03 octobre 2008 12:07:28 :
- mise a jour xhtml
- 15 novembre 2008 16:19:53 :
- ajout de sources
- 20 janvier 2009 11:59:17 :
- ajout de script
- 03 mars 2009 19:37:31 :
- ajout d'une variable pour la vitesse + optimisation
- 25 mai 2009 19:35:07 :
- ajout d'un prechargement
ajout d'un tableau pour les images
- 26 mai 2009 13:05:44 :
- ajout d'un repertoire pour les images
 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
ajouter fin sur diaporama [ par jpthali ]
Salut à tous, j'ai une petite question concernant l'excellent source [url=http://www.javascriptfr.com/codes/DIAPO-SIMPLE-TOUT-PRET_25617.aspx]de ce d
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
Chargement d'une image en fondu [ par pastissimo ]
Bonjour,Je bidouille en JS et HTML et apres maintes recherches je n'ai trouvé aucun script permettant d'avoir une image qui apparait en fondu au charg
Fondu sur image [ par Guerrilla ]
Bonjour à tous,Enfaite je travaille sur une sorte de CMS (Jahia), donc ça se peut qu'il y ait des contraintes, mais je demande quand même.J'ai donc un
Bloquer un setTimeout [ par ov3rdoze ]
Salut à tousJ'essaye de faire une galerie photo avec un diaporama. Tout fonctionne mais j'ai un problème dans un cas particulier : Si on arrete le dia
Problème avec les caractères spéciaux ! [ par Ruffneck2045 ]
Bonjour, j'ai créer un diaporama à l'aide de php & javascript et j'ai un petit problème.En cliquant sur une image du diaporama
diaporama javascript avec un lien pour chaque image [ par feldrik ]
Bonjour, je bute sur un problème depuis des jours, et espère trouver sur ce forum une âme charitable pour me tirer de ce mauvais pas. Je veux faire un
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
diaporama automatique avec liens sur chaque image [ par ju1385 ]
Bonjour, j'ai ici un script simple de diaporama d'image que j'ai récupéré et qui marche bien. Cependant, je voudrais y modifier/ajouter 2 choses (je n
|
Derniers Blogs
 XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.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 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
|