Sujet Précédent Sujet Suivant

Position d'une div en JavaScript

Résolu/Fermé
Kraosor - 7 juin 2012 à 13:44
 Kraosor - 11 juin 2012 à 23:42
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
7 juin 2012 à 14:28
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
7 juin 2012 à 14:39
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
7 juin 2012 à 14:41
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
7 juin 2012 à 15:55
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
7 juin 2012 à 16:46
À 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
7 juin 2012 à 17:01
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
7 juin 2012 à 17:07
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
7 juin 2012 à 17:09
Auto
0
Kraosor
7 juin 2012 à 19:30
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 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
8 juin 2012 à 09:23
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
11 juin 2012 à 23:42
J'ai réussis à m'en sortir, merci pour tes réponses
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses
[Javascript] Tables de Multiplication
pigeonus -
hachim -

6 réponses