Jquery : Afficher un cadre au survol de la souris

survol

Jquery regorge de petits outils sympathiques. Parmis eux, la possibilité d’afficher des cadres avec des effets de fondu, déroulé, volet… Que sais-je encore! Vous pouvez en voir un exemple d’utilisation sur skyscrapers. Ici, l’idée n’est pas forcément d’apprendre à suivre le déplacement de la souris, de jouer sur les effets, mais surtout de pouvoir déterminer ou afficher quoi. Voila comment cela se passe:

La page en elle-même

Il faut commencer par la structure de la page HTML. Par exemple, au pif  :

<img src="MON_IMAGE" id="puce1" alt="puce" style="z-index: 0;" onmouseover="ouvreFiche('1')" onmouseout="fermeFiche('1')" onclick="fermeFiche('1')" />
<div id="1">
 LE CONTENU DU CADE
</div>

On affiche donc une image – la puce – avec des fonction au survol et à la sortie. CE sont ces fonctions qui feront apparaitre le cadre. A noter ici que si vous voulez répéter ceci il faudra bien entendu modifier les id/class qui sont dans cet exemple à « 1 ». On remarquera le fait que le cadre que l’on souhaite afficher est visible.

A noter : le style z-index: 0 sur l’image

Fait pas style !

Il faut soit mettre dans les balises head de la page, soit dans une feuille css à inclure le code suivant :

.fichesurvol{
	z-index: 1;
	display: none;
	position: absolute;
	top: 0; left: 0;
	float: left; text-align: left;
	width: 200px; height: 110px;
}

A noter : le style z-index: 1 sur la classe fichesurvol, et le positionnement en haut à gauche

On notera Cela aura pour effet de marquer le div ayant pour class « fichesurvol », ici notre cadre. Jusque là tout va bien, on a notre puce, le cadre invisible… Oui mais diantre cela ne fonctionne pas! Normal, il manque le javascript!

El javascripto

Nous avons parlé de jquery plus tôt. Et oui, il faut inclure la fameuse bibliothèque. Vous pouvez la télécharger et l’hébergemer  à la maison, mais je trouve plus pratique d’avoir en permanence la dernière version :

<script src="http://code.jquery.com/jquery-latest.js"></script>

Ensuite, il faut insérer le code correspondant à la détection du positionnement de la souris ainsi qu’aux fonctions affiche/ferme :

var posY;
var posX;
jQuery(document).ready(function(m) {
  	$(document).mousemove(function(m){
    	posX = m.pageX - 215;
		posY = m.pageY;
	});
})
function ouvreFiche(e){
	$("#"+e).css('left', posX);
	$("#"+e).css('top', posY);
	$("#puce"+e).css('z-index', '2');
	$("#"+e).fadeIn("fast");
}
function fermeFiche(e){
	$("#"+e).hide();
	$("#"+e).css('left', 0);
	$("#"+e).css('top', 0);
	$("#puce"+e).css('z-index', '0');
}

Petite explication : la première fonction correspond à une sorte de mise en place d’un listener qui va surveiller la position de la souris en permanance sur la page courante, et en mettre les coordonnées dans posX et posY. Par la suite, les fonctions ouvreFiche » et « fermeFiche » pourront utiliser ces coordonnées pour placer le cadre puis l’affiche.

Ici le parti pris est d’afficher le cadre en bas à droite du curseur de la souris. Si vous souhaitez afficher des cadres plus grands, il est conseillé d’afficher le cadre à gauche de la souris  si l’on est dans la moitié droite de la page, et vers le haut si l’on est dans la moitié basse de la page. A ce moment là, il faut modifier la fonction « ouvrefiche » comme suit :

function ouvreFiche(e){
	if( posX < ($("#page").width()/2) ){
		// On est dans la moitié gauche, on ouvre sur la droite
		$("#"+e).css('left', posX);
	}else{
		// On est dans la moitié droite, on ouvre sur la gauche
		$("#"+e).css('left', posX - $("#"+e).width() - 10);
	}
	if( posY < ($("#page").height()/2) ){
		// On est dans la moitié haute, on ouvre sur le bas
		$("#"+e).css('top', posY+5);
	}else{
		// On est dans la moitié basse, on ouvre sur le haut
		$("#"+e).css('top', posY - $("#"+e).height() - 10);
	}
	$("#puce"+e).css('z-index', '2');
	$("#"+e).fadeIn("fast");
}

Cela donne conrètement:

  • je survole un élément
  • l’élément appelle la fonction ouvreFiche en lui passant en paramètre son nom (ici, « e »)
  • la fonction qui collabore avec le listener sait où est la souris, et va donc:
    • définir l’abcisse du cadre à partir de posX
    • définir l’ordonnée du cadre à partir de posY
    • définir sur le cadre un z-index à 2 (supérieur pour être au dessus)
    • l’afficher en fadeIn()
  • si je sors de l’image, tout pareil avec « fermeFiche »

>>>Démo et téléchargement

2 commentaires

  1. Petit tuto très intéressant, merci !

    Cependant, il a un défaut : dans l’exemple de démo, si on s’amuse à passer rapidement d’une tour à l’autre, il arrive parfois qu’une ou plusieurs fiches restent affichées. (c’est un peu un cas limite, j’en conviens, mais bon …)

    Pour corriger ça, dans la fonction fermerFiche(), il faudrait rajouter juste avant la première ligne, le code suivant :
    $(« # »+e).stop(true, true);

    Pour ma part, ça donne de bons résultats.

    1. Dans l’idéal, il faudrait même se passer du onMouseOver au bénéfice d’un $(« #mondiv »).hover.

      Ainsi on aurait :

      $(« #mondiv »).hover(function(){
      //Je fais apparaitre la vignette avec $(this).stop().fadeIn()
      }, function(){
      //Je fais disparaitre ma vignette avec $(this).stop().fadeOut()
      });

      De cette façon, dès que l’on sort la souris la vignette disparaît automatiquement. J’avais fait ce site il y a un bail, je venais tout juste de découvrir jquery 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *