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
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
- 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.
Afficher la suite 

Votre réponse

8 réponses

Meilleure réponse
Messages postés
4304
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
9 mars 2018
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 ?]

Merci f0xi 1

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

Codes Sources a aidé 98 internautes ce mois-ci

Commenter la réponse de f0xi
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
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 !

Merci @karamel 1

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

Codes Sources a aidé 98 internautes ce mois-ci

Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
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 !

Merci @karamel 1

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

Codes Sources a aidé 98 internautes ce mois-ci

Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
1
Merci
et l'avantage c'est que c'est compatible avec ie 8

Merci @karamel 1

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

Codes Sources a aidé 98 internautes ce mois-ci

Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
bonjour

en un éclair c'est a dire ?
et pourquoi toString ce serait pas plutot parseInt
Commenter la réponse de @karamel
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
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
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
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

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.