11548 sujets

JavaScript, DOM et API Web HTML5

Apparition progressive d'une image

Bonjour,
Voila je suis en javascript et je découvre mootools par la meme occasion. Je me retrouve avec un code que j'arrive a faire marcher mais qui me pose deux problémes. Ce code permet de faire apparaitre une image progressivement mais voilà j'aimerais que celle ci soit invisible dés le départ or elle ne le devient que si on passe dessus une premiere fois.
voici le lien du test:
lien

voici le code:

HTML

<body>
<DIV class=cell id=portfolio>

<DIV id=references>
<DIV class=position>
<DIV class=wrapper>
<DIV class=item>
<img height=195 
src="test_fichiers/prague-guide-00.jpg" 
width=295 />
</DIV>
<DIV class=item>
<IMG height=195 
src="test_fichiers/stop-vlhkosti-00.jpg" 
width=295>
</DIV>
<DIV class=item>
<IMG height=195 
src="test_fichiers/henkel-lepidla-00.jpg" 
width=295> </DIV>
<DIV class=item>
<IMG height=195
src="test_fichiers/pc-00.jpg" width=295>
</DIV>

</body>



JAVASCRIPT


var References = {
	
	  init: function(){
			
			  var items = $$('#references .item');
				items.each(function(element){
				  var img = element.getElement('img');
				  var imgFx = new Fx.Tween(img, { duration: 200, wait: false });
					element.addEvent('mouseenter', function(){
					  imgFx.start('opacity', 1);
						element.setStyle('cursor','pointer');
					});
					element.addEvent('mouseleave', function(){
					  imgFx.start('opacity', 0);
					});
					element.addEvent('click', function(){
					  window.location = element.getElement('a').getProperty('href');
					});
				});
				
		}
		
};




var FileCz = {
	init: function(){
		 
    
		References.init();
		
		
	}
};


window.addEvent('domready', function(){
																		 
  FileCz.init();


Je donc pas a faire en sorte que l'image soit invisible dés le départ.

Si vous avez une idée, je vous en remercie d'avance. Smiley biggrin
Modifié par mackean (27 Aug 2008 - 11:40)
et bien tu peux ajouter une classe css pour cela 

.maClasse {
 display:none;
}


ensuite tu applique cette classe sur ton image


<img class="maClasse" src="xx" />


voila
oui j'y avait pensé mais malheuresement l'image ne réaparait pas par la suite lorsque je passe dessus. Smiley decu
Hello,

Hmm, le script joue sur l'opacité pour faire apparaitre/disparaitre l'image, si on choisit de ne pas l'afficher du tout (en css), on aura beau changer son opacité, on ne la verra pas mieux.

Non, l'idée là serait de la faire disparaitre au chargement. Je ne connais pas la syntaxe de Mootools mais j'imagine que quelque chose dans ce gout là 
img.setStyle('opacity', 0);
juste après
var img = element.getElement('img');
devrait faire l'affaire.

Qu'un utilisateur de Mootools me corrige sur la syntaxe.
Smiley biggrin ouah trop fort ça marche super bien, je met un lien pour que tu puisse voir le résultat(et si ça peut en aider certains: lien ). Un grand merci a toi c'est vraiment super.

J'ai encore une petit question: Comme on peu le voir sur mon javascript, il ne se lance que grâce a ce code :



window.addEvent('domready', function(){
var FileCz = {
	init: function(){
		 
    
		References.init();
		
		
	}
};


window.addEvent('domready', function(){
																		 
  FileCz.init();


Je n'arrive malheureusement pas a enlever cela pour que ça marche, j'ai bien essayer cela:



window.addEvent('domready', function(){
var References = {
	
	  init: function(){
			
			  var items = $$('#references .item');
				items.each(function(element){
				  var img = element.getElement('img');
				  var imgFx = new Fx.Tween(img, { duration: 200, wait: false });
					element.addEvent('mouseenter', function(){
					  imgFx.start('opacity', 1);
						element.setStyle('cursor','pointer');
					});
					element.addEvent('mouseleave', function(){
					  imgFx.start('opacity', 0);
					});
					element.addEvent('click', function(){
					  window.location = element.getElement('a').getProperty('href');
					});
				});
				
		}
		
};
});


mais ça ne veu pas marcher Smiley bawling .
Modifié par mackean (06 Sep 2008 - 14:03)
Sujet clos
Aller à