Position d'une div en JavaScript

Résolu
Kraosor -  
 Kraosor -
Bonjour à tous,

J'ai une galerie à mettre en place, mais je ne peux la créer correctement car je veux mettre mes images dans une div en overflow et quand on passe en hover sur les images une bulle apparaît.
Le problème c'est que la bulle est coupée par l'overflow.
Du coup je suis parti sur du JavaScript, que je ne maîtrise pas. J'ai réussi (avec l'aide d'un ami) à permettre à une div, d'apparaître si je passe en hover sur une autre. Le problème maintenant c'est que j'aimerais avec ce code js, positionner la div qui apparaît en fonction de la div sur laquelle je suis passé en hover dessus.

Voici le code de test, je suppose que pour gérer la position de la div "cache" en fonction de la div "bloc", il faut mettre le code dans la fonction apparition, mais je ne connais pas la syntaxe pour le lui dire. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			#bloc {
				width: 100px;
				height: 100px;
				background: yellow;
				z-index: 1;
				position: absolute;
				top: 50%;
				left: 50%;
			}
			#cache {
				width: 100px;
				height: 100px;
				background: red;
				z-index: 2;
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="bloc" onMouseOver="apparition()" onMouseOut="disparition()"></div>
		<div id="cache"></div>

		<script type="text/javascript">
			function apparition() {
				var obj = document.getElementById("cache");		
				obj.style.display = 'block';
			}
			function disparition() {
				var obj = document.getElementById("cache");
				obj.style.display = 'none';
			}
		</script>
	</body>
</html>


En espérant que vous pourrez m'aider, merci d'avance.
Bonne journée,
Kraosor.

4 réponses

Réponse 1 / 4
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Hello,

Je ne comprends pas trop... Finalement tu voudrais recréer le concept de "bulle" c'est bien ça ?

Je vois que tu as correctement placé tes z-index pour que la bulle soit sur le dessus ; maintenant ton problème est qu'elle s'affiche au niveau de ta souris, c'est ça ?
0
Réponse 2 / 4
Kraosor
 
Oui en gros c'est ça, là j'ai placé deux div, la première en jaune qui correspond à une image, et la deuxième (en rouge) qui apparaît quand on passe en hover sur la jaune qui correspond à ma bulle.
Le problème maintenant c'est que je veux positionner ma div rouge (la "bulle") en fonction de ma div jaune.
0
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Pourquoi en fonction de la div jaune ?
Si tu veux que la rouge apparaissent en fonction de la jaune, à savoir quand tu passes la souris sur la jaune, je te conseille de placer la rouge au niveau de la souris (comme une info bulle normale). Comme ça tu es sûr que la rouge sera toujours visible !

Cf. ici : https://openclassrooms.com/fr/courses/411578-les-deplacements-de-la-souris/411287-les-coordonnees-de-la-souris
0
Kraosor
 
En fonction de la div pour que chaque bulles soient positionnées au même endroit. Et le problème de placer en fonction de la souris c'est que la div va bouger tout le temps alors que j'aimerais qu'elle reste toujours au même endroit.
Par exemple, quand on passe en hover sur la div jaune, la div rouge apparaît 10px au dessus de la div jaune, et ce pour toutes les div que je vais créer par la suite.
0
Réponse 3 / 4
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
À ce compte-là je te conseille de placer la div rouge dans la div jaune, et de lui faire un positionnement relatif.
0
Réponse 4 / 4
Kraosor
 
Je ne peux pas, car comme je l'ai expliqué plus haut, la div jaune est en mode overflow et les bulles sortent souvent de la zone de la div. Je suis donc obligé de séparer ma div jaune (qui représente une image) de ma div rouge (qui représente la légende).
0
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Le "mode overflow" ne signifie rien. Overflow est une propriété qui peut prendre plusieurs valeur : auto, hidden... Quelle valeur as-tu rentrée ?
0
Kraosor
 
Auto
0
Kraosor
 
Mais là en fait la question c'est surtout pour du js, savoir s'il est possible de donner la position d'une div par rapport à une autre sans lien de parenté (div dans la div)?
0
Mihawk Messages postés 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Oui la propriété offset permet de récupérer la position d'un élément... après il va falloir t'amuser à jongler.

http://www.quirksmode.org/js/findpos.html
0
Kraosor
 
J'ai réussis à m'en sortir, merci pour tes réponses
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse