Position d'une div en JavaScript
Résolu
Kraosor
-
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.
En espérant que vous pourrez m'aider, merci d'avance.
Bonne journée,
Kraosor.
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.
A voir également:
- Findpos javascript
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
4 réponses
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 ?
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 ?
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.
Le problème maintenant c'est que je veux positionner ma div rouge (la "bulle") en fonction de ma div jaune.
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
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
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.
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.
À ce compte-là je te conseille de placer la div rouge dans la div jaune, et de lui faire un positionnement relatif.
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).
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
http://www.quirksmode.org/js/findpos.html
