Effet de fondu-enchaîné [Résolu]

Dans le fonds... Bonjour !

Pour la forme : Quelqu'un aurait-il une piste ou idée relativement à la réalisation d'un effet de fondu-enchaîné entre deux images ?

- Pas en flash... pour toutes les raisons fréquemment évoquées sur ce forum...
- Sans images itermédiaires pré-préparées genre gifanimé, parce que pour cela... je poserais la question sur le forum du Gimp...
- et pas usine-à-gaz, parce que ça... c'est ma spécialité...
Modifié par aCOSwt (29 Mar 2007 - 09:19)

Salut,

Il y a bien un truc a base d'opacity mais c'est un peu usine à gaz! du genre 10 affichages avec opacity (croissant ou decroissant) de ton image.

Merci ghost !

Avec un pseudo comme le tien, il était normal que tu t'y connaisses dans les effets de ce genre...

C'est très exactement ce que je cherche. Je ne connaissais pas et ce n'est pas trop usine à gaz en soi.
Ce qui ne va pas m'empêcher d'en faire une avec...

Pour ceux que cela intéresse, j'ai trouvé un petit topo ici : http://www.quirksmode.org/js/opacity.html

Merci encore.

Bonjour,
il y a également une piste sur le site de Stu Nicholls
cordialement nicolas
Modifié par vacarme (29 Mar 2007 - 09:34)

Pareil chez clagnut

Sauf que STU NICHOLLS c'est 100% CSS (mais usine à gaz)

aCOSwt a écrit :
- Pas en flash... pour toutes les raisons fréquemment évoquées sur ce forum...

... comme?

Benjamin D.C. a écrit :
... comme?

aïe aïe aïe !!!
Une interro écrite !
Fallait bien qu'elle tombe...

Heu... j'oserais bien... accessibilité réduite... pour les résumer toutes en une seule factuelle, objective et politiquement correcte.

J'ai bon ?

