11521 sujets

JavaScript, DOM et API Web HTML5

Affichage d'une div au survol d'un lien

Bonjour,

Je cherche à faire une présentation du style Facebook au niveau des boxs qu'ils affichent au survol du titre d'une page ou d'un pseudo.

A ce titre, et contrairement à eux, afin de ne pas surcharger mon pauvre serveur, j'ai placé toutes les boxs nécessaires sur la page à la fin de mon code.

Voici ce que tout cela donne :

Lien survolé :
<a class="user" data-pid="PID">test</a>

Par la suite il y aura un href, mais c'est autre chose ^^. Ce code est donc présent un peu partout sur la page.

Box :
<body>
[...]
<div id="box" style="display:none;">
	<div id="box_user">
		<div class="box_user" id="box_userPID">
		</div>
	</div>
</div>
</body>


Comment puis je afficher la div portant l'id "box_user" (avec à sa suite le pid voulu) au survol du lien ayant un data-pid spécifique ? Je ne vois absolument pas comment faire cela en Javascript (par une reprise des positions en passant par position absolute) ou par CSS d'une manière qui m'est totalement inconnue...

Merci par avance pour toutes vos idées/solutions!
Hello,

Le plus simple (et c'est très simple à mettre en place), c'est que le contenu a afficher soit situé à l'intérieur du conteneur de l'information qui doit le faire apparaître au survol. Ton conteneur, masqué au départ, sera ainsi affiché via JS lors du survol de l'élément de ton choix, et positionné (avec top, left, etc.) de façon absolue par rapport à son parent (lui même obligatoirement positionné également).

Smiley smile
Salut,

Merci pour la réponse très rapide!
Comment ca le parent lui-même positionné ? en relative??

Si j'ai bien compris l'idée, cela va permettre de survoler le lien, voir la div, et pouvoir donc également survoler la div du fait qu'elle est à l'intérieur du html du lien, c'est cela?
Re,
Pas de souci Smiley smile
florian26 a écrit :
Comment ca le parent lui-même positionné ? en relative??

Ouaip'
florian26 a écrit :
Si j'ai bien compris l'idée, cela va permettre de survoler le lien, voir la div, et pouvoir donc également survoler la div du fait qu'elle est à l'intérieur du html du lien, c'est cela?

Oui, mais en fait le fait que le tout soit positionné et structuré ainsi sert surtout à pouvoir positionner le bloc par rapport à son parent (le positionnement absolu se fait alors par rapport à son plus proche parent positionné), voilà tout Smiley smile
Modifié par audrasjb (15 Sep 2014 - 10:26)
Ok, donc en gros il me faudrait quelque chose du genre :
<span style="position:relative;"><a class="user">NOM</a><div id="box" style="position:relative;">CONTENU</div></span>


Ce serait donc ca ? (en mettant le css où il doit aller bien sur Smiley cligne )
Re,

Ta division devrait avoir un positionnement absolu et géré avec du top, left, etc., suivant l'endroit où tu veux l'afficher dans la page (par rapport à son élément parent, donc).

Par contre attention à ton balisage : un élément span (de type en-ligne) ne devrait normalement pas contenir un élément div (de type bloc).
Modifié par audrasjb (15 Sep 2014 - 12:22)
Concernant le balisage, l'élément div est temporaire (le temps du survol), ensuite je le déplace dans une div spécifique et invisible en fin de page... ce mauvais balisage est il donc important mine de rien même si c'est temporaire?

Par ailleurs je dois faire la même chose avec un textarea, cependant il n'accepte pas une telle chose (en transformant le textarea en div, je peux)... comment y remédier ? ou comment créer un textarea compatible ? Smiley ohwell

Merci beaucoup par avance!
Modifié par florian26 (15 Sep 2014 - 17:09)
Sujet clos
Aller à