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 04 14:26:27
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 !

FONDU ENCHAINER ENTRE PLUSIEURS IMAGES


Information sur la source

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é: 25 078 / 3 203
Auteur : ryosama Ecrire un message privé
Note :
8,5 / 10 - par 4 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

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

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

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

Commentaires et avis

signaler à un administrateur
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 ?

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de jjdagadir le 01/08/2006 22:34:01

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

signaler à un administrateur
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...

signaler à un administrateur
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 ?

signaler à un administrateur
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?

signaler à un administrateur
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>

signaler à un administrateur
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.

signaler à un administrateur
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.

signaler à un administrateur
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, @+

signaler à un administrateur
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.

signaler à un administrateur
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

signaler à un administrateur
Commentaire de atiladiffusion le 08/11/2006 18:09:05

Il est aussi compatible safari sur mac

signaler à un administrateur
Commentaire de atiladiffusion le 08/11/2006 18:09:54

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

signaler à un administrateur
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

signaler à un administrateur
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

signaler à un administrateur
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!

signaler à un administrateur
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!!

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de blueangel le 25/07/2007 16:38:22

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

signaler à un administrateur
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

signaler à un administrateur
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 !!!

signaler à un administrateur
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.

signaler à un administrateur
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

signaler à un administrateur
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

signaler à un administrateur
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

signaler à un administrateur
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 !

signaler à un administrateur
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.

signaler à un administrateur
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

signaler à un administrateur
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

signaler à un administrateur
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.

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:&lt;ht


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


ARCHOS 5 (120 Go)
Entre 327€ et 360€


Visiter le guide achat

Photothèque Nouveau !

Photo alphabet langue des sourdsPhoto pretty girls
Photo femme, plage, bien être, soleil, vacances, été, détente, reposPhoto french manucure action !

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,437 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é.