11548 sujets

JavaScript, DOM et API Web HTML5

Popup avec ascenseur

Bonjour à tous,

Je cherche à mettre sur mon site une popup (div) qui s'affiche lorsque le curseur de la souris passe sur une image.

J'aimerais que cette popup ait un ascenseur vertical, au cas ou son contenu soit trop long.

En essayant de la développer, je me suis vu confronté à 2 problèmes :

1°) Sur firefox : dès que je passe le curseur de la souris sur l'ascenseur vertical de la popup, firefox active la propriété onmouseout de la popup !
2°) Je ne sais pas comment faire disparaitre la popup lorsque la souris ne passe pas dessus. (Ex : je mets le curseur sur mon image, je sors de l'image mais sans aller sur la popup.)

Voici mon code :


<html>
	<head>
		<script>
			function showdiv() {
				tooltip.style.top = "50px"
				tooltip.style.left = "600px"
				tooltip.style.width = "150px"
				tooltip.style.height = "200px"

				tooltip.style.visibility="visible"
			}

			function hidediv() {
				tooltip.style.visibility="hidden"
			}
		</script>

		<style>
			body {
				text-align: center
			}

			.popper
			{
				margin: 0;
				padding: 0;

				position : absolute;
				visibility : hidden;
				overflow: auto;

				background-color: #BBBBBB;
				border: 1px solid black;
				color: white;				
			}
		</style>
	</head>
	<body>

		<div id="tooltip" class="popper" onmouseout="hidediv()">
			Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />Ceci est un test<br />
		</div>

		<a href="#" onmouseover="showdiv()">TEST</a>

	</body>
</html>


Je me suis bien arraché les cheveux avant de venir poster ici, même si ça ne se voit pas car j'ai épuré mon code pour ne laisser que l' "utile".

Merci d'avance pour votre aide.
Modifié par donnie (24 Jan 2007 - 17:08)
ouch! ça vat être dur...
Là seul solution que je vois est un casse tête...
Ce serait au lieu de faire disparaitre ta tooltip avec onmouseout sur le popup, la faire disparaitre en rajoutant des élements autour de ton popup avec onmouseover = hidediv. Mais bon c'est super tordu, ça fait quatre élement a ajouter (en position:absolute) autour de ta div...
Sinon une autre solution, c'est de ne pas faire comme ça, et d'utiliser une tootip intelligente, c'est a dire qui ce met au bonne endroit celon le contenu et la place du lien. Par exemple si ton lien est en bas ta tooltip par vers le haut, si ton lien et droite ta tooltip par vers la gauche... etc, regarde sur cette page: http://www.xito.com.mx (en espagnol) les photos du portafolio ont un tooltip qui fonctionne comme ça, il faut vraiment que le contenu du tooltip soit trés grand pour que ça ne marche pas. Dans les exemples les photos sont petites, mais j'ai essayé avec plus de texte est ça marche trés bien.
Merci beaucoup de ta réponse !

J'ai malheureusement déjà une telle popup "intelligente" dans mon application.

Il arrive en fait que le contenu de la popup soit tellement long que la popup ne puisse pas être affichée entièrement sur l'écran.

J'avais donc pensé à lui rajouter un scroll, mais me suis confronté à ces 2 problèmes. Smiley decu

Je pense que je vais donc tronquer le contenu de la popup, dès qu'il atteint une taille trop élevée...
Modifié par donnie (24 Jan 2007 - 18:04)
Je pense que c'est mieux, je ne sais pas si c'est trés intuitif aprés un onmouseover d'aller sur un scroll, ce que tu peux faire c'est soit avec php ou avec js, rajouter un "(...)" si c'est un lien les visiteurs comprendront qu'il faut clicker pour lire plus. De tout façon les tooltip ce n'est pas pour lire beaucoup c'est juste un aperçu, par contre su te veux réelment faire un popup js alors a ce moment là il faut le faire avec onclick, et là tu peux mettre tout ton contenu avec un scroll et un lien pour le fermer.
Oui ça marcherait avec un onclick, mais mes utilisateurs ont l'habitude du onmouseover et seraient un peu perdus.

Va pour le texte tronqué Smiley smile

Merci encore de ton aide.
Sujet clos
Aller à