AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 12 04 00:48:15
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DIAPO EN FONDU ENCHAINE


Information sur la source

Catégorie :Effets Classé sous : diaporama, fondu, imagesurvol, image, enchaine Niveau : Débutant Date de création : 25/09/2008 Date de mise à jour : 15/11/2008 16:19:52 Vu / téléchargé: 6 743 / 651
Auteur : kazma Ecrire un message privé
Note :
9,5 / 10 - par 4 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
diapo en fondu enchaine c'est exactement sa des image qui s'enchaine avec un effet de fondu il y a trois script un par selectione de l'image avec la sourie un autre avec bouton 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
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

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

Commentaires et avis

signaler à un administrateur
Commentaire de jjdagadir le 26/09/2008 12:26:55 9/10

çà marche bien et çà peut facilement se caser et être utile.
Il peut être sympa de spécifier pour certains que les vignettes sont redimensionnables et que les EM sont une mesure au même titre que les pixels.
Donc quelques commentaires...mais bravo, le code est léger et çà marche.

KENAVO

signaler à un administrateur
Commentaire de petifa le 27/09/2008 11:44:45

slt,  tu as raison ça marche, c'est simple. Mais j'ai une petite question, pourquoi ne pas mettre oxo en paramètre de la fonction defilmage?
et aussi à la fin lorsque l'image doit être affichée tu mets
# if(opaa>=100){
# opaa=30;
alors qu'à l'initialisation opaa est à 0. Il y a une raison?
bon code

signaler à un administrateur
Commentaire de kazma le 27/09/2008 13:21:32

opaa c'est un reglage que j'ai fait pour que l'opacité ne demamre pas a partir de zero question de visuel rien n'empeche de modifie voir supprime cette valeur pour oxo etant donne que c'est un variable que je modifie c'est a voir

signaler à un administrateur
Commentaire de petifa le 27/09/2008 18:11:50 9/10

oui je suis d'accord mais pour le fondu n'a pas le même rendu si tu bouge assez rapidement sur les diverses "images". Par exemple si tu es sur une image et que pendant le fondu tu bouge sur une autre les variables ne sont pas réinitialisées.
Si tu met en paramètre de fonction tu peux refaire un fondu "complet" à chaque fois, mais bon c classe
merci kazma pour cette source

signaler à un administrateur
Commentaire de kazma le 27/09/2008 19:27:39

reinitialise la variable a la troisieme ligne du script (opaa=30) selon mes testes en reinitialisant juste opaa cela suffit

function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0


++

signaler à un administrateur
Commentaire de sopatleb le 10/10/2008 13:27:01

bonjour kazma j'ai modifié ton code pour en faire un trombinoscope a mettre sur un site. je joind le code mais faudra mettre les photos.
je vais mettre le tous sur le site. par contre j'aimerai lorsque je clique sur le nom afficher un commentaire a un autre endroit de la page.

Sopatleb



<!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>
<title>Untitled Document</title>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #000099;
}
-->
</style></head>
<body>
<div id="divconteneur"style="position:absolute; top:455px; left:400px;"><img src="1.jpg" name="divimagea" id='divimagea' style="position:absolute; width:11em; height:15em; border: 8;" /><img id='divimageb' src="1.jpg" style="position:fixed; width:12em; height:15em;" /></div>


<img src="1.jpg" border="2" style="width:6em; height:7em; position: absolute; left: 434px; top: 9px;" onmouseover="oxo=1;defilmage('1')"/>
<img src="president.jpg" width="140" height="44" border="2" style="width:140px; height:40px; position: absolute; left: 420px; top: 129px;" onmouseover="oxo=1;defilmage('1')" />

<img src="2.jpg" border="2" style="width:6em; height:7em; position: absolute; left: 248px; top: 87px;" onmouseover="oxo=1;defilmage('2')"/>
<img src="secretaire.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 230px; top: 204px;" onmouseover="oxo=1;defilmage('2')"/>

<img src="4.jpg" border="2" style="width:6em; height:7em; position: absolute; left: 631px; top: 84px;" onmouseover="oxo=1;defilmage('4')"/>
<img src="tresorier.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 617px; top: 203px;" onmouseover="oxo=1;defilmage('4')"/>

<img src="5.jpg" style="width:6em; height:7em; position: absolute; left: 379px; top: 253px;" onmouseover="oxo=1;defilmage('5')" />
<img src="initiation.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 357px; top: 371px;" onmouseover="oxo=1;defilmage('5')"/>

<img src="6.jpg" style="width:6em; height:7em; position: absolute; left: 529px; top: 255px;" onmouseover="oxo=1;defilmage('6')"/>
<img src="nature.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 511px; top: 371px;" onmouseover="oxo=1;defilmage('6')"/>

<img src="3.jpg" style="width:6em; height:7em; position: absolute; left: 689px; top: 254px;" onmouseover="oxo=1;defilmage('3')"/>
<img src="organisation.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 665px; top: 371px;" onmouseover="oxo=1;defilmage('3')"/>

<img src="7.jpg" style="width:6em; height:7em; position: absolute; left: 221px; top: 252px;" onmouseover="oxo=1;defilmage('7')" /><img src="arbitre.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 203px; top: 371px;" onmouseover="oxo=1;defilmage('7')"/>

<img src="8.jpg" style="width:6em; height:7em; position: absolute; left: 67px; top: 250px;" onmouseover="oxo=1;defilmage('8')" />
<img src="journal.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 43px; top: 371px;" onmouseover="oxo=1;defilmage('8')"/>

<img src="9.jpg" style="width:6em; height:7em; position: absolute; left: 841px; top: 252px;" onmouseover="oxo=1;defilmage('9')"/>
<img src="webmaster.jpg" width="164" border="2" style="width:140px; height:40px; position: absolute; left: 819px; top: 370px;" onmouseover="oxo=1;defilmage('9')"/>
</body>
</html>

signaler à un administrateur
Commentaire de kazma le 10/10/2008 18:10:46

pas de soucis si tu veut mettre le tout sur le site

pour modifie un texte rajoute une ligne vers la fin du script

opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
document.getElementById(MONTEXTE).nodevalue=le texte
return false;
}
setTimeout("defilmage()",25);
}
</script>

rajoute un parametre a la fonction parametre qui sera le texte selon l'image parametre que tu configure a l'appel de la fonction

function defilmage(MONTEXTE,selimage){

parametre que tu configure a l'appel de la fonction

onmouseover="oxo=1;defilmage('le texte a afficher','3')"/>

signaler à un administrateur
Commentaire de pmthelord le 13/11/2008 10:57:44

Hello et merci pour ton code !

Moi j'ai une autre question.

Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?

Merci à toi

signaler à un administrateur
Commentaire de pmthelord le 13/11/2008 18:58:55 10/10

Hello et merci pour ton code !

Moi j'ai une autre question.

Comment faire pour centrer l'image qui s'affiche au centre de la page horizontalement ?

Merci à toi

signaler à un administrateur
Commentaire de bad_dark_spirit le 24/11/2008 15:47:33 10/10

Ca marche très bien, c'est dommage pour le positionnement de l'image en absolute, c'est toujours un peu lourd pour les compatibilité. En ce qui concerne le reste, c'est super, surtout en ce qui concerne la compatibilité avec les navigateurs :)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

nombre d'image pour diaporama [ par bosto ] Bonjour,Je suis super d&#233;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&#233;er un diaporama &#224; l'aide&nbsp;de php &amp; javascript et j'ai un petit probl&#232;me.En cliquant sur une image du diaporama 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 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 sélection en rectangle sur une image [ par maoboy ] Bonjour,   Actuellement je travaille sur une application à base d'une image en php.   <p class=" changer une image presente sur toutes mes pages en une seule fois [ par dante20007 ] bonjour a tous, je voudrais mettre une image sur toutes mes pages.Mais est il possible d'utiliser un fichier .js ou.css (ou autre )pour choisir cette Help rollover [ par MJ92 ] Bonjour,Je ne maitrise pas trop le JavaScript (en apprentissage) mais j'ai un code pour mon site qui me pose problème. J'essaye de mettre 2 rollovers 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

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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
Temps d'éxécution de la page : 0,343 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.