Modification progressive opacité image [Résolu]

CS-Tual 15 Messages postés mercredi 25 mai 2011Date d'inscription 20 mai 2016 Dernière intervention - 6 févr. 2014 à 14:19 - Dernière réponse : @karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention
- 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
f0xi 4304 Messages postés samedi 16 octobre 2004Date d'inscriptionModérateurStatut 9 mars 2018 Dernière intervention - Modifié par f0xi le 22/02/2014 à 19:18
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

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 119 internautes ce mois-ci

Commenter la réponse de f0xi
Meilleure réponse
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - Modifié par kazma le 23/02/2014 à 23:27
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

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 119 internautes ce mois-ci

Commenter la réponse de @karamel
Meilleure réponse
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - Modifié par kazma le 23/02/2014 à 23:52
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

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 119 internautes ce mois-ci

Commenter la réponse de @karamel
Meilleure réponse
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 24 févr. 2014 à 20:17
1
Merci
et l'avantage c'est que c'est compatible avec ie 8

Merci @karamel 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 119 internautes ce mois-ci

Commenter la réponse de @karamel
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - 6 févr. 2014 à 17:56
0
Merci
bonjour

en un éclair c'est a dire ?
et pourquoi toString ce serait pas plutot parseInt
Commenter la réponse de @karamel
CS-Tual 15 Messages postés mercredi 25 mai 2011Date d'inscription 20 mai 2016 Dernière intervention - 7 févr. 2014 à 10:03
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
@karamel 1659 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 22 juin 2018 Dernière intervention - Modifié par kazma le 7/02/2014 à 15:39
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
CS-Tual 15 Messages postés mercredi 25 mai 2011Date d'inscription 20 mai 2016 Dernière intervention - 24 févr. 2014 à 13:56
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.