Pour l'affectif inobjectif : Et pi d'abord que cette &@][[ de [(@#) de truc ne marche pas sur ma conf !

Vivement GNASH !
Modifié par aCOSwt (29 Mar 2007 - 17:51)

FlorentG a écrit :
Pareil chez clagnut

Bonjour,

J'aimerais utiliser ce script pour le chargement de plusieurs images sans avoir à leur donner un identifiant, mais en les ciblant par exemple par un #galerie img.

J'ai trouvé une fonction qui semble permettre l'utilisation d'un tel ciblage mais je n'arrive pas à l'utiliser avec le script de chargement d'images de clagnut qui se base par défaut sur les identifiants d'images. Si quelqu'un a une petite idée, ça serait vraiment chouette.

Cordialement,
Benjamin

Benjamin D.C. a écrit :

Bonjour,

J'aimerais utiliser ce script pour le chargement de plusieurs images sans avoir à leur donner un identifiant, mais en les ciblant par exemple par un #galerie img.

J'ai trouvé une fonction qui semble permettre l'utilisation d'un tel ciblage mais je n'arrive pas à l'utiliser avec le script de chargement d'images de clagnut qui se base par défaut sur les identifiants d'images. Si quelqu'un a une petite idée, ça serait vraiment chouette.

Cordialement,
Benjamin

Salut,
Je ne l'ai pas tester mais ce code devrais fonctionner :

window.onload = function() {initImage(getElementsBySelector('#galerie img')[0];)}

function initImage(image) {
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(image,0);
}
function fadeIn(obj,opacity) {
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      window.setTimeout( function() {
            fadeIn(obj,opacity);
      },100);
    }
}

sans oublier la fonction qui se trouve sur wikistuce evidement.

++
iDo

Bonjour,

iDo a écrit :
Salut,
Je ne l'ai pas tester mais ce code devrais fonctionner :

window.onload = function() {initImage(getElementsBySelector('#galerie img')[0];)}

function initImage(image) {
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(image,0);
}
function fadeIn(obj,opacity) {
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      window.setTimeout( function() {
            fadeIn(obj,opacity);
      },100);
    }
}

sans oublier la fonction qui se trouve sur wikistuce evidement.

++
iDo

J'ai testé ce code mais cela ne fonctionne malheureusement pas. Voici le code complet utilisé:

[b][#black]HTML[/#][/b]

<ul>
	
<li><a href="#"><img src="img/image.png" alt="Mon image" /></a></li>
<li><a href="#"><img src="img/image.png" alt="Mon image" /></a></li>
<li><a href="#"><img src="img/image.png" alt="Mon image" /></a></li>
	
</ul>


[b][#black]JS[/#][/b]

window.onload = function() {initImage(getElementsBySelector('a img')[0];)}


function getElementsBySelector(selector){
//Extracted from nifty.js
	var i,selid="",selclass="",tag=selector,f,s=[],objlist=[];
	if(selector.indexOf(" ")>0){  //descendant selector like "tag#id tag"
		s=selector.split(" ");
		var fs=s[0].split("#");
		if(fs.length==1) return(objlist);
		f=document.getElementById(fs[1]);
		if(f) return(f.getElementsByTagName(s[1]));
		return(objlist);
	}
	if(selector.indexOf("#")>0){ //id selector like "tag#id"
		s=selector.split("#");
		tag=s[0];
		selid=s[1];
    }
	if(selid!=""){
		f=document.getElementById(selid);
		if(f) objlist.push(f);
		return(objlist);
    }
	if(selector.indexOf(".")>0){  //class selector like "tag.class"
		s=selector.split(".");
		tag=s[0];
		selclass=s[1];
    }
	var v=document.getElementsByTagName(tag);  // tag selector like "tag"
	if(selclass=="")
		return(v);
	for(i=0;i<v.length;i++){
		if(v ii.className.indexOf(selclass)>=0)
			objlist.push(v ii);
    }
	return(objlist);
}



function initImage(image) {

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(image,0);

}

function fadeIn(obj,opacity) {

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout( function() {

            fadeIn(obj,opacity);

      },100);

    }

}

Une idée?

oui, plus qu'une idée.
Tu a mal saisie comment fonctionnais getElementsBySelector,
je t'en ai refait une spéciale pour ta syntaxe.
et tu as oublié d'inclure la fonction setOpacity du script de fade...

Tu devrais utliser des outils comme firebug (www.getfirebug.com) pour t'aider a debugguer tes scripts.

window.onload = function() {
	var im=getElementsBySelector('a img');
	for(k=0;k<im.length;k++)
		initImage(im[k]);
}
function getElementsBySelector(selector){
	selector=selector.split(" ");
	var a=document.getElementsByTagName(selector[0]);
	var r=[];
	for (var i=0;i<a.length;i++) {
		var b= a[i].getElementsByTagName(selector[1]);
		for (var j=0;j<b.length;j++) {
			r.push(b[j]);
		}
	}
	return r;
}
function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

function initImage(image) {
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(image,0);
}



function fadeIn(obj,opacity) {
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      window.setTimeout( function() {
            fadeIn(obj,opacity);
      },100);
    }
}

[/i]

Attention aux « [ i ] » (sans les espaces) dans le code Javascript, ça donne des italiques sur le forum.

ha ouais !
et ne plus ça fait foirée le code...

voila comme ça c'est mieux :

window.onload = function() {

	var im=getElementsBySelector('a img');

	for(k=0;k<im.length;k++)

		initImage(im[k]);

}

function getElementsBySelector(selector){

	selector=selector.split(" ");

	var a=document.getElementsByTagName(selector[0]);

	var r=[];

	for (var i=0;i<a.length;i++) {

		var b= a[ i ].getElementsByTagName(selector[1]);

		for (var j=0;j<b.length;j++) {

			r.push(b[j]);

		}

	}

	return r;

}

function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;

  

  // IE/Win

  obj.style.filter = "alpha(opacity:"+opacity+")";

  

  // Safari<1.2, Konqueror

  obj.style.KHTMLOpacity = opacity/100;

  

  // Older Mozilla and Firefox

  obj.style.MozOpacity = opacity/100;

  

  // Safari 1.2, newer Firefox and Mozilla, CSS3

  obj.style.opacity = opacity/100;

}



function initImage(image) {

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(image,0);

}







function fadeIn(obj,opacity) {

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout( function() {

            fadeIn(obj,opacity);

      },100);

    }

}

iDo a écrit :
je t'en ai refait une spéciale pour ta syntaxe.

Merci mille fois, le script fonctionne à merveille!