Sujet Précédent Sujet Suivant

JQuery - Image dans une div changeant au survol de liens

Résolu/Fermé
Celio - 20 avril 2022 à 17:08
 Celio - 28 avril 2022 à 12:11
Bonjour,

J'ai rédigé ce bout de code pour faire apparaître dans une div l'image correspondant au lien survolé (hover) dans un texte. 

		<script>
			$("#IDa").hover(function(){
				$("#a").css("display", "block");
				$("#b").css("display", "none");
				$("#c").css("display", "none");
				$("#d").css("display", "none");
				$("#e").css("display", "none");
			});
			
			$("#IDb").hover(function(){
				$("#a").css("display", "none");
				$("#b").css("display", "block");
				$("#c").css("display", "none");
				$("#d").css("display", "none");
				$("#e").css("display", "none");
			});

			$("#IDc").hover(function(){
				$("#a").css("display", "none");
				$("#b").css("display", "none");
				$("#c").css("display", "block");
				$("#d").css("display", "none");
				$("#e").css("display", "none");
			});
			
			$("#IDd").hover(function(){
				$("#a").css("display", "none");
				$("#b").css("display", "none");
				$("#c").css("display", "none");
				$("#d").css("display", "block");
				$("#e").css("display", "none");
			});
			
			$("#IDe").hover(function(){
				$("#a").css("display", "none");
				$("#b").css("display", "none");
				$("#c").css("display", "none");
				$("#d").css("display", "none");
				$("#e").css("display", "block");
			});	
		</script>


Dans le CSS, j'ai précisé ; 

#a
#b,
#c,
#d,
#e {
	display: none;
}


Le résultat est proche de celui que je souhaite obtenir, mais j'aurais aimé ajouter un fadeIn. J'ai essayé de plusieurs manières, notamment de mettre le fadeIn à la place du "display: block", mais cela ne fonctionne que si je survole lentement les liens, sinon plusieurs images restent avec le display: block et j'ai donc plusieurs images au lieu d'une seule.

Aussi, j'aurais aimé faire quelque chose avec une logique de type if else, pour avoir un code plus court et mieux construit. Mais je n'y arrive pas.

J'ai lu qu'on pouvait également le faire en pure CSS, avec des manipulation autour de background et src. Mais je ne trouvais pas la solution très élégante, j'ai peut-être tort ?

Sauriez-vous m'aiguiller ? Merci pour votre aide, je suis débutant.

5 réponses

Réponse 1 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
21 avril 2022 à 13:11
Bonjour,

Tu peux effectivement remplacer ton code JavaScript par du CSS en utilisant la pseudo-classe :hover :
https://developer.mozilla.org/fr/docs/Web/CSS/:hover
https://www.w3schools.com/howto/howto_css_display_element_hover.asp

Toujours en CSS, tu peux utiliser les transitions pour ajouter un effet de fondu à l'affichage :
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Il n'est par contre pas possible d'appliquer une transition CSS avec la propriété display (block ou none). Il faudra utiliser une autre propriété tel que visibility, opacity ou encore height pour afficher/masquer les éléments avec une transition CSS.
1
Réponse 2 / 5
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
20 avril 2022 à 17:24
Bonjour,

C'est dommage que tu ne nous montres pas le html qui va avec tout ça ..
Quoi qu'il en soit, il serait plus judicieux de cibler tes éléments avec une class plutôt qu'avec des ID.

Ainsi, tu pourrais masquer TOUS les éléments ayant cette class ... et n'afficher que celle que tu survoles..

0
Réponse 3 / 5
DoctorHow
Modifié le 21 avril 2022 à 13:58
Salut,
sans remettre en question les réponses judicieuses précédentes il y a aussi la méthode fadeOut en JQuery.

https://www.w3schools.com/jquery/jquery_fade.asp

Jquery est de plus en plus abandonné car souvent il implique de charger un gros fichier de code(ça reste relatif certes, mais ça reste du temps de chargement en plus) pour quelque chose qui peut s'écrire facilement en quelques lignes de JavaScript(et JQuery c'est avant tout du JavaScript) ce qui est contreproductif: rarement utile et surcharge le chargement(quelques lignes de JS vs une bibliothèque entière en JavaScript dont on utilise 2 ou 3 fonctions), parfois rends même le code plus complexe surtout pour des trucs basiques.

La solution en pur CSS semble la meilleure.
Si ce n'est pas possible(sans voir le HTML dur de le dire) on peut facilement changer en JavaScript la classe d'un élément, exemple : 

//--... code de détection du clic

document.getElementById('c').className='ma-classe-avec-animation';

//-- ou en JQuery
$(document).ready(function(){
//--...code de détection du clic
$('#c').removeClass(NOM-CLASSE-A-SUPPRIMER).addClass('ma-classe-avec-animation');
}


On y gagne pas grand chose en rapidité d'écriture(voire parfois l'inverse) pour le coût de devoir chargé le fichier JQuery.
0
Réponse 4 / 5
Celio
26 avril 2022 à 15:00
Bonjour à tous,

