Recevez les mises à jour gratuites du blog par Email : »» Garanti sans spam indésirable ««

Agrandir une image lorsque la souris survole ou se déplace dans l’image

de Mimie le 30 janvier 2010

Rubrique : Programmation

Concept

L’idée est de pouvoir faire apparaitre une image miniature en plus grand lorsque nous la survolons de la souris, et de masquer l’agrandissement lorsque la souris sort de l’image. De plus l’image agrandie doit suivre le curseur de votre souris tant que vous survolez l’image miniature.

Version personnelle

  • La mise en place est relativement simple, voici les différentes étapes :
  1. faire en sorte qu’une « div » soit crée et cachée par défaut, c’est elle qui contiendra l’image qui sera affichée au survol de la souris
  2. lorsque la souris survole l’image miniature, la div s’affiche et le source de l’image à l’intérieur s’actualise
  3. lorsque la souris se déplace dans l’image miniature, l’image agrandie suit le curseur jusqu’à ce qu’il sort de l’image
// conteneur de l'image zoomée
document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000;">');
document.write('<img id="img_zoom_image" src="" style="position:absolute; left:5px; top:5px; z-index:2000;" />');
document.write('</div>');
// affiche l'image au niveau du curseur
function overImage(imgUrl) {
	document.getElementById("div_zoom_image").style.visibility = "visible";
	document.getElementById("img_zoom_image").src = imgUrl;
	document.onmousemove = moveImage;
}
// masque l'image
function outImage() {
	document.getElementById("div_zoom_image").style.visibility = "hidden";
	document.getElementById("img_zoom_image").src = "";
	document.onmousemove = "";
}
// permet d'afficher l'image lorsque la souris bouge dans l'image
function moveImage(event) {
	// position
	var x = event.pageX + 5;
	var y = event.pageY + 5;
	// placement
	document.getElementById("div_zoom_image").style.left = x + "px";
	document.getElementById("div_zoom_image").style.top = y + "px";
}
  • En pratique voici le rendu :
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=209007&type=card"
		onmouseover="overImage('http://magiccards.info/scans/en/som/2.jpg')";
		onmouseout="outImage();" />

Version jQuery

Le fameux framework javascript inclut dans son code une fonction permettant de faire la même chose, la voici :

// simple tooltips
function webshot(target_items, name){
 jQuery(target_items).each(function(i){
		jQuery("body").append("<div class='"+name+"' id='"+name+i+"'><img src='"+jQuery(this).attr('src')+"' /></div>");
		var my_tooltip = jQuery("#"+name+i);
		jQuery(this).mouseover(function(){
				my_tooltip.css({opacity:1, display:"none"}).fadeIn(166);
		}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
		}).mouseout(function(){
				my_tooltip.fadeOut(333);
		});
	});
}

Cet article a été écrit par :

– qui a déjà rédigé 123 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

{ 20 commentaires… à vous de vous exprimer ! }

1 Seb décembre 15, 2010 à 13 h 30 min

Bonjour, merci pour ce script excellent, j’aurais juste une question, en le testant sur un serveur php (easyphp) ça ne fonctionne pas, l’image s’affiche un dixième de seconde puis disparait. Aucun code php dans la page, je l’ai juste testé sur un serveur.
Merci,
Cordialement
Séb

Répondre

2 Mimie décembre 15, 2010 à 13 h 53 min

Bonjour Seb, je soupçonne un problème lié au navigateur que tu utilises … as-tu testé sur Firefox ou Chrome ?
Le langage serveur n’a aucune importance pour ce code car tout est fait côté navigateur (code javascript et html uniquement), donc tu peux poster ta page si tu veux en utilisant les balises [plain] [html] … [/html] ou [php] … [php] [/plain]

Répondre

3 Seb décembre 15, 2010 à 18 h 38 min

Merci Mimie,
Je bosse par défaut avec Firefox et je me suis dit tiens je vais tenter avec IE et bien sous IE ça ne marche carrément pas dans aucuns cas de figure…
Et concernant le langage serveur, je sais bien c’est pour ça que ça me surprend car même la page en html sans la queue d’un morceau de php sur le serveur local (easyphp) ou le serveur distant… HE bien l’image se barre après une demi seconde d’affichage…

Répondre

