CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 21 06:49:07

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Effets

> FONDU ENCHAINER ENTRE PLUSIEURS IMAGES

FONDU ENCHAINER ENTRE PLUSIEURS IMAGES

Information sur la source

Note :

8,33 / 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é :29 616 / 3 565

Auteur : ryosama

Ecrire un message privé

Commentaire sur cette source (42)

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>
<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>
<BODY onload="init();">
<img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">
<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 !

fondu.js 2 860 octets
index.html 695 octets
gfx
- 1.jpg 8 520 octets
- 2.jpg 4 098 octets
- 3.jpg 4 596 octets
- 4.jpg 3 846 octets
- 5.jpg 5 053 octets

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

AUTO COMPLETION SUR CHAMPS TEXTE

SELECTION DE VALEURS A PARTIR DE 2 LISTES À CHOIX MUPLIPLES

EFFET DOCK MAC OS POUR VOS MENUS

Toutes les sources de ryosama

Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

DIAPO MULTIPLES EN FONDU par kazma

DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E... par abdelaziz_info

L'EASTER-EGG DE MICROSOFT INTERNET EXPLORER (RENDU COMPATIBL... par grandvizir

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>

   
   <SCRIPT LANGUAGE="JavaScript">
   
</SCRIPT>
</HEAD>


<BODY onLoad="init();">


<img id="defilement1" src="http://localhost/sites2006/peel/modeles/images2/test1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);">


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


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


<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

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 différents effets sur les liens d'une meme page [ par geoffroy ] Salut, J'aimerais savoir comment fait on pour qu'un lien devienne plus gros au survolage de la souris . Mais j'aimerais que cet effet ne marche que su 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:<ht

Nos sponsors

Derniers Blogs

NOUVEAU SYSTèME D'AIDE POUR VISUAL STUDIO 2010 : POUR CEUX QUI N'APPRéCIENT PAS TROP L'ABSENCE D'INDEX... par coq

L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit

COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL

SQL SERVER : QUERY NOTIFICATION OU COMMENT êTRE NOTIFIé DE MODIFICATIONS DE DONNéES CôTé APPLICATION (SQLDEPENDENCY) par christian

[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson

Forum

SUPPRESSION BANDEAU LECTEUR VIDEO par philou8

RE : PRELOAD IMAGES ET SWF D'UN SITE ENTIER par pegase31

PRELOAD IMAGES ET SWF D'UN SITE ENTIER par Zedbar1

RE : FERMER LA PAGE par PetoleTeam

RE : LECTEUR VIDEO FLASH + JAVASCRIPT par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods