18041 sujets

Questions générales et questions de débutants

Onemouseover version lightbox

Bonjour

j'ai sur mon site des vignettes assez petites qui fonctionnent sur lightbox, on clic dessus et la vignette s’agrandit à la dimension pré-défini.

Ce que je souhaite créer maintenant c'est d'avoir le même principe mais au survol de la souris. Et du coup supprimer lightbox, en faisant des recherches j'ai trouvé une fonction onemousehover.

Par contre tous les exemples trouvés ne correspondent pas à se que je cherche. En général c'est pour faire apparaitre une autre photo mais pas un agrandissement.

COmment faire ?
Salut,

Moi je te conseillerais d'utiliser du Jquery avec le plugin Qtip

Rien de sorcier Smiley smile

Il faut que tu télécharge le plugin Qtip2 : https://github.com/Craga89/qTip2/zipball/master

Dans le ZIP tu récupère 2 fichier dans le dossier \dist\
à savoir :
- jquery.qtip.css
- jquery.qtip.js

que tu met dans ton projet. chez moi je les place dans /jQuery/qtip/

Et ensuite tu peux utiliser comme l'exemple suivant :

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="jQuery/qtip/jquery.qtip.css" />
<script type="text/javascript" src="jQuery/qtip/jquery.qtip.js"></script>
</head>
<body>

<img src="image_petite.png" id="mypic" />

<script type="text/javascript">
	jQuery(document).ready(function() {
			jQuery('#mypic').qtip({
				content: '<img src="image_grande.png" />',
				position    :  {
			        my: 'top left',  // Position my top left...
			        at: 'bottom right', // at the bottom right of...
			        target: $('#mypic') // my target
			    },
				style: {
					classes: 'ui-tooltip-blue ui-tooltip-shadow'
				}
			});
		});
</script>
</body>
</html>


Donc t'as 3 lien en haut 1 vers Jquery et 2 Vers le plugin Qtip.

Et là t'a une petite image et lorsque la souris passe dessus ça ouvre la Grande dans une sorte d'infobox.

Bonne chance.

MArtial
Bonsoir,

Si tu veux des images affichées au hover sur une vignette, tu peux le faire uniquement en CSS, genre:

<p><img=""><img""></p>

p img + img {
display: none;
}

p:hover img + img {
display: block;
}


Tu n'a plus qu'à positionner la seconde image (grande image)
Modifié par thierry (09 Aug 2012 - 21:10)
Attention,

J'ai peur qu'avec les images en display none, le navigateur les télécharge quand même.

Si c'été le cas, et que tu souhaite faire ça sur une page avec beaucoup d'image, tu va exploser le temps de chargement de ta page.

martial
Bonjour,

Très intéressant, tout ça...

Thierry, sur ton principe, on peut faire afficher du texte avec l'image ?

Merci

@+
Bonjour Martic,

Tu pourrais être un tantinet plus précis, stp... Je ne suis pas un pro (hélas).

Merci

Smiley cligne

@+
Jason,


Voici un exemple concret avec la méthode de Thierry :

<!DOCTYPE html>
<html>
	<head>
	
		<style>	
		
		p + div {
		display: none;
		}
		
		p:hover + div {
		display: block;
		}
		
		</style>
	
	</head>
	<body>
	
		<p><img src="image_tiny.png" /><div class="detail"><H1>Titre de mon image</H1><p>Description de mon image</p><br /><img src="image.png" /></div></p>
	
	</body>
</html>
Bonjour,

Un grand merci à toi, Martic...

C'est fonctionnel partout, ou bien peut-il y avoir une incompatibilité avec... IE par exemple ?
Je sais par expérience que Internet Explorer adore poser des problèmes...

Merci encore

@+
Sujet clos
Aller à