Posez votre question Signaler

Modification progressive opacité image [Résolu]

Messages postés
15
Date d'inscription
mercredi 25 mai 2011
Dernière intervention
20 mai 2016
 - - Dernière réponse : @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 - 24 févr. 2014 à 20:17
Javascript / DHTML Posez votre question Signaler
Bonjour,
Je travail actuellement sur la modification de l'opacité d'une image. Je souhaite que mon image passe d'une opacité normale, à une opacité très clair, de manière "esthétique", c'est à dire que le changement d'opacité se fait progressivement.

Le problème que je rencontre est sur l'esthétisme. En effet, mon image passe d'une opacité normal, à une opacité clair en un éclair.

J'ai essayé d'utiliser des setTimeout dans des boucles, et d'autres choses, voici mon dernier essai : 

function modifyOpacity(opacity)
{
	if (opacity > 0.1)
	{		
		document.getElementById("image1").style.opacity = opacity.toString();
		opacity = opacity - 0.1;
		setTimeout(modifyOpacity(opacity), 10000);
	}
};


Merci d'avance pour votre aide.
Afficher la suite 

Votre réponse

Répondre au sujet

8 réponses

Meilleure réponse
Signaler Commenter la réponse de f0xi
Messages postés
4307
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
2 janvier 2019
 33
1
Merci
CSS 3 

<style>
#image[active="0"]{opacity:0.5; transition:1s opacity;}
#image[active="1"]{opacity:1; transition:1s opacity;}
</style>


JS / JQuery 
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $('#image').on('mouseover', function(){ 
    $(this).attr('active','1');
  });
  
  $('#image').on('mouseout', function(){
    $(this).attr('active','0');
  });
});
</script>


HTML 
<img src="image.jpg" active="0" alt="" id="image"/>



OU sans javascript : 

<style>
#image{opacity:0.5; transition:1s opacity;}
#image:hover{opacity:1; transition:1s opacity;}
</style>


<img src="image.jpg" alt="" id="image"/>



Et pour voir le resultat : http://jsfiddle.net/74xWz/13/

________________________________________________________
[ besoin de câbles audio, vidèo, informatique pas cher ?]

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 115 internautes nous ont dit merci ce mois-ci

Commenter la réponse de f0xi
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
1
Merci
il manque la version pur javascript 

function fada_map(el,min,max){

 this.el2=document.getElementById(el);
 this.inter=null;
 this.bb=0.5;
 this.min=min;
 this.max=max;
 
 var that=this;
 
 this.nbsta=function(){
  
  clearInterval(that.inter);
  that.inter=setInterval(that.nbfadec,30);
 }

 this.nbsto=function(){
  
  clearInterval(that.inter);
  that.inter=setInterval(that.nbfaden,30);
 }

 this.nbfadec=function() {

  that.bb+=0.1;
  
  that.el2.style.opacity = that.bb.toFixed(1);

  if(that.bb >= that.max){
   clearInterval(that.inter);
   return false
  }
 }

 this.nbfaden=function() {

  that.el2.style.opacity = that.bb.toFixed(1);
  
  if(that.bb <= that.min){
   clearInterval(that.inter);
   return false
  }
  that.bb-=0.1;
 }
 
 this.el2.onmouseover=this.nbsta;
 this.el2.onmouseout=this.nbsto;
 
}

function init_Opacity(){

 new fada_map("image1",0.5,1);
 }
 
addEventListener('load',init_Opacity,false);


et c'est instanciable et parametrable

Et pour voir le resultat :http://jsfiddle.net/9jdTZ/
cours Forest cours !

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 115 internautes nous ont dit merci ce mois-ci

Commenter la réponse de @karamel
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
1
Merci
ou encore

le css 

.image1{opacity:0.5; transition:1s opacity;}
.image2{opacity:1; transition:1s opacity;}


le js pur 

<script>
function init_Opacity(){
 var el=document.getElementById('image1');
 el.onmouseover=function(){el.className='image2'};
 el.onmouseout=function(){el.className='image1'};
 }
 addEventListener('load',init_Opacity,false);
<script>


cours Forest cours !

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 115 internautes nous ont dit merci ce mois-ci

Commenter la réponse de @karamel
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
1
Merci
et l'avantage c'est que c'est compatible avec ie 8

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 115 internautes nous ont dit merci ce mois-ci

Commenter la réponse de @karamel
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
0
Merci
bonjour

en un éclair c'est a dire ?
et pourquoi toString ce serait pas plutot parseInt
Commenter la réponse de @karamel
Signaler Commenter la réponse de CS-Tual
Messages postés
15
Date d'inscription
mercredi 25 mai 2011
Dernière intervention
20 mai 2016
0
Merci
Re,
"en un éclair" = instantanément;
c'est bien toString() : je n'ai pas essayé avec un nombre, mais dans les documentations que j'ai consulté, c'était toujours une chaîne de caractère qui était renseignée.
Commenter la réponse de CS-Tual
Signaler Commenter la réponse de @karamel
Messages postés
1666
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 janvier 2019
 33
0
Merci
le problème vient du setTimeout et la façon de mettre le paramètre opacity 

function modifyOpacity(opacity){

if (arguments.length == 0){
    
  var opacity=1
    
 }
    
if (opacity > 0.1)
 {  
  document.getElementById("image1").style.opacity = opacity;
  opacity = opacity - 0.1;
  setTimeout('modifyOpacity('+opacity+')',100);
 }
}



arguments.length c'est pour ne pas mettre de paramètre a l'appel de la fonction
Commenter la réponse de @karamel
Signaler Commenter la réponse de CS-Tual
Messages postés
15
Date d'inscription
mercredi 25 mai 2011
Dernière intervention
20 mai 2016
0
Merci
Rebonjour à tous et merci pour vos réponses.

J'ai changé d'idée depuis que j'ai posté ce poste. A présent je fais disparaitre et apparaître les images avec les fonctions jquery : show(); hide(); fadeIn() et fadeOut().

Voici le guide dont je me suis inspiré : http://samscode.com/index.php/2009/12/simple-jquery-showhide-fadeinfadeout-example/
Commenter la réponse de CS-Tual

Votre réponse

Répondre au sujet
Posez votre question
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.