1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Modification progressive opacité image

Résolu
CS-Tual
Messages postés
15
Date d'inscription
mercredi 25 mai 2011
Statut
Membre
Dernière intervention
20 mai 2016
 - 6 févr. 2014 à 14:19
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 - 24 févr. 2014 à 20:17
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.

8 réponses

Réponse 1 / 8
f0xi
Messages postés
4205
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
12 mars 2022
 37
Modifié par f0xi le 22/02/2014 à 19:18
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 ?]
1
Réponse 2 / 8
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 23/02/2014 à 23:27
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 !
1
Réponse 3 / 8
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 23/02/2014 à 23:52
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 !
1
Réponse 4 / 8
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
24 févr. 2014 à 20:17
et l'avantage c'est que c'est compatible avec ie 8
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
6 févr. 2014 à 17:56
bonjour

en un éclair c'est a dire ?
et pourquoi toString ce serait pas plutot parseInt
0
Réponse 6 / 8
CS-Tual
Messages postés
15
Date d'inscription
mercredi 25 mai 2011
Statut
Membre
Dernière intervention
20 mai 2016
7 févr. 2014 à 10:03
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.
0
Réponse 7 / 8
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 7/02/2014 à 15:39
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
0
Réponse 8 / 8
CS-Tual
Messages postés
15
Date d'inscription
mercredi 25 mai 2011
Statut
Membre
Dernière intervention
20 mai 2016
24 févr. 2014 à 13:56
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/
0