4 Mimie décembre 15, 2010 à 21 h 01 min

@Seb : je ne vois pas où tu coinces, ça fonctionne très bien chez moi, voici mon fichier de test :

<html>
<head>
	<script type="text/javascript">
		// conteneur de l'image zoomée
		document.write('<div id="div_zoom_image" style="position:absolute; visibility:hidden; left:-286px; top:0px; z-index:1000;">');
		document.write('<img id="img_zoom_image" src="" style="position:absolute; left:5px; top:5px; z-index:2000;" />');
		document.write('</div>');
		// affiche l'image au niveau du curseur
		function overImage(imgUrl) {
			document.getElementById("div_zoom_image").style.visibility = "visible";
			document.getElementById("img_zoom_image").src = imgUrl;
			document.onmousemove = moveImage;
		}
		// masque l'image
		function outImage() {
			document.getElementById("div_zoom_image").style.visibility = "hidden";
			document.getElementById("img_zoom_image").src = "";
			document.onmousemove = "";
		}
		// permet d'afficher l'image lorsque la souris bouge dans l'image
		function moveImage(event) {
			// position
			var x = event.pageX + 5;
			var y = event.pageY + 5;
			// placement
			document.getElementById("div_zoom_image").style.left = x + "px";
			document.getElementById("div_zoom_image").style.top = y + "px";
		}
	</script>
</head>
<body>
	<img src="ht tp://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=209007&type=card"
		onmouseover="overImage('ht tp://magiccards.info/scans/en/som/2.jpg')";
		onmouseout="outImage();" />
</body>
</html>

Répondre

5 Seb janvier 3, 2011 à 10 h 22 min

Merci à toi …
Ca fonctionne à merveille, j’ai juste repris le code et recommencé et ça fonctionne.
Parfois je me demande si il n’y a pas un peu de surnaturel la dessous héhéhé

Merci à toi en tout cas et bonne année …

Répondre

6 Mimie janvier 3, 2011 à 11 h 26 min

De rien :)
Bonne année à toi aussi.

Répondre

7 Namy mars 12, 2011 à 16 h 06 min

Bonjour,
Ton script est génial, il fonctionne très bien, mais j’aurais besoin d’une petite adaptation et je n’y connais rien :/
Pour les vignettes qui sont en bas de page, l’image zoomé s’affiche sous le curseur et du coup on ne vois pas le bas de l’image.
Y a t-il moyen d’afficher les images au dessus du curseur lorsqu’elles risquent d’être coupées?

Merci !

Répondre

8 Mimie mars 12, 2011 à 17 h 49 min

@Namy: oui je l’ai mis en place sur mon site perso,il faut pour cela modifier un ptit peu la méthode moveImage :

// permet d'afficher l'image lorsque la souris bouge dans l'image
var moveImage = function(event) {
	// permet de ne pas faire en sorte que l'image soit trop basse par rapport à la page dans le navigateur
	var cardHeight = document.getElementById("img_zoom_image").height() + 5;
	var dif = event.clientY + cardHeight - getDimensionHeight();
	var up = (dif > 0) ? dif : 0;
	// position
	var x = event.pageX + 5;
	var y = event.pageY + 5 - up;
	// placement
	document.getElementById("div_zoom_image").style.left = x + "px";
	document.getElementById("div_zoom_image").style.top = y + "px";
};
// récupère la hauteur de la fenêtre
var getDimensionHeight = function() {
	if (window.innerHeight) {
		return window.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		return document.documentElement.clientHeight;
	} else if (document.body) {
		return document.body.clientHeight;
	}
};

Répondre

9 Namy mars 12, 2011 à 18 h 06 min

J’ai mis le code en place mais ça me dit qu’il y a une erreur sur cette ligne :
« var dif = event.clientY + cardHeight – getDimensionHeight(); »

Et sinon, je vais vraiment être chiante :p Serait-il possible d’ajouter une petite légende sous l’image ? Et si oui, comment faire ^^
Merci pour ton script en tout cas, c’est ce que je cherchais depuis longtemps :)

Répondre

10 Mimie mars 12, 2011 à 18 h 15 min

@Namy: ah oui je faisais référence à $ de jQuery, j’ai modifié le script dans le commentaire, ça devrait marcher, je réfléchis pour la question supplémentaire :)

