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
nombre d'image pour diaporama [ par bosto ]
Bonjour,Je suis super débutant et surtout graphiste pas technicien. Ma question est peut etre tres simple mais je ne trouve pas de reponse sur le
diaporama en html [ par CPoPo ]
Bonjour, je cherche à créer un diaporama : quand on clic sur "image suivante", une nouvelle image se télécharge. Mias je ne trouve pas le code html à
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
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
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
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
 L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIESL'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit
La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.
La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En re...
Cliquez pour lire la suite de l'article par odewit COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|