Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Flash : Raccourci Action : F9




Les tutoriaux: Index » Jquery » ScriptsJquery » Opacity sur vos images

Introduction

  • Tutoriel posté par Sky
  • 2069 lectures
  • Mis en ligne le 10-11-2010
  • Dernière mise à jour le 27-11-2010
  • Ce tutoriel a été estimé comme difficile.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir dans ce cours comment changer l'opacité de votre image lors du passage de la souris.




Méthodologie

LA PARTIE HTML


Rien de bien compliqué, il s'agit de l'insertion simple d'une image avec comme class CSS "light" pour un affichage sans transition et light1 pour un affichage avec fondu
CODE HTML


<!DOCTYPE html>
<html>
<head>
<title>OPACITY</title>
</head>
<body bgcolor="#24292D">
AVEC CSS

<img class="light" src="ttm.png" alt="" /><br /><br />
AVEC ANIMATE<br />
<img class="light1" src="ttm.png" alt="" />
</body>
</html>



LA PARTIE CSS


CODE CSS


body {
margin-right:0;
margin-left:0;
color:#fff;
}
.light{
opacity:0.2;
/* Pour afficher l'opacité sous IE lors du chargement de la page
Ensuite c'est jQuery qui prend la relève */
filter : alpha(opacity=20); 
}
.light1{
opacity:0.2;
/* Pour afficher l'opacité sous IE lors du chargement de la page
Ensuite c'est jQuery qui prend la relève */
filter : alpha(opacity=20); // POUR IE
}



LA PARTIE JQUERY


Nous allons utiliser .mouseover et .mouseout pour effectuer l'effet recherché.

CODE JAVASCRIPT


/* Lorsque que la souris est sur une image qui a la class CSS light */
$("img.light").mouseover(function(){ 
/* On utilise "this" pour que SEUL l'élément ou se trouve la souris soit impacté 
Si nous avions mis $("img.light")... toutes les images ayant la class light auraient été impactées.*/
$(this).css({"opacity":"1"});
});

/* Lorsque la souris sort du survol on réaffiche l'opacité à 20 % */ 
$("img.light").mouseout(function(){ 
$(this).css({"opacity":"0.2"});
});

/* Ci-dessous pour un effet de fondu, on utilise .animate() à la place de .css() */
$("img.light1").mouseover(function(){ 
$(this).animate({"opacity":"1"});
});

$("img.light1").mouseout(function(){ 
$(this).animate({"opacity":"0.2"});
});



INFORMATION COMPLEMENTAIRE


Dans notre exemple ci-dessus nous agissons sur une image mais vous pouvez également interagir sur un bloc div, ainsi tout le contenu de ce bloc serait impacté.

CODE JAVASCRIPT


$("div.light1").mouseover(function(){ 
$(this).animate({"opacity":"1"});
});

$("div.light1").mouseout(function(){ 
$(this).animate({"opacity":"0.2"});
});


UTILISER .hover A LA PLACE ?


Lors de l'utilisation un peu plus poussée de .mouseover et .mouseout j'ai rencontré des comportements assez étonnants, surtout concernant le .mouseout.

De ce fait je recommande d'utiliser .hover à la place qui a pour syntaxe

CODE JAVASCRIPT


$("img").hover(lors du survol, sortir du survol);



Vous constatez qu'avec .hover on intégre directement l'état lors du survol et celui en sorti de survol
Pour vous donnez un exemple j'utiliserai le même qu'avec .mouseover et .mouseout de ce cours

CODE JAVASCRIPT


$("img").hover(
  function () {
    $(this).css({"display":"block", "opacity":"0.5"});
  }, 
  function () {
    $(this).css({"display":"none"});
  }
);



Pour information .hover est un condensé de $(selecteur).mouseenter(handlerIn).mouseleave(handlerOut);
Notes

  Evaluez le tutorial (5 Votes)

1
1
3

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Opacity sur vos images

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com