Répondre

11 seb juillet 3, 2011 à 11 h 14 min

Bonjour j’ai une petite question, est il possible de redimensionner l’image (la grande) quiapparait au survole? J’aimerais pouvoir lui appliquer des dimension issue de variables en php (en gros la redimensionner au niveau de l’affichage genre dans la ligne « onmouseover= »overImage… » mais je n’y arrive pas je ne connais pas la syntaxe exacte à utiliser … Si quelqu’un peut m’aguiller merci d’avance…

Répondre

12 Mimie juillet 3, 2011 à 13 h 40 min

@seb : j’ai trouvé un moyen mais il faudrait que le code html généré par ton php contiennent déjà les informations de taille pour le zoom, ensuite il faut modifié la fonction overImage comme suit :

function overImage(imgUrl, width, height) {
        document.getElementById("div_zoom_image").style.visibility = "visible";
        document.getElementById("img_zoom_image").src = imgUrl;
        document.getElementById("img_zoom_image").style.width = width;
        document.getElementById("img_zoom_image").style.height = height;
        document.onmousemove = moveImage;
}

Code HTML qui doit comprendre à présent la notion de taille et hauteur de l’image à zoomer :

<img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=209007&type=card"
        onmouseover="overImage('ht tp://magiccards.info/scans/en/som/2.jpg', '400px', '500px')";
        onmouseout="outImage();" />

Répondre

13 seb juillet 4, 2011 à 23 h 58 min

Yessssssss !!!!! merci c’est vraiment cool, avec une redim php ça marche à merveille …. Je suis une bille en javascript mais je vais m’y mettre parce que ça a l’air bien sympa en creusant!!!
En revanche je trouvais cool l’idée du dessus (l’histoire de l’image qui s’affiche en fonction de la hauteur de la fenetre) mais je n’ai rien compris alors j’ai laché l’affaire.
En revanche, peut etre peus tu encore me depanner car tout ça est merveilleux sauf que ça ne marche po du tout sous IE… (event.pageX/Y ne fais pas plaisir à la daube de microsoft) il y a une parade ou il faut abbatre tous les gens qui utilise IE? ;-)

Répondre

14 seb juillet 5, 2011 à 0 h 00 min

D’ailleurs c’est marrant mais ce qui se passe sous firefox quand j’essaie le script qui affiche plus haut les images du bas c’est la meme chose que dans IE sans cette fonction … c’est rigolo ça

Répondre

15 Mimie juillet 5, 2011 à 0 h 22 min

Peut-être une piste en considérant event.pageX et event.pageY respectivement posX et poxY définis comme suit :

var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
  posx = e.pageX;
  posy = e.pageY;
}
else if (e.clientX || e.clientY) {
  posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}

PS : à mort IE !!!! perso j’ai bloqué mes users avec un IE < 8 sur mon site magic, na !

Répondre

16 seb juillet 5, 2011 à 1 h 05 min

Aaaaaaaaaaaaaaaaaaaah ben non là du coup ça fait la meme sur les deux navigateurs ;…

Répondre

17 seb juillet 5, 2011 à 21 h 33 min

AH si finalement ça marche sou ie mais plus sous firefox ..; ou alors je n’ai rien capté? on doit faire un detection de navigateur non (j’ai la sensation de raconte n’importe quoi là …)

Répondre

18 seb juillet 5, 2011 à 22 h 05 min

Bon c’est cool j’ai fait une detection de navigateur en php …. Et ça le fait , Merci à toi mimie t’assure ….Merci beaucoup …

Répondre

19 Mimie juillet 5, 2011 à 23 h 03 min

@seb : aucun soucis, merci ^^

Répondre

20 hervé septembre 6, 2011 à 11 h 58 min

bonjour,
je suis intéressé par la version jquery mais je ne comprends pas comment l’implémenter…
comment la fonction est elle appelée?
comment dois-je construire le code de mes images?
En fait j’affiche des imagettes en php dont le nom est préfixé par « tn_ » le fichier image que je veux afficher au survol porte le même nom mais sans le prefixe…
Comment utiliser cette fonction jquery??
Merci d’avance!
Hevré

Répondre

Laissez un Commentaire

Article précédent:

Article suivant: