begin process at 2012 02 11 03:14:50
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > FONDU ENCHAINER ENTRE PLUSIEURS IMAGES

FONDU ENCHAINER ENTRE PLUSIEURS IMAGES


 Information sur la source

Note :
8,33 / 10 - par 6 personnes
8,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :fondu, défilement, effet, transparent, galerie Niveau :Débutant Date de création :31/07/2006 Date de mise à jour :21/11/2008 18:58:27 Vu / téléchargé :40 165 / 4 304
Auteur : ryosama

Ecrire un message privé
Commentaire sur cette source (60)
Ajouter un commentaire et/ou une note

 Description

Ce code JS vous permettra de faire défiler plusieurs images contenu dans un répertoire les une après les autres via un fondu.
- Il est compatible IE et Mozilla
- Fonctionne avec GIF, JPEG, PNG
- Entièrement paramètrable (fluidité, temps de pause, nombres d'images, ...)
- Très simple a mettre en oeuvre

Démo visible ici : http://www.coopmcs.com/demo/fondu/fondu.html

Source

  • <HTML>
  • <HEAD>
  • <TITLE>Fondu de plusieurs images</TITLE>
  • <!-- On déclare le code source -->
  • <SCRIPT LANGUAGE="JavaScript">
  • <!--
  • // mettre un minimum de 4 images !!!
  • var coef = 0.05 ; // avancement de l'opacité
  • var temps = 50 ; // temps entre chaque changement d'opacité
  • var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
  • var nombre_image = 5 ; // nombre d'images a faire bouger
  • var prefix_image = 'gfx/'; // chemin + prefix du nom des images
  • var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
  • // pas touche
  • var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
  • var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
  • var img1 = null;
  • var img2 = null ;
  • var sens = 1;
  • var tabImg; // tab contenant les images
  • function prechargerImg(){
  • tabImg = new Array(nombre_image);
  • for (i=0; i<=nombre_image -1; i++){
  • tabImg[i]=new Image();
  • tabImg[i].src = prefix_image+(i+1)+suffix_image;
  • }
  • }
  • function init()
  • {
  • img1 = document.getElementById("defilement1") ;
  • img2 = document.getElementById("defilement2") ;
  • prechargerImg();
  • change_opacity();
  • }
  • function change_opacity()
  • {
  • var opacity1 = 0 ;
  • var opacity2 = 0 ;
  • if (isIE) // for IE
  • { opacity1 = parseFloat(img1.filters.alpha.opacity);
  • opacity2 = parseFloat(img2.filters.alpha.opacity);
  • }
  • else // for mozilla
  • { opacity1 = parseFloat(img1.style.MozOpacity);
  • opacity2 = parseFloat(img2.style.MozOpacity);
  • }
  • if (sens)
  • { if (isIE) // for IE
  • { img1.filters.alpha.opacity = opacity1 + coef * 100;
  • img2.filters.alpha.opacity = opacity2 - coef * 100;
  • }
  • else // for Mozilla
  • { img1.style.MozOpacity = opacity1 + coef;
  • img2.style.MozOpacity = opacity2 - coef;
  • }
  • }
  • else
  • {
  • if (isIE) // for IE
  • { img1.filters.alpha.opacity = opacity1 - coef * 100;
  • img2.filters.alpha.opacity = opacity2 + coef * 100;
  • }
  • else // for Mozilla
  • { img1.style.MozOpacity = opacity1 - coef;
  • img2.style.MozOpacity = opacity2 + coef;
  • }
  • }
  • if (isIE) // for IE
  • { opacity1 = parseFloat(img1.filters.alpha.opacity);
  • opacity2 = parseFloat(img2.filters.alpha.opacity);
  • }
  • else // for mozilla
  • { opacity1 = parseFloat(img1.style.MozOpacity);
  • opacity2 = parseFloat(img2.style.MozOpacity);
  • }
  • // on fait varié le sens d'opacité du bazar
  • if (opacity2 <= 0)
  • { img2.src=tabImg[indice++].src;
  • sens = 0;
  • if (indice == (tabImg.length)) indice=0;
  • window.setTimeout("change_opacity()",temps_pause) ; // attente
  • return 0;
  • }
  • else if (opacity1 <= 0)
  • { img1.src=tabImg[indice++].src;
  • sens = 1;
  • if (indice == (tabImg.length)) indice=0;
  • window.setTimeout("change_opacity()",temps_pause) ; // attente
  • return 0;
  • }
  • window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
  • }
  • -->
  • </SCRIPT>
  • </HEAD>
  • <!-- On charge le script et les images -->
  • <BODY onload="init();">
  • <!-- Premiere image id=defilement1 -->
  • <img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">
  • <!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
  • <img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;">
  • </BODY>
  • </HTML> 
<HTML>
<HEAD>
<TITLE>Fondu de plusieurs images</TITLE>

<!-- On déclare le code source -->
<SCRIPT LANGUAGE="JavaScript">
<!--

// mettre un minimum de 4 images !!!

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images

// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg;  // tab contenant les images

function prechargerImg(){
  tabImg = new Array(nombre_image);
  for (i=0; i<=nombre_image -1; i++){
	tabImg[i]=new Image();
	tabImg[i].src = prefix_image+(i+1)+suffix_image;
  }
}

function init()
{
	img1 = document.getElementById("defilement1") ;
	img2 = document.getElementById("defilement2") ;

	prechargerImg();
	change_opacity();
}

function change_opacity()
{	
	var opacity1 = 0 ;
	var opacity2 = 0 ;
	if (isIE)  // for IE
	{	opacity1 = parseFloat(img1.filters.alpha.opacity);
		opacity2 = parseFloat(img2.filters.alpha.opacity);
	}
	else       // for mozilla
	{	opacity1 = parseFloat(img1.style.MozOpacity);
		opacity2 = parseFloat(img2.style.MozOpacity);
	}

	if (sens)
	{	if (isIE)  // for IE
		{	img1.filters.alpha.opacity = opacity1 + coef * 100;
			img2.filters.alpha.opacity = opacity2 - coef * 100;
		}
		else // for Mozilla
		{	img1.style.MozOpacity = opacity1 + coef;
			img2.style.MozOpacity = opacity2 - coef;
		}
	}
	else
	{
		if (isIE)  // for IE
		{	img1.filters.alpha.opacity = opacity1 - coef * 100;
			img2.filters.alpha.opacity = opacity2 + coef * 100;
		}
		else // for Mozilla
		{	img1.style.MozOpacity = opacity1 - coef;
			img2.style.MozOpacity = opacity2 + coef;
		}
	}

	if (isIE)  // for IE
	{	opacity1 = parseFloat(img1.filters.alpha.opacity);
		opacity2 = parseFloat(img2.filters.alpha.opacity);
	}
	else       // for mozilla
	{	opacity1 = parseFloat(img1.style.MozOpacity);
		opacity2 = parseFloat(img2.style.MozOpacity);
	}

	// on fait varié le sens d'opacité du bazar
	if (opacity2  <= 0)
	{	img2.src=tabImg[indice++].src;
		sens = 0;
		if (indice == (tabImg.length)) indice=0;
		window.setTimeout("change_opacity()",temps_pause) ; // attente
		return 0;
	}
	else if (opacity1 <= 0)
	{	img1.src=tabImg[indice++].src;
		sens = 1;
		if (indice == (tabImg.length)) indice=0;
		window.setTimeout("change_opacity()",temps_pause) ; // attente
		return 0;
	}
	window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}
-->
</SCRIPT>
</HEAD>

<!-- On charge le script et les images -->
<BODY onload="init();">

<!-- Premiere image id=defilement1 -->
<img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">

<!-- Deuxieme image id=defilement2    /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
<img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;">

</BODY>
</HTML>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

17 janvier 2007 16:14:47 :
Demo mise en ligne
21 novembre 2008 18:58:27 :
Changement d'url de la démo

 Sources du même auteur

Source avec Zip Source avec une capture LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER
Source avec Zip Source avec une capture PLUGIN JQUERY : PROGRESS BAR
Source avec Zip Source avec une capture AUTO COMPLETION SUR CHAMPS TEXTE
Source avec Zip Source avec une capture SELECTION DE VALEURS A PARTIR DE 2 LISTES À CHOIX MUPLIPLES
Source avec Zip Source avec une capture EFFET DOCK MAC OS POUR VOS MENUS
Toutes les sources de ryosama

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture SCROLLBAR CLASS par heycraft
GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Source avec Zip L'EASTER-EGG DE MICROSOFT INTERNET EXPLORER (RENDU COMPATIBL... par grandvizir
Source avec Zip MATRIX EFFECT par nitro120

Commentaires et avis

Commentaire de stef1589 le 01/08/2006 10:15:23

merci c est ce que je cherchais. mais pourquoi faut mettre au moins 4 images ? ca pourrait pas marcher avec moins ?

Commentaire de ryosama le 01/08/2006 10:51:17

J'ai mis 4 images minimum car il y a un effet de bords lorsque l'on en met moins. Au premier passage les images ne "tournent" pas dans le bon sens, ca redevient ensuite normal. Avec 4 c'est nikel. C'est pas très grave mais je n'avais pas le courage de changer ça. Le site pour lequel j'ai developpé ce bout de code avait 5 images.

Commentaire de jjdagadir le 01/08/2006 22:34:01

C'est propre, simple et çà marche bien, merci et bravo
Kenavo

Commentaire de atiladiffusion le 05/09/2006 15:02:33

salu, votre script fais ce que je voulai graphiquement, par contre il me prend l'equivalent de deux images dans mon tableau, alors que j'aimerai n'en avoir qu'une...

Commentaire de ryosama le 05/09/2006 15:07:05

Je ne comprend pas votre commentaire :
"il me prend l'equivalent de deux images dans mon tableau, alors que j'aimerai n'en avoir qu'une"

Pouvez vous m'en dire plus ?

Commentaire de atiladiffusion le 05/09/2006 15:09:53

en fait, je voulez mettre cette fondue dans le header en remplacement d'un fichier flash.
J'ai créé 5 images avec different textes dessus.
Et j'ai fais un include du ce fichier dans le header.
et au lieu de prendre la place d'une image, la case fait la hauteur de deux. comment faire?

Commentaire de atiladiffusion le 05/09/2006 15:19:26

voila la page appelé dans le header ( les images font 800*80 )

  <HTML>
   <HEAD>
   <TITLE>Fondu de plusieurs images</TITLE>
    
   <!-- On déclare le code source -->
   <SCRIPT LANGUAGE="JavaScript">
   <!--
    
   // mettre un minimum de 4 images !!!
    
   var coef = 0.05 ; // avancement de l'opacité
   var temps = 50 ; // temps entre chaque changement d'opacité
   var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
   var nombre_image = 4 ; // nombre d'images a faire bouger
   var prefix_image = 'http://localhost/sites2006/peel/modeles/images2/test'; // chemin + prefix du nom des images
   var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
    
   // pas touche
   var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
   var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
   var img1 = null;
   var img2 = null ;
   var sens = 1;
   var tabImg; // tab contenant les images
    
   function prechargerImg(){
     tabImg = new Array(nombre_image);
     for (i=0; i<=nombre_image -1; i++){
       tabImg[i]=new Image();
       tabImg[i].src = prefix_image+(i+1)+suffix_image;
     }
   }
    
   function init()
   {
       img1 = document.getElementById("defilement1") ;
       img2 = document.getElementById("defilement2") ;
    
       prechargerImg();
       change_opacity();
   }
    
   function change_opacity()
   {    
       var opacity1 = 0 ;
     var opacity2 = 0 ;
     if (isIE) // for IE
     {    opacity1 = parseFloat(img1.filters.alpha.opacity);
         opacity2 = parseFloat(img2.filters.alpha.opacity);
     }
     else // for mozilla
     {    opacity1 = parseFloat(img1.style.MozOpacity);
         opacity2 = parseFloat(img2.style.MozOpacity);
     }
  
     if (sens)
     {    if (isIE) // for IE
         {    img1.filters.alpha.opacity = opacity1 + coef * 100;
             img2.filters.alpha.opacity = opacity2 - coef * 100;
         }
         else // for Mozilla
         {    img1.style.MozOpacity = opacity1 + coef;
             img2.style.MozOpacity = opacity2 - coef;
         }
     }
     else
     {
         if (isIE) // for IE
         {    img1.filters.alpha.opacity = opacity1 - coef * 100;
             img2.filters.alpha.opacity = opacity2 + coef * 100;
         }
         else // for Mozilla
         {    img1.style.MozOpacity = opacity1 - coef;
             img2.style.MozOpacity = opacity2 + coef;
         }
     }
  
     if (isIE) // for IE
     {    opacity1 = parseFloat(img1.filters.alpha.opacity);
        opacity2 = parseFloat(img2.filters.alpha.opacity);
     }
     else // for mozilla
     {    opacity1 = parseFloat(img1.style.MozOpacity);
         opacity2 = parseFloat(img2.style.MozOpacity);
     }
  
     // on fait varié le sens d'opacité du bazar
     if (opacity2 <= 0)
     {    img2.src=tabImg[indice++].src;
         sens = 0;
         if (indice == (tabImg.length)) indice=0;
         window.setTimeout("change_opacity()",temps_pause) ; // attente
         return 0;
     }
     else if (opacity1 <= 0)
     {    img1.src=tabImg[indice++].src;
         sens = 1;
         if (indice == (tabImg.length)) indice=0;
         window.setTimeout("change_opacity()",temps_pause) ; // attente
         return 0;
     }
     window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}
-->
</SCRIPT>
</HEAD>
  
<!-- On charge le script et les images -->
<BODY onLoad="init();">
  
<!-- Premiere image id=defilement1 -->
<img id="defilement1" src="http://localhost/sites2006/peel/modeles/images2/test1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);">
  
<!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
<img id="defilement2" src="http://localhost/sites2006/peel/modeles/images2/test2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-80px;">
  
</BODY>
</HTML>

Commentaire de ryosama le 05/09/2006 15:35:22

Ah je vois votre probleme. Vous avez un blanc sous le fondu de 80px de haut ?
Je n'ai pas réussi à palier ce problème. Le site pour lequel j'ai développé ce fondu n'avait rien sous le fondu donc pas de problème pour le blanc.

La technique pour pallier à ça serait de faire un div contenant tout le texte de votre page (car chez vous c'est un header apparement) et de lui donner le style suivant = position:relative;top:-80px;

Avec un peu de chance, ça devrait marcher.

Commentaire de atiladiffusion le 05/09/2006 15:38:59

je vais essayer des fondues de 40 px de haut pour remedier à ca, mais ca ne laisse pas bcp de place...
peut etre y a til un moyen de faire autrement sans utiliser de flash...


Justement ce ne serait pas possible de ne charger qu'une image au départ, de sorte que l'on puisse avoir tout sur la meme image, cela ne me fait rien d'avoir un temps de latence, il y aura un background derriere.

Commentaire de guinnessboy le 05/09/2006 22:28:38

Bonjour, un super script qui fonctionne (pas qui devrai fonctionner....) Par contre je rencontre effectivement le même souci que 'atiladiffusion'. si tu mets l'animation dans un tableau la colonne fais 2 fois la taille des images. Cela doit venir du positionnement du calque à la base (que l'on replace avec un - x px (x etant la hauteur de l'image) de cefait la hauteur d'un <TD> avec une image de 100 sera de 200. C'est le seul souci. Sinon c'est cool et joli avec des images bien détourées.
Une solution, pas propre (c'est mon habitude mais qui fonctionne). tu crée une page avec juste ton animation et tu la positionne ou tu veux dans ton tableau avec une balise <iframe>. De cette façon tu peux forcer la taille de ton cadre.
Je sais 'C'EST PAS BIEN' mais çà le fait.
Merci pour ce script, @+

Commentaire de guinnessboy le 08/11/2006 13:19:33

Hello, Un souci de fonctionnement sous opéra. Sous tous les autres navigateurs cela fonctionne mais je viens de tester sous opera et l'animation ne se déclenche pas.

Commentaire de ryosama le 08/11/2006 15:04:11

En effet ce script n'a jamais été tester sous Opera car je ne l'ai pas.
Comme précisé dans le descriptif :
- Il est compatible IE et Mozilla

Commentaire de atiladiffusion le 08/11/2006 18:09:05

Il est aussi compatible safari sur mac

Commentaire de atiladiffusion le 08/11/2006 18:09:54

voir sur mon avant dernier post--> code amélioré pour compatibilité safari en plus!

Commentaire de Fix300 le 17/12/2006 22:12:16

Super effet. Moi aussi j'ai le même problème, il prend 2 fois la taille de l'image. J'ai essayé l'iFrame mais ... il ne prend pas du tout. Il charge 2 photos et puis il y a des espaces blancs entre, sur pc apparement ça passe avec les blancs, sur mac ça boucle sur la même image. Pourtant quand j'ouvre l'iFrame, aucun problème tout fonctionne. Si par hasard vous auriez entre temps trouver une solution... Merci

Commentaire de Wedgis le 12/01/2007 19:01:08

Très joli effet :D, par contre j'aimerais l'utiliser autrement, en faite au lieu de changer d'image automatiquement j'aimerais le faire avec 2 boutons (avnt;arrière), je sais à quel endroit le modifier mais par contre je ne sais pas comment exactement... Une âme charitable pourait elle m'aider ?
Merci

Commentaire de funewik le 16/01/2007 17:58:02

Salut,

Merci beaucoup pour cette source qui fonctionne très bien. En ce qui me concerne je l'ai modifiée, parce que j'avais besoin de faire des fondus sur des div avec textes et des images à l'intérieur, ce que j'ai très bien réussi... pour IE et FF.

Mon problème est que ça ne fonctionne pas sur Mac avec Safari. Quelle est la syntaxe pour l'opacité sur Safari?

Atiladiffusion, tu dis avoir réussi à le faire fonctionner sur Safari, peux-tu m'aider stp?

Merci d'avance!

Bye!

Commentaire de blueangel le 25/07/2007 12:01:33

Bonjour,
Trés beau script avec un bel effet, j'ai un petit souci j'ai les 2 images dans un UserControl elles ont une taille 559*323 quand je place ce control dans une table les 2 image sont supperposé mais il y a un espace blanc qui la taille de l'image en dessous.
comment fais t pour supprimer ce blanc?
Merci!!

Commentaire de ryosama le 25/07/2007 16:21:05

Je suis au courant du problème mais je n'ai pas la solution. Sur le site pour lequel j'avais developpé ce petit bout de code ce n'était pas génant donc je ne m'y étais pas penché plus que ça.

La solution de fortune est de remonter tout ce qui se trouve sous l'effet ... pas très propre mais ça marche.

Commentaire de blueangel le 25/07/2007 16:38:22

ok merci je crois que je vais faire ça;)

Commentaire de Mamacx le 29/09/2007 23:46:10

Bonjour.
Ce script est exactement ce que je cherche pour mon site que je dévelope avec "Cool Page".
Le problème est que je suis archi débutant et je ne comprends pas ou et comment je peux "insérer" mes photos dans ce script.
Pouvez-vous SVP m'aider car j'aimerais tellement utiliser ce script...
Merci d'avance.
Mamacx

Commentaire de jpcreation le 10/02/2008 12:47:53

Bonjour,

je trouve ce script très bien mais vous parait-il possible de l'adapter pour lire des dossiers remplis dynamiquement (si je ne suis pas clair, je voudrais qu'il lise le contenu d'un dossier et non une liste d'image pour laquelle je mets des noms précis).

C'est peut être simple mais je suis nul en javascript.

JPCREATION

PS : Salut Atila, le monde du développement est décidément très petit !!!

Commentaire de atiladiffusion le 10/02/2008 13:17:56

En effet JPCREATION...

pour ton soucis, tu dois le gerer en php et générer la liste de images de maniere dynamique dans une parties cript javascript de ta page.. tu n'a qu'à faire une boucle sur le contenu de ton dossier. Pour cela renseigne toi sur la lecture et le parcour de dossier en php.

Bonne chance à toi.

Commentaire de Ma4xime le 15/03/2008 16:07:42

J'ai un probléme, j'arrive à télécharger le Logiciel, à l'ouvrir dans WinRar, mais pas à Ouvrir ce Logiciel ... Rep

Commentaire de denmann67 le 24/10/2008 20:13:38

Bonjour.
Ce script est exactement ce que je cherche pour mon site que je dévelope avec "Wysiwyg Web Builder".
Le problème est que je suis débutant et je ne comprends pas comment je peux l'inserer dans mon site et comment je peux "insérer" mes photos dans ce script.
Pouvez-vous SVP m'aider car j'aimerais tellement utiliser ce script...
Merci d'avance.

Denis

Commentaire de bender6283 le 26/12/2008 02:09:08

Bonjour,

j'ai malgré quelques soucis réussi à obtenir un résultat satisfaisant
http://www.all-out.fr

Commentaire de altazor le 09/02/2009 03:20:12

bonsoir, merci beaucoup pour se script !
J'aurais aimer savoir si quelqu'un avais eu des problème sous IE, sous FF sa marche niquel mais sous IE en plus que la hauteur est de 2foi l'img (normale avec les 2 balise img :/) je ne voie aucun défilement d'image. Voici le forum : http://www.rcfr.c.la
On voi bien que le script bloque au bout d'une ou deux secondes sous ie.
Si quelqu'un à une solution je suis prenneur.

merci beaucoup !

Commentaire de cPalabait le 02/03/2009 13:52:04

Bonjour.
Effectivement, ce code est simple à mettre en place, et efficace pour de petites images.
Il ne semble pas adapté aux larges images : lorsque l'image est trop large, seules les 2 premières tournent en boucle.
Il semble avoir de mystérieuses difficultés à fonctionner avec IE7 qui reste scothé sur une image, alors qu'elles s'enchainent bien avec FF ... sauf à ce que quelqu'un m'en explique la solution.

Félicitations et encouragements néanmoins.

Commentaire de toga222 le 02/06/2009 15:27:35

bonjour,
je voulais changer le positionnement du fondu,
le mettre en bas de la page et au centre en même temps, Est ce que vous pouvez m'aider?
merci d'avance

Commentaire de cPalabait le 02/06/2009 23:01:41

Bonsoir,
Vous y parviendrez -je pense- en créant une boite d'une largeur double de votre image, et en la positionnant en absolu.
Cdt

Commentaire de toga222 le 04/06/2009 12:02:07

bonjour,
j'ai un petit souci:
quand je change le résolution d'écran,ça déforme la largeur et la hauteur donc toute la page,
aurez vous des solution?
merci d'avance.

Commentaire de jcrum34 le 16/07/2009 17:31:57

Bonjour à tous,
J'ai des petits soucis d'éxecution de ce script :

Pas de soucis sous IE8 mais sur Mozilla 3.5 rien à faire cela ne marche pas ...

Dream dit : Unsupported property: -moz-opacity

Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Opera 8.0, 9.0; Safari 2.0

Voila si quelqu'un a une solution !!!

Merci bcp !!

Commentaire de ryosama le 16/07/2009 17:35:48

la propriété -moz-opacity a été supprimé de Firefox 3.5 pour etre remplacée par la propriété CSS opacity.
Il suffit de remplacer "-moz-opacity" par "opacity". Par contre il ne sera plus compatible avec les prcédentes version de Firefox.

Commentaire de jcrum34 le 17/07/2009 09:52:55

Merci ryosama, je vais voir se que je peu faire mais pour le moment on va laisser tout comme ca lol...

Commentaire de tina13 le 14/11/2009 14:58:47

Bonjour à tous,

tout d'abord un grand BRAVO et MERCI à ryosama, ce script me plaît beaucoup: pas trop lourd et fonctionnel.
J'ai aussi rencontré le problème du "blanc" dessous: cela vient du fait que le navigateur additionne la taille des 2 images et génère une place équivalente. Manifestement, il ne comprend pas que le fait de les superposer gagne de la place ;-). Pour remédier à cela, il suffit de donner à la seconde image une marge négative (...margin-left:-545px;...) plus ou moins équivalente à sa largeur. Du coup, en appliquant ce principe, on n'aurait même plus besoin de positionner les images, suffit de jouer avec les marges.

J'ignore si c'est très "propre" mais ça fonctionne. Evidemment, comme toujours, les marges ne sont pas exactement les mêmes sous IE et Firefox.

Pour Opera, j'ai le même souci que vous tous; ça ne "tourne pas".

Encore merci et dans l'attente d'une soluce...

Commentaire de meluesine le 02/12/2009 12:08:52 9/10

Bonjour,

En utilisant l'astuce de Tina13, j'arrivais à un bon résultat sur FF mais pas sur IE6, du coup j'ai combiné avec un float:right; affecté aux deux images et chez moi ça a l'air de marcher mais j'ai pas testé avec tous les navigateurs.

Commentaire de moughlee le 08/12/2009 11:05:51 7/10

slt à tous et merci pour le scrip.
Malheureusement je n'arrive pas à le faire le faire fonctionner. il n'ya pas de défilement:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <title>Desmotscrasseux</title>
<link rel="stylesheet" type="text/css" href="design/design.css" />


<script LANGUAGE="JavaScript">// mettre un minimum de 4 images !!!

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images

// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg;  // tab contenant les images

function prechargerImg(){
  tabImg = new Array(nombre_image);
  for (i=0; i<=nombre_image -1; i++){
tabImg[i]=new Image();
tabImg[i].src = prefix_image+(i+1)+suffix_image;
  }
}

function init()
{
img1 = document.getElementById("defilement1") ;
img2 = document.getElementById("defilement2") ;

prechargerImg();
change_opacity();
}

function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE)  // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else       // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}

if (sens)
{ if (isIE)  // for IE
{ img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
else
{
if (isIE)  // for IE
{ img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}

if (isIE)  // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else       // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}

// on fait varié le sens d'opacité du bazar
if (opacity2  <= 0)
{ img2.src=tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
else if (opacity1 <= 0)
{ img1.src=tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
//window.status = "opa1 : " + img1.style.MozOpacity + "  opa2 : " + img2.style.MozOpacity + "   indice : "+indice;
window.setTimeout("change_opacity()",temps) ; // recursion toutes les 30 millisec
}
</script>

</head>
  
     <body OnLoad="init;()">

<div class="news_image">
  
<!-- Premiere image id=defilement1 -->
<img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">

<!-- Deuxieme image id=defilement2    /!\ positionnée RELATIVEMENT par rapport à la 1ère /!\ -->
<img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;">
</div>

</body>

et le CSS


.news_image
{
   float: right;
     margin-top: 40px;
     width: 320px;
   height: 230px;
   background-color: none;
border-bottom: 2px dashed grey;

}


voila ce que çà donne :
http://www.desmotscrasseux.lautre.net/

merci de m'aider a+

Commentaire de moughlee le 08/12/2009 11:14:04

Ou même simplement quand je télécharge le zip et je décompresse, je remplace vos images par les miennes et lance le sript, il y a un décalage.

voire ici :
http://www.desmotscrasseux.lautre.net/dia/index

Commentaire de meluesine le 08/12/2009 15:41:59

Avec FF3.0.5 ça marchait. Je viens de passer à 3.5.5... ben ça marche plus grrrrr

Commentaire de ryosama le 09/12/2009 08:38:36

lire les commentaires avant. ce problème a déjà été évoqué.

Commentaire de meluesine le 09/12/2009 10:02:27

Oui, j'ai réussi à débugguer en suivant les conseils de Bul3 sur le forum et voici ce qui dans mon cas semble fonctionner impec:
<img id="defilement1" src="images/intro/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);-khtml-opacity:0;opacity:0;position:relative;float:right;margin-left:-284px;">
<img id="defilement2" src="images/intro/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);-khtml-opacity:1;opacity:1;position:relative;float:right;margin-left:-284px;">

En passant merci pour ce code dont le résultat est vraiment sympa :)

Commentaire de hupjea le 17/02/2010 11:40:39

J'ai pê loupé quelque chose, mais ça ne semble pas fonctionner pas avec des GIF transparents

Commentaire de jfhartmann le 09/04/2010 05:00:37

J'ai remplacé mozOpacity par opacity dans le script js et -moz-opacity par opacity dans le style="...." des deux images. Cela fonctionne avec Firefox 3.6

Commentaire de jfhartmann le 09/04/2010 05:39:50

Pour que le script fonctionne aussi sous Mozilla 4 et -, j'ai ajouté un test sur le navigateur. Cela allonge un peu le script mais ça fonctionne sous IE, Mozilla 5, et Chrome. Je n'ai plus de Mozilla 4 à ma disposition et n'ai pu le tester.
(remarque les deux variables prefix et suffix_image sont celles de mon test)
<HTML>
    <HEAD>
    <TITLE>Fondu de plusieurs images</TITLE>
    
    <!-- On déclare le code source -->
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    
    // mettre un minimum de 4 images !!!
    
    var coef = 0.05 ; // avancement de l'opacité
    var temps = 50 ; // temps entre chaque changement d'opacité
    var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
    var nombre_image = 5 ; // nombre d'images a faire bouger
    var prefix_image = 'images/fondu/'; // chemin + prefix du nom des images
    var suffix_image = '.gif' ; // suffix + '.extension' du nom des images
    
    // pas touche
    var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
    var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var isMozilla5 = navigator.userAgent.toLowerCase().indexOf('mozilla/5')!=-1 ;  // modif pour Mozilla 5.0
//var isIE = true;
    var img1 = null;
    var img2 = null ;
    var sens = 1;
    var tabImg; // tab contenant les images
    
    function prechargerImg(){
    tabImg = new Array(nombre_image);
    for (i=0; i<=nombre_image -1; i++){
    tabImg[i]=new Image();
    tabImg[i].src = prefix_image+(i+1)+suffix_image;
    }
    }
    
    function init()
    {
    img1 = document.getElementById("defilement1") ;
    img2 = document.getElementById("defilement2") ;
    alert (navigator.userAgent);
    prechargerImg();
    change_opacity();
    }
    
    function change_opacity()
    {
    var opacity1 = 0 ;
    var opacity2 = 0 ;
    if (isIE) // for IE
    { opacity1 = parseFloat(img1.filters.alpha.opacity);
    opacity2 = parseFloat(img2.filters.alpha.opacity);
    }
     else // for mozilla
{ if (isMozilla5) //  ===========================  Mozilla 5
{opacity1 = parseFloat(img1.style.opacity);
opacity2 = parseFloat(img2.style.opacity);
}
else // for mozilla 4 et -
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
}
    if (sens)
    { if (isIE) // for IE
    { img1.filters.alpha.opacity = opacity1 + coef *100;
    img2.filters.alpha.opacity = opacity2 - coef *100;
    }
    else // for Mozilla
{ if (isMozilla5) //  ===========================  Mozilla 5
{ img1.style.opacity =  opacity1 + coef;
img2.style.opacity = opacity2 - coef;
}
    else // for Mozilla 4 et -
{ img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
    }
    else
    {
    if (isIE) // for IE
    { img1.filters.alpha.opacity = opacity1 - coef* 100;
    img2.filters.alpha.opacity = opacity2 + coef *100;
    }
    else // for Mozilla
{ if (isMozilla5) //  ===========================  Mozilla 5
{img1.style.opacity = opacity1 - coef;
img2.style.opacity = opacity2 + coef;
}
else // for Mozilla 4 et -
{ img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}
}
    
    if (isIE) // for IE
    { opacity1 = parseFloat(img1.filters.alpha.opacity);
    opacity2 = parseFloat(img2.filters.alpha.opacity);
    }
     else // for mozilla
{ if (isMozilla5) //  ===========================  Mozilla 5
{ opacity1 = parseFloat(img1.style.opacity);
opacity2 = parseFloat(img2.style.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
}
    // on fait varié le sens d'opacité du bazar
    if (opacity2 <= 0)
    { img2.src=tabImg[indice++].src;
    sens = 0;
    if (indice == (tabImg.length)) indice=0;
    window.setTimeout("change_opacity()",temps_pause) ; // attente
    return 0;
    }
    else if (opacity1 <= 0)
    { img1.src=tabImg[indice++].src;
    sens = 1;
    if (indice == (tabImg.length)) indice=0;
    window.setTimeout("change_opacity()",temps_pause) ; // attente
    return 0;
    }
    window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
    }
    -->
    </SCRIPT>
    </HEAD>
    
    <!-- On charge le script et les images -->
    <BODY onload="init();">
    
    <!-- Premiere image id=defilement1 -->
    <img id="defilement1" src="images/fondu/1.gif" style="-moz-opacity:0;opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">
    
    <!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
    <img id="defilement2" src="images/fondu/2.gif" style="-moz-opacity:1;opacity:1;filter:alpha(opacity=100);position:relative;top:-100px;left:-44px;">
    
</BODY>
</HTML>


Commentaire de frederik83 le 14/06/2010 08:35:40

bonjour

je vois bien ou on met l'url des 2 images (a la fin du script) mais comme il faut au moins 4 photos (a quel endroit du script faut il inserer les autres photos)?

merci de votre aide

Commentaire de ryosama le 14/06/2010 09:56:18

En haut du script : var nombre_image = ...
Le noms des images doivent juste respecter une certaine logique.

Commentaire de frederik83 le 14/06/2010 10:13:51

ah merci de votre rapidité

si j'ai bien compris apres  var nombre_image = on met l'url de la photo c'est bien ca?
mais comment fait on pour en mettre plusieurs?

désolé je suis un peu perdu

sur mon blog j'ai fait un defilement de photos ca marche bien mais ce serait plus joli en fondu enchainé

merci encore

Commentaire de ryosama le 14/06/2010 10:22:34

L'url des photo est déterminé par
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
var nombre_image = 5 ; // nombre d'images a faire bouger

Dans cette exemple les url des photos sont :
gfx/1.jpg
gfx/2.jpg
gfx/3.jpg
gfx/4.jpg
gfx/5.jpg

Commentaire de drdiablo36 le 11/08/2010 16:31:26

Bonjour,
j'ai un petit problème. Au lieu de faire un jolie fondu il affiche les deux première images superposée...

Voila le code de ma page(seulement les parties intéressantes):

<script type="text/javascript">
<!--
// mettre un minimum de 4 images !!!
var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 16 ; // nombre d'images a faire bouger
var prefix_image = 'diaporama/visuel'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg; // tab contenant les images




function prechargerImg(){
tabImg = new Array(nombre_image);
for (i=0; i<=nombre_image -1; i++){
tabImg[i]=new Image();
tabImg[i].src = prefix_image+(i+1)+suffix_image;

}
}
function init()
{
img1 = document.getElementById("image1") ;
img2 = document.getElementById("image1_2") ;
prechargerImg();
change_opacity();
}
function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.opacity);
opacity2 = parseFloat(img2.style.opacity);
}
if (sens)
{ if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else // for Mozilla
{ img1.style.opacity = opacity1 + coef;
img2.style.opacity = opacity2 - coef;
}
}
else
{
if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else // for Mozilla
{ img1.style.opacity = opacity1 - coef;
img2.style.opacity = opacity2 + coef;
}
}
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.opacity);
opacity2 = parseFloat(img2.style.opacity);
}
// on fait varié le sens d'opacité du bazar
if (opacity2 <= 0)
{ img2.src=tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
else if (opacity1 <= 0)
{ img1.src=tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}
//-->
</script>

et dans le body

<div id="images_accueil">

<a href="" id="image1_BIG" title="Cliquez pour agrandir" onClick=""><img id="image1" src="diaporama/visuel1.jpg" style="style="opacity:1;filter:alpha(opacity=100);position:relative;"></a>
<a href="" id="image1_BIG" title="Cliquez pour agrandir" onClick=""><img id="image1_2" src="diaporama/visuel2.jpg" style="opacity:1;filter:alpha(opacity=100);position:relative; top:-300px"> </a>

</div>

Voila pouvez-vous m'aider?

Merci beaucoup

Commentaire de jfhartmann le 12/08/2010 18:49:07

Il y a une erreur dans led div sur la première image :
style="sytle=

<a href="" id="image1_BIG" title="Cliquez pour agrandir" onClick=""><img id="image1" src="diaporama/visuel1.jpg" style="style="opacity:1;filter:alpha(opacity=100);position:relative;"></a>

au lieu de :

<a href="" id="image1_BIG" title="Cliquez pour agrandir" onClick=""><img id="image1" src="diaporama/visuel1.jpg" style="opacity:1;filter:alpha(opacity=100);position:relative;"></a>

Commentaire de drdiablo36 le 12/08/2010 19:39:24

Merci beaucoup :)
regardez ce beau résultat !!
www.dotacoustics.com

Commentaire de jfhartmann le 13/08/2010 07:17:00

L'effet est excellent. Pour être parfait, il faudrait que les images aient la même taille ou les mêmes proportions hauteur / largeur.

Commentaire de jfhartmann le 13/08/2010 07:19:20

Et aussi programmer le retour à la normale après l'agrandissement (sur click ou dbleclick )

Commentaire de drdiablo36 le 13/08/2010 11:01:31

Merci :)
Oui je sais les ne sont jamais de la memetaille a cause du fait qu'elles sont prises avec des appareils photos différents.
Que veux tu dire par retour a la normale?

Commentaire de jfhartmann le 15/08/2010 07:34:50

Revenir à l'affichage des images en fondu enchaîné. cela peut se faire en revenant à l'affichage précédant par exemple ou en réaffichant la page d'index

Commentaire de drdiablo36 le 15/08/2010 11:30:09

le problème si je ré affiche index.html le fondu enchainé recommence du début...
Pourrais tu me donner un exemple car je ne comprend pas bien

Commentaire de jfhartmann le 15/08/2010 19:35:42

Un exemple  ?
Va sur le site www.saint-avertin-sports.com.
Dans la deuxième colonne, en bas il y a la photo de M. C. FILOU.
Quand tu cliques dessus, la photo est agrandie, et tu peux refermer la fenêtre pour revenir à la page d'accueil.

Commentaire de drdiablo36 le 15/08/2010 20:19:07

Je ne vois pas de photos sur laquelle je peux cliquer et qui s'agrandit...

Commentaire de jfhartmann le 16/08/2010 13:01:41

Exact. Je l'ai archivé il y a deux jours.
Descend sur le menu déroulant "archives".
Sur "classés par mois", choisis 'juin 2010'
Tu retrouveras la photo dont je t'ai parlé ainsi que 4 affiches que l'on peut aggrandir.
Voilà la fonction javascript utilisée :
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
Voilà le HTML :
<a href="#" onclick="MM_openBrWindow('images/mcfillou.jpg','','width=518,height=735')">
<img src="images/mcfillou.jpg"  style="border:none;" alt="photo" title="photo" width="100"/></a>

Commentaire de drdiablo36 le 16/08/2010 20:48:14

Sans vouloir te critiquer je ne  vois pas le rapport avec le "retour a l'affichage" dont tu me parle
L'image s'ouvre dans une nouvelle fenêtre mais c'est tout...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

effet de fondu [ par seb019 ] Bonjour,Voila sur un site j'ai vu un truc qui me plait, je pense que c'est du javascript mais je suis pas sur :lorsqu'on clic sur un lien la page s'ou Bandeau transparent avec défilement horizontal [ par dandrezy ] Bonjour,Je développe un site et je dois y inclure un bandeau transparent avec défilement horizontal tel que sur le bas de cette page http://koaci.comJ menu déroulant avec effet de fondu [ par jeanMOULIN54 ] Bonjour à tous :)Voilà tout est dans le titre, j'aimerai que vous m'aidiez à réaliser le même effet que sur ce site web : http://www.magicmanu.com/ ( Vitesse de défilement d'une page [ par loicseg ] Bonjour à tous et bonne année !J'ai besoin de votre aide pour réaliser un petit effet sur une page.Explication :Pour le moment je dispose d'un script Javascript qui suit le défilement d'une fenêtre [ par moratonga ] Bonjour,je suis l'animatrice d'un forum de collectionneurs qui va bientôt fêter ses 4 ans.Pour l'événement, j'aimerais intégrer un javascript qui anim défilement d'une image [ par fifirosa ] bonsoir tout le monde;j'ai commencé à créer un site, et je suis débutante et j'aimerais inserer une image à condition qu'elle suit le défilement de la Problème avec lightbox et flash [ par younes777 ] Bonjour,je viens d'inserer sur mon site l'effet lightbox, comme expliqué sur :http://www.javascriptkit.com/script/script2/backbox/mon problème c que l défilement du fond [ par kinooo ] J'ai récupérer un script pr le défilement du fond. Est ce que qq'un serait ce qui ne va pas car je ne voit pas ou auraut un autre script.SCRIPT:&lt;ht


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Green Energy Solutions With Light Bulb Morphed Into LandscapePhoto Renewable Energy is Within Reach
Photo Happy Bright Spring Day Outside 

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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,866 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)