AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

  • 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 2009 07 06 00:11:43
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 : 26/05/2009 13:05:43 Vu / téléchargé: 11 808 / 1 347
Auteur : kazma Ecrire un message privé
Note :
9,25 / 10 - par 8 personnes
9,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (49)
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 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
 

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

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 :)

signaler à un administrateur
Commentaire de grandcharles le 26/12/2008 01:59:26 9/10

Bonjour, et merci pour ce code, qui me plait plus spécialement que d'autres que j'ai pu essayer. Mais étant encore un novice en la matière, pourrait-on avoir une réponse à la question posée un peu plus haut, à savoir, comment centrer LE fondu sur la page web, parce que j'ai beau essayer, je ne trouve pas.

Merci d'avance.

Charles

signaler à un administrateur
Commentaire de delaney le 19/01/2009 18:20:14

Bonjour Kazma et merci pour cet excellent code !
Je m'arrache les cheveux en essayant d'y ajouter un bouton pause (ou de provoquer l'interruption du script en survolant l'image avec la souris).
Aurais-tu une idée ?

signaler à un administrateur
Commentaire de delaney le 20/01/2009 09:41:35 10/10

désolé, j'avais oublié de donner une note à ce code :)
voilà qui est fait

signaler à un administrateur
Commentaire de kazma le 20/01/2009 11:56:42

retelecharge le zip j'y ai rajouter deux source une avec bouton marche arret l'autre avec marche arret au passage de la sourie

signaler à un administrateur
Commentaire de delaney le 20/01/2009 12:12:27

Super !
merci Kazma t'es un chef !!!

signaler à un administrateur
Commentaire de kawapoulpe le 03/03/2009 16:03:47 9/10

Bonjour,

Je trouve votre script très intéressant.
Je souhaite le mettre en oeuvre pour afficher un petit bandeau en haut de mon site permettant de faire défiler qques images en boucle et en fondu enchaîné.
Je suis parti sur le modèle fondu auto (je ne souhaite pas que la souris agisse dessus, je veux que çà bouge tout seul dès le chargement de la page).
Pour info : Je suis débutant.
J'ai qques questions :
1 - Pourquoi, au démarrage (à l'affichage de la page), j'ai 2 images qui se fondent très vite, puis ça défile ensuite normalement ?
2 - Est-il possible de changer la vitesse de fondu ? (temps de fondu pour passer d'une image à l'autre, que je trouve trop rapide).

3 - Je souhaite mettre plusieurs photos l'une à coté de l'autre mais qui soient indépendantes. Pour cela, j'ai essayé de dupliquer le div pour en mettre 4 les uns à coté des autres (en changeant leur positionnement) afin d'avoir 4 animations différentes. Mais seule la première change, pas les autres (j'ai changé le nom du div conteneur pour les 4).
Que dois-je faire pour en faire fonctionner plusieurs ? Dois-je aussi dupliquer la fonction et la personnaliser pour chaque animation ? (soit 4 fonctions, ayant chacune un nom différent et associée à chaque animation conteneur + divimage) ou bien ai-je raté un truc ?

Merci d'avance.
Cordialement.
Kawapoulpe.

signaler à un administrateur
Commentaire de kazma le 03/03/2009 19:45:26

retelecharge le zip j'ai fat les modif
-pour l'affichage au demmarage c'est bon
-pour la vitesse j'ai cree une variable tu n'a qu'a modifier sa valeur

-pour plusieurs diapos il faudrait refaire a chaque fois le script et modifier a chaque fois le nom des variable et autres je n'ai aucune autres alternative pour le moment

signaler à un administrateur
Commentaire de delaney le 03/03/2009 19:54:21

Salut Kazma,

Merci encore pour ce code, il est top. Je l'ai utilisé sur un site (celui de ma belle-mère : www.serres-isle-adam.fr) en le modifiant un peu.
Je l'ai couplé à une base de données (via php) qui fournit automatiquement les photos au script. Si tu es d'accord et si quelqu'un en a besoin, je peux essayer de poster le code modifié. Merci et a+

signaler à un administrateur
Commentaire de kawapoulpe le 03/03/2009 22:42:00

Salut,
Merci pour cette rapidité !
Ok pour le point 1. Plus de truc bizarre, c'est tout propre !
Ok pour le point 3, je vais dupliquer.

Par contre pour le point 2, ce n'est pas ce que je voulais.

Ce que tu as mis en variable, c'est le temps d'affichage de chaque image, mais ça, j'avais vu où il était (mais bon, c'est cool quand même car c'est plus visible et plus facile à paramétrer de l'extérieur :o))

Ce que j'aimerai paramétrer, c'est la vitesse du fondu-enchainé, c'est à dire le temps qu'il met pour passer d'une image à l'autre avec le jeu des opacités.
Autrement dit, je souhaite allonger le temps qu'il met à partir du moment où il commence à faire disparaître une image jusqu'à affichage complet de l'autre.
est-ce possible ?

En tout cas merci pour ce super script !
Cordialement.
Kawapoulpe.

signaler à un administrateur
Commentaire de kazma le 04/03/2009 10:38:12


toutes les lignes ou j'ai mis un des @ sont celles que tu peut modifie afin de jouer sur le fondu tu peut toujour essayer cette exemple que j'ai modifie afin que le fondu soit plus long (oubli pas de retirer les @)



function defilmage(reg){
oxo=reg;

if(compteur==nombredimage){
compteur=0
}

if(oxo==1){
compteur++
opaa=00;  @@@@@@@@@@@@@@@
document.getElementById('divimageb').src=compteur+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');

opaa+=5;          @@@@@@@@@@@@@@@@@@@@@@@@@@@
opab-=5;          @@@@@@@@@@@@@@@@@@@@@@@@@@@
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=00;           @@@@@@@@@@@@@@@@@@@@@@
opab=100;
imacibleb.src=imaciblea.src
marche=setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",100);    @@@@@@@@@@@@@@@@@@@@@@@@
}
document.onload=setTimeout(defilmage,vitesse);

signaler à un administrateur
Commentaire de kawapoulpe le 04/03/2009 12:05:42

Bonjour,

Super, merci !!
Ça fait exactement ce que je veux, maintenant !

Merci beaucoup !
Cordialement.
Kawapoulpe.

signaler à un administrateur
Commentaire de cagoulechonchon le 22/05/2009 16:51:47

Merci Kasma pour ce script il est top et fait exactement ce que je veux !

Une question toutefois : lorsque je place mes images dans un dossier ("image") le diaporama bug apres la 2eme image. (j'ai juste changé la source ici :
<img id='divimagea' src="image/1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb'src="image/2.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">

Peut etre faut il faire une autre modification ailleurs mais je ne trouve pas où ..
Pouvez-vous me donner un conseil ?

signaler à un administrateur
Commentaire de kazma le 22/05/2009 18:37:22

ici tu fait la modif

document.getElementById('divimageb').src=compteur+".jpg";

ca donne

document.getElementById('divimageb').src="image/"+compteur+".jpg";

signaler à un administrateur
Commentaire de cagoulechonchon le 23/05/2009 16:23:32

Merci Kazma tu es un dieu !

signaler à un administrateur
Commentaire de kazma le 23/05/2009 17:49:04

je me contenterait d'etre un simple homosapiens

signaler à un administrateur
Commentaire de cPalabait le 24/05/2009 01:30:14 8/10

Bonjour,
Votre code est excellent, notamment parce qu'il fonctionne parfaitement avec IE  (contrairement à un autre code de "fondu enchainer" avec lequel je me suis cassé les dents! ).
Pour simplifier mes pages, j'ai tenté d'en isoler la partie "javascript" dans un fichier .js placé dans un sous-répertoire ... mais sans succès !
Est-ce possible ?
Je pense que c'est la ligne "document.onload=setTimeout(defilmage,vitesse);" qui me pose des difficultés ...
Enfin, j'aurai un 2nde question : est-il possible dans une même page d'y faire tourner un second fondu enchainé ?

signaler à un administrateur
Commentaire de cPalabait le 24/05/2009 11:39:58

Bonjour,
Correction : facile de déplacer tout ce qui est entre les balises <script> dans une feuille .js !
Mais j'observe que le fondu n'est plus effectif avec ie (l'enchainement se fait sans fondu), alors qu'il fonctionne bien  sous FF ...
Reste la possibilité ou non de placer un 2nd fondu enchainé dans une même page ...

signaler à un administrateur
Commentaire de cPalabait le 25/05/2009 00:58:59

Bonsoir.
Super code qui fonctionne parfaitement en local avec les images et une feuille .js dans des dossiers séparés.
Mais elle ne fonctionne plus une fois uploadée chez free !

Pourquoi cette différence de comportement entre local ou chez free ?

Pour tester, j'y ai uploadé vos fichiers d'exemple (avec le script dans le fichier et les images à la racine), et ça fonctionne bien. Mais mes pages et mon site sont trop complexes pour que je procède ainsi ...

Quelqu'un a-t-il une suggestion de solution ?

signaler à un administrateur
Commentaire de cagoulechonchon le 25/05/2009 14:55:48

Bonjour,
En effet j'ai le même probleme.. ca fonctionne parfaitement en local mais ca bug en ligne (moi je suis chez ovh donc pas de probleme de Free)
En revanche j'ai remarqué que ca ne bug qu'au 1er "tour" et ca marche nickel apres. Il faut probablement integrer un pré-chargement des images pour que ca marche des le 1er passage.
.. mais ca je ne sais pas faire..
quelqu'un est il plus doué que moi ?

signaler à un administrateur
Commentaire de kazma le 25/05/2009 18:10:03

j'y pense depuis depuis un moment a mettre un prechargement mais je l'ai pas encore fait j'essaierais de le faire dans les jours a venir

signaler à un administrateur
Commentaire de kazma le 25/05/2009 19:41:57

bon bas finalement j'aurait ete plus rapide que prevus

donc donc donc :
- j'ai rajouter un prechargement j'ai fait des testes et apparement ca marche

- j'ai du en conséquence rajouter un tableau (array) ce qui n'est pas un mal car maintenant on n'est plus oblige de renommer ses images 1 2 3 ...etc il faudra quand meme remplir le tableau du nom des images

- et enfin la variable qui contenait le nombre d'image a été supprimer elle ne servait plus a rien.

++

signaler à un administrateur
Commentaire de cPalabait le 25/05/2009 21:31:00

Bonsoir,
Quelle réactivité, KAZMA ! Je me suis empressé de remplacer l'ancien par un nouveau script, mais je ne sais pas comment entrer le lien relatif Images/fondu_ench dans la ligne :

document.getElementById('divimageb').src=tbimage[compteur]+".jpg";

Je l'avais précédemment ajouté ainsi :
document.getElementById('divimageb').src="Images/fondu_ench/"+compteur+".jpg";

Qui peut me renseigner ?

signaler à un administrateur
Commentaire de cPalabait le 25/05/2009 23:36:39

Bonsoir,
Ce que j'avais écris fonctionne bien en local ... mais toujours pas sur ma page perso de free : rien avec ff; et juste la trace immobile d'un lien vers une image avec ie ... Je pense que le problème est une affaire de liens relatifs ou absolu, mais sans parvenir à aller plus loin ! A moins que ce soit propre à free !
Merci encore à Kazma.

signaler à un administrateur
Commentaire de kazma le 26/05/2009 09:02:05


document.getElementById('divimageb').src="Images/fondu_ench/"+compteur+".jpg";

normalement c'est bon a voir .src="Images/fondu_ench  mais le I de image en minuscule c'est peut etre la cause


cpalabait
j'ai fait des testes en locale et sur un serveur et sa marchait bien et je pense aussi que c'est du au lien car apparement il ne trouve pas le repertoire des images tu peut toujour essayer de mettre le nom du repertoire en minuscule si bien evidement il y a des majuscules et aussi eviter un nom long

signaler à un administrateur
Commentaire de cagoulechonchon le 26/05/2009 10:55:38

Boujour a tous !
Tout d'abord merci Kazma, ca fait vraiment plaisir la rapidité avec laquelle tu reponds !
Bon alors moi de mon coté j'ai fait pas mal de tests avec ton nouveau script et ca fonctionne bien tant qu'on ne place pas les images dans un sous dossier.
Ce qui se passe c'est que les 2 premieres images passent bien et apres elles "sautent" d'une image a l'autre..
Maintenant peut-etre que mon chemin n'est pas bon .. Pour un dossier image intitulé "diaporama" j'ai essayé
- document.getElementById('divimageb').src="diaporama/"+tbimage[compteur]+".jpg";
- document.getElementById('divimageb').src="diaporama/"+compteur+".jpg";
Voila pour le compte rendu mais je ne fais peut etre pas avancer les choses ..

signaler à un administrateur
Commentaire de kazma le 26/05/2009 13:12:08

et une modif de plus

bon j'ai donc rajouter un repertoire celui ci se nome images si on veut lui donner un autre nom il faudra modifier le script

en théorie je dit bien en  théorie il devrait pas y avoir de probleme au niveau du répertoire

conclusion : c'est repartie pour des testes

signaler à un administrateur
Commentaire de cPalabait le 26/05/2009 14:09:29

Bonjour,
J'ai réduit le nom de mon répertoire fondench et l'ai remonté pour être à la racine de mon dossier (n'est plus un sous-répertoire de Images).
Mais ça ne fonctionnait toujours pas sur free, alors que ça fonctionne bien en local.
J'ai tout mis à la racine, le .js et mes images au même niveau que mon fichier .html, et toujours rien ...
Je suis en panne de tests à faire ;-)
A plus

signaler à un administrateur
Commentaire de cPalabait le 27/05/2009 00:58:09

Bonsoir KAZMA,
J'ai poursuivi mes test et ai observé que le problème vient peut-être du format des photos :
1) un diaporama contenant une de mes images insérée au milieu des tiennes tourne bien chez free, sauf mon image qui n'est pas affichée,
2) l'une de tes images ne s'affiche plus si je la ré-enregistre avec gimp ou xnview en jpg truecolor v1.1, alors même que je l'ai laissée au milieu du diaporama réalisé avec tes images ...

Ma question : quel logiciel as-tu utilisé pour enregistrer tes images, et quel format as-tu choisi ?

signaler à un administrateur
Commentaire de kazma le 27/05/2009 09:40:59

j'utilise aussi xnview et paint.net

signaler à un administrateur
Commentaire de cPalabait le 27/05/2009 14:09:34

Merci Kazma,
Pour mes tests, je ne parviens pas à obtenir le même format que vos images, même avec paint.net, xnview 1.96.1, ou gimp 2.26 :
Vous sortez du .jpg Truecolor (v1.2) et je n'obtiens que du .jpg Truecolor (v1.1) !
Acceptez-vous de me dire comment vous procédez, svp ?

signaler à un administrateur
Commentaire de kazma le 27/05/2009 15:09:57

franchement je fait rien de special a part enregistrer avec la config par default
la cause peut etre aussi le nom de tes images si quand tu teste sur windows sa marche lsa peut etre du aux majucule ou encore les espace si il y en a
windows fait abstraction de tous ceci mais souvent les serveur sur internet fonctionnes sur unix et unix est sensible aux majuscules minuscule contrairement a windows et ( coucou ) est different de ( Coucou ) et pour les espaces il peuvent etres remplace pas d'autre carracteres

signaler à un administrateur
Commentaire de cicco69 le 27/05/2009 17:11:47

Bonsoir,
j'ai récupéré le code du défilement auto et du marche/arrêt au passage de la sourie.
Cependant, je n'arrive pas à faire fonctionner cet ensemble. il y aurait-il une âme charitable pour m'aider ? :D
voici le code :

<!--DIAPO JAVASCRIPT-->
<script>
function fOver(img)
{
document.getElementById('divimageb').src=img;
clearTimeout(marche);
}
function fDiapo ()
{
var img = document.rien.hid.value
tbimage = img.split("|");
var preImages = new Array;
var opaa = 0;
var opab = 100;
var compteur = 2;
var vitesse = 1200;
function precharge()
{
for (i = 0; i < tbimage.length; i++)
{
preImages[i] = new Image();
preImages[i].src = tbimage[i];
}
setTimeout(defilmage,vitesse);
}
varTest = true;
function defilmage()
{
if(compteur==tbimage.length-1)
{
compteur = -1;
}
if(!varTest)
{
compteur++;
opaa=10;
document.getElementById('divimageb').src=tbimage[compteur];
varTest = true;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');
opaa+=3;
opab-=4;
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=10;
opab=100;
imacibleb.src=imaciblea.src;
marche = setTimeout(defilmage,vitesse);
return varTest = false;
}
marche = setTimeout(defilmage,25);
}
if(navigator.appName.substring(0,3)=="Mic")
{
attachEvent("onload",precharge);
}
else
{
addEventListener("load", precharge, false);
}
}
</script>


//DIAPO
echo '<div id="divConteneur">';
echo '<img id="divimagea" src="'.$image[0].'" STYLE="opacity:100;FILTER:alpha(opacity=100)">';
echo '<img id="divimageb"src="'.$image[1].'" STYLE="opacity:0;FILTER:alpha(opacity=0)">';
echo '</div>';
$tabToString = implode('|', $image);// le tableau est transformé en chaine de caracteres avec comme separateur |
echo '<form name="rien"><input type="hidden" value="'.$tabToString.'" name="hid"/></form>';
echo '<script>fDiapo();</script><div class="thumbs">';
$j=0;
//thumbs
while ($j<$i && $thumbs)
{
echo '<img src="'.$thumbs[$j].'" class="mini" onMouseOver = " fOver(\''.$thumbs[$j].'\')" onMouseMove = "fDiapo ()">';
$j++;
}
echo '</div>';


je tiens à préciser que le défilement ce passe bien tant que je m'approche pas du thumbs. et que au mouvement de la sourie sur l'image le diapo s'arrête bien mais ne repars pas.
Merci par avance.

signaler à un administrateur
Commentaire de cPalabait le 27/05/2009 22:59:14

Bonsoir KAZMA,

Mon problème est résolu : mes conversions d'images prenaient comme extension .JPG au lieu de .jpg
Ca crevait les yeux, et je ne le voyais pas !

Merci de ta patience, et encore une fois, bravo pour ton code et ta perspicacité.

signaler à un administrateur
Commentaire de cagoulechonchon le 27/05/2009 23:25:28

Kazma U Rock !

Merci pour le script avec le sous dossier, j'avais tout simplement zapé un des chemin pour la source dues images (ba oui c'est ca qd on copie-colle bêtement ! ;-)
Bref ca marche tres bien  (le tps de chargement est un peu long mais je pense que ca doit etre normal)

Merci encore pr ta patience !!

signaler à un administrateur
Commentaire de rtchi le 28/05/2009 12:01:28

merci pour le script, il est tres utile et simple. J'ai par contre une question qui va peut etre vous sembler bete (ou simple) mais je debute dans le dev web. j'ai utilisé ton  script pour dérouler 4 photos dans un bloc style
bloc div
texte texte texte
texte texte texte
texte texte texte
     photos (via ton script)
texte texte texte
texte texte texte
texte texte texte
</div>

ca colle nickel mais comme j'ai plusieurs resolutions utilisateur j'ai voulu remplacer le positionnement absolute par float  fixed pour que l'image s'adapte au contexte) Malheureusement cela ne fonctionne plus, une photo s'affiche puis l'autre en dessous et vice versa.

C'est peut etre juste un pb de Css ou de positionnement mais je seche

merci d'avance de votre aide

signaler à un administrateur
Commentaire de mrabali le 03/06/2009 20:46:40

Bonjour kazma, et merci pour ce script.

Je suis débutant dans le développement web, j'ai ajouté un peu du code php pour pouvoir automatiser la liste des images sans la modifier à chaque fois qu'on ajoute une image au répertoire.

Voici le code pour ceux qui sont intéressés (toutes remarques ou suggestions seront les bienvenues) :

<?php
$arrImages = glob("images/*.jpg"); //la fonction glob() recherche les images ".jpg" contenues dans le dossier "images" et retourne un tableau contenant ('images/img1.jpg', images/img2.jpg', images/img3.jpg',...)

for ($i=0; $i<count($arrImages); $i++){ //on fait une boucle sur le tableau retourné pour enlever "images/" du début (7) et '.jpg' de la fin (-4)
$listeImages .= "," . substr($arrImages[$i], 7, -4);
}
$listeImages = substr($listeImages, 1); // au final $listeImages contient "img1,img2,img3,..."
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fondu</title>
</head>

<body>
<div id="listeImages" style="display:none;"><?php echo $listeImages; ?></div><!-- on stock la liste des images dans cette div qu'on n'affichera pas bien sûr -->

<table><tr><td><!-- j'ai mis les images dans une table pour corriger le problème du positionnement absolu et j'ai enlevé le positionnement absolu à la seconde image-->
<img id='divimagea' src="<?php echo $arrImages[0]; //la première image trouvée par la fonction glob() ?>" style="position:absolute; width:15em; height:15em; opacity:100; FILTER:alpha(opacity=100);">
<img id='divimageb'src="<?php echo $arrImages[1]; //la deuxième image trouvée par la fonction glob() ?>" style="width:15em; height:15em; opacity:0; FILTER:alpha(opacity=0);">
</td></tr></table>

<script type="text/javascript">
<!--
//j'ai mis le code javascript en bas de la page pour pouvoir récupérer la liste des images de la div

var arrImages = document.getElementById('listeImages').innerHTML; //on récupère notre liste des images contenue dans la div
tbimage = arrImages.split(','); //on transforme cette liste en un tableau

//le reste est le même

preImages = new Array;
var opaa = 0;
var opab = 100;
var compteur = 2;
var vitesse = 2000;

function precharge(){
for (i=0; i<tbimage.length; i++){
preImages[i] = new Image();
preImages[i].src = 'images/' + tbimage[i] + '.jpg';
}
setTimeout(defilmage, vitesse);
}

function defilmage(reg){
oxo = reg;
if (compteur == tbimage.length - 1){
compteur = -1;
}
if (oxo == 1){
compteur++;
opaa = 10;
document.getElementById('divimageb').src = 'images/' + tbimage[compteur] + '.jpg';
oxo = 0;
}
var imacibleb = document.getElementById('divimagea');
var imaciblea = document.getElementById('divimageb');
opaa += 3;
opab -= 4;
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 = 10;
opab = 100;
var xcc = imaciblea.src.length - 4;
var cxx = imaciblea.src.lastIndexOf('/') + 1;
var nomimg = imaciblea.src.substring(cxx, xcc);
imacibleb.src = 'images/' + nomimg + '.jpg';
setTimeout('defilmage(1)', vitesse);
return false;
}
setTimeout('defilmage()', 25);
}
if (navigator.appName.substring(0, 3) == 'Mic'){
attachEvent('onload', precharge);
}
else{
addEventListener('load', precharge, false);
}
-->
</script>
</body>
</html>

signaler à un administrateur
Commentaire de cagoulechonchon le 17/06/2009 13:07:25

Bonjour à vous !
C'est vrai que ce script est vraiment genial !
Par contre je m'aperçois qu'il semble poser un petit probleme sous ie6 : j'ai un message qui me dit : "An error has occurred in the script on this page". Ce message me précise
- la ligne : <body onLoad="init();">
- l'erreur : "objet expected"
Le même probleme se pose pour ie7

Y a t-il une alternative pour regler ce probleme ?

signaler à un administrateur
Commentaire de cagoulechonchon le 23/06/2009 10:44:36

Je n'arrive pas a trouver comment faire pour que le diaporama de défilement automatique ("fondu marche arret .html") démarre automatiquement lorsque la page se charge (sans avoir a cliquer "marche")
J'avoue que je suis vraiment nul en Javascript..

Quelqu'un aurait une idée pour me mettre sur la voix ?

signaler à un administrateur
Commentaire de cagoulechonchon le 29/06/2009 14:50:50

Personne n'a une idée ?

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 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 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 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 integrer une boucle à mon code [ par didiercollasse ] Bonjourje voudrais integrer une boucle à mon code pour qu'il fasse deplacer l'image a tous les differents points indiqué dans mon tableau (chev1)mais


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

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

Comparez les prix Nouvelle version


HTC Touch HD
Entre 25€ et 605€


Visiter le guide achat

Photothèque Nouveau !

Photo friends at the beach.Photo pretty girls
Photo pretty girlPhoto maison 80 plan top 1

Visiter la photothèque


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
Temps d'éxécution de la page : 0,390 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é.