Merci pour vos multiples suggestions, et navré pour le retard que j'accuse dans mon retour.

J'aurais en effet dû vous soumettre également le HTML, ça aurait facilité la compréhension de ma demande. Une particularité étant que je vise un élément frère du parent... 

<div class="parent">
 <a id="IDa" href="monlienA"></a>
 <a id="IDb" href="monlienB"></a>
 <a id="IDc" href="monlienC"></a>
 <a id="IDd" href="monlienD"></a>
 <a id="IDe" href="monlienE"></a>
 </div>
				
<figure id="a">
</figure>

<figure id="b">
</figure>

<figure id="c">
</figure>

<figure id="d">
</figure>

<figure id="e">
</figure>


Je ne crois pas que cela soit possible avec du CSS. Éventuellement en mettant une position absolue à mes figures, mais ce n'est pas une approche que je souhaite adopter.

Pour ce qui est de la relative lourdeur de jQuery, j'en suis conscient, j'essaie gentiment de me défaire des bouts de jQuery pour n'avoir plus que du javascript sur le site, mais ce n'est pas une mince affaire pour moi qui n'ai aucune expérience notoire dans le domaine.

Quant aux méthodes Fade, comme indiqué dans mon premier message, elles produisent des effets inattendus (plusieurs images restent avec le display: block).

Merci encore pour vos suggestions.
0

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

Posez votre question
Réponse 5 / 5
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
26 avril 2022 à 15:46
Bonjour,

Pourquoi pas un truc du genre 
<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TEST</title>
     <style>
     .figure-img {
        background: goldenrod;
        width: 300px;
        height: 300px;
        margin: 30px auto;
        display: none;
      }

   
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </head>
  <body>
  <div class="parent">
   <a id="IDa" data-id="a" href="monlienA">monlienA</a>
   <a id="IDb" data-id="b" href="monlienB">monlienB</a>
   <a id="IDc" data-id="c" href="monlienC">monlienC</a>
   <a id="IDd" data-id="d" href="monlienD">DDDD</a>
   <a id="IDe" data-id="e" href="monlienE">EEE</a>
   </div>
          
  <figure class="figure-img" id="a">
  </figure>

  <figure class="figure-img" id="b">
  </figure>

  <figure class="figure-img" id="c">
  </figure>

  <figure class="figure-img" id="d">
  </figure>

  <figure class="figure-img" id="e">
  </figure>
  
  <script type="text/javascript">

   $("a").hover(function(){
     let id = $(this).data("id");
     $(".figure-img").css("display","none");
     $("#"+id).fadeIn( "slow", function(){
        // Animation complete
      });
    $( this )
   });
  
  </script>
  </body>
</html>

0
Celio
Modifié le 27 avril 2022 à 15:54
Bonjour jordane45 ,

C'est une approche vraiment plus élégante que celle que j'avais! Merci beaucoup, c'est top!

J'ai toutefois le même problème avec le fadeIn; plusieurs figures restent avec le display sur block si je bascule rapidement entre plusieurs liens. Le problème est complétement inexistant si je remplace le fadeIn par un simple show. Seulement, je n'ai plus le fondu espéré...

Mais c'est déjà beau, le code est bien plus élégant, merci!

J'ai l'impression que je peux interagir avec un autre lien avant que le fadeIn soit terminé, et que ça déclenche plusieurs apparitions à cause de cette latence...

Je viens de faire une mini recherche, et le résultat semble bon avec un ajout de stop(); 

    $("a").hover(function(){
     let id = $(this).data("id");
     $(".figure-img").css("display","none");
     $("#"+id).stop().fadeIn("slow");
    $( this )
    });


Qu'en dites-vous ?
0
Celio > Celio
27 avril 2022 à 16:54
J'oubliais,

Ma figure avec l'id="a" a un display block par défaut (image initale sur la page). J'aimerais par conséquent éviter un fadeIn sur cette figure si elle est déjà visible (display: block). J'ai essayé d'intégrer quelque chose avec if, du style .css('display') == 'block'), etc. Sans succès...
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > Celio
28 avril 2022 à 08:07
Il n'est pas nécessaire de modifier la propriété css display avec jQuery si tu utilises les fonctions show, hide, fadeIn, etc.
A la place, utilise fadeOut (ou hide) sur toutes les balises figure sauf celle sur laquelle tu appliques un fadeIn, en t'aidant de la pseudo-classe css :not.
Par exemple, le sélecteur css 
.figure-img:not(#b)
cible toutes les balises qui ont class="figure-img" sauf celle qui a id="b".
https://jsfiddle.net/ouLqdkwy/
1
Celio > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
28 avril 2022 à 12:11
C'est parfait, juste royal, merci beaucoup, vraiment!
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
problème de pixel
bernie33260 -
contrariness -

14 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Retrouver moi l'original
kornette87 -
rcdj79 -

3 réponses