Modification progressive opacité image [Résolu]

Question

Posez votre question Signaler

Modification progressive opacité image [Résolu]

CS-Tual

Messages postés: 15
Date d'inscription: mercredi 25 mai 2011
Dernière intervention: 20 mai 2016

- 6 févr. 2014 à 14:19 - 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

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

A voir également:

Votre réponse

Répondre au sujet

8 réponses

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1663
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 3 novembre 2018

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

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

Codes Sources a aidé 98 internautes ce mois-ci

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1663
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 3 novembre 2018

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

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

Codes Sources a aidé 98 internautes ce mois-ci

Signaler Commenter la réponse de @karamel

@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

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

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1663
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 3 novembre 2018

6 févr. 2014 à 17:56

0

Merci

bonjour

en un éclair c'est a dire ?
et pourquoi toString ce serait pas plutot parseInt

Signaler Commenter la réponse de CS-Tual

CS-Tual

Messages postés: 15
Date d'inscription: mercredi 25 mai 2011
Dernière intervention: 20 mai 2016

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.

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1663
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 3 novembre 2018

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

Signaler Commenter la réponse de CS-Tual

CS-Tual

Messages postés: 15
Date d'inscription: mercredi 25 mai 2011
Dernière intervention: 20 mai 2016

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/

Votre réponse

Répondre au sujet

Posez votre question

f0xi · Accepted Answer · 2014-02-22T18:42:57+0100

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 ?]

Modification progressive opacité image [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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