11548 sujets

JavaScript, DOM et API Web HTML5

Positionnement div/div

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>


Pour simplifier, la question c'est surtout pour savoir s'il est possible de donner la position d'une div par rapport à une autre sans lien de parenté (div dans la div)?

En espérant que vous pourrez m'aider, merci d'avance.
Bonne journée,
Kraosor.
Le javascript est inutile pour réaliser ce que tu veut faire:



<!-- solution CSS 1 -->

<div id="bloc">
  <div id="cache"></div>
</div>

<!-- solution CSS 2 -->

<div id="bloc"></div>
<div id="cache"></div>






/* Solution CSS 1 */

div#bloc > div#cache
{
  display: none;
}

div#bloc:hover > div#cache
{
  display: block;
}

/* Solution CSS2 */

div#bloc + div#cache
{
  display: none;
}

div#bloc:hover + div#cache
{
  display: block;
}


Le JS c'est bien si tu veut mettre un effet (fade in/out, etc..)

De plus, c'est "cache" qui devrai etre en position: absolute
Modifié par JJK801 (07 Jun 2012 - 22:17)
Bonsoir JJK801,

Merci de ta réponse. J'ai utilisé le JavaScript car j'ai mis (dans mon site) mes images dans une div soumise à un overflow:auto, et donc, comme certaines bulles sortent de l'overflow on les voit pas.

http://img849.imageshack.us/img849/9651/exempleprecis.jpg

Voilà l'exemple plus concret que celui proposé avec mes div jaunes et rouges.
Le fond jaune délimite la div qui contient les images et donc où l'overflow est appliqué. Le problème maintenant c'est que j'aimerais que mes bulles (la partie bleu coupée au-dessus de la première image) soient positionnées toujours à la même place par rapport à l'image survolée par la souris. C'est pour ça que j'ai utilisé le JavaScript, afin d'essayer de positionner mes bulles par rapport à l'image survolée (sachant que sur mon impr.écran les bulles sont dans la même div, mais elles seront déplacées dans une div séparée comme dans le 1er code que j'ai envoyé).
Modifié par Kraosor (07 Jun 2012 - 23:26)
Je pense que c'est plus ta propriété d'overflow qui te pose problème que le reste.

Kraosor a écrit :

Le problème maintenant c'est que j'aimerais que mes bulles (la partie bleu coupée au-dessus de la première image) soient positionnées toujours à la même place par rapport à l'image survolée par la souris


Je comprends pas bien, tu veut que la bulle soit placé par rapport a l'image ou toujours a la même position dans le bloc jaune?

Car si tu les positionne par rapport a l'image, l'overflow te posera toujours probléme
Modifié par JJK801 (08 Jun 2012 - 09:27)
Non par rapport à l'image c'est pour ça que je suis parti sur du js pour séparer les div, ainsi je peux les appeler avec leur id et donc l'overflow ne m'embête plus, le problème maintenant c'est la position de mon objet.

N'y a-t-il pas moyen de dire à ma bulle que x= -10 px du bloc jaune par exemple? Il faudrait créer une variable avec la position de mon image et dire que ma bulle se positionne en fonction de la position de mon image, mais je ne sais pas comment faire :s
Bonjour,

Une piste ? ...
- récupérer le top de l'image survolée,
- récupérer le width de l'image survolée,
- déterminer une position d'affichage de la bulle en conséquence
lddsoft a écrit :
Bonjour,

Une piste ? ...
- récupérer le top de l'image survolée,
- récupérer le width de l'image survolée,
- déterminer une position d'affichage de la bulle en conséquence


+1

il faut passer par les styles calculés dans ce cas. Mais je continue a penser qu'une solution CSS doit être envisageable...
JJK801 a écrit :
Mais je continue a penser qu'une solution CSS doit être envisageable...
Le problème de CSS, c'est l'accessibilité. Outre le fait que ça ne correspond pas à l'idée de séparation contenu/aspect/comportement.

JS est préférable.
Niveau accessibilité je doit être un peu largué, car dans ma vision des choses:


<div>
  <img href="http://wwwsitedemachintruc" alt="sitedemachintruc" />
  <div>Visitez le super site de machin truc!</div>
</div>
<div>
  <img href="http://wwwsitedebidule" alt="sitedebidule" />
  <div>Visitez le super site de bidule!</div>
</div>


Me parraît bien plus cohérent que:


<div>
  <img href="http://wwwsitedemachintruc" alt="sitedemachintruc" />
  <img href="http://wwwsitedebidule" alt="sitedebidule" />
</div>
<!-- Autres balises HTML -->
<div>Visitez le super site de machin truc!</div>
<div>Visitez le super site de bidule!</div>


Mais on est assez loin de mon domaine de compétence, donc je suis peut être loin de la vérité...
Je vais essayer de me pencher sur ce que tu me propose Iddsoft.
Le problème avec ce que tu propose JJK801, c'est que si tu mets une propriété overflow sur ta première div, alors ce qui va dépasser de celle-ci va être coupé, et dans mon cas mes bulles sortent de la div, je suis donc obligé de les séparer.

Merci pour vos conseils en tout cas, je me concentre là dessus ce soir et vous tiens au courant.
Salut, voici une solution. J'ai fait en sorte d'associer les div cacher au déplacement du curseur.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<script type="text/javascript">
function deplace1(e) {
var obj = document.getElementById("cache1");
obj.style.top  = (((document.all) ? event.clientY : e.pageY)-50)+"px";	
obj.style.left = (((document.all) ? event.clientX : e.pageX)+10)+"px";
}

function deplace2(e) {
var obj = document.getElementById("cache2");
obj.style.top  = (((document.all) ? event.clientY : e.pageY)-50)+"px";	
obj.style.left = (((document.all) ? event.clientX : e.pageX)+10)+"px";
}

window.onload = function () {
document.getElementById("bloc1").onmousemove = deplace1;
document.getElementById("bloc1").onmouseover = function () {document.getElementById("cache1").style.display = 'block';};
document.getElementById("bloc1").onmouseout  = function () {document.getElementById("cache1").style.display = 'none';};

document.getElementById("bloc2").onmousemove = deplace2;
document.getElementById("bloc2").onmouseover = function () {document.getElementById("cache2").style.display = 'block';};
document.getElementById("bloc2").onmouseout  = function () {document.getElementById("cache2").style.display = 'none';};
}
</script>
		
<style type="text/css">
#bloc1 {
		width: 100px;
		height: 100px;
		background: yellow;
		z-index: 1;
		position: absolute;
		top: 50%;
		left: 33%;
}

#bloc2 {
		width: 100px;
		height: 100px;
		background: yellow;
		z-index: 1;
		position: absolute;
		top: 50%;
		left: 66%;
}

#bloc1, #bloc2 {
		line-height : 100px;
		text-align : center;
		cursor : pointer;
}

#cache1 {
		width: 100px;
		height: 100px;
		background: red;
		z-index: 2;
		display: none;
}

#cache2 {
		width: 100px;
		height: 100px;
		background: green;
		z-index: 2;
		display: none;
}

#cache1, #cache2 {
		position : absolute;
}
</style>
</head>

<body>
	<div id="bloc1">ici</div>
	<div id="bloc2">la</div>
	<div id="cache1"></div>
	<div id="cache2"></div>
</body>
</html>
Merci beaucoup tournikoti, j'avais fais de mon côté des essais pour que ma bulle suive la souris et ça marchait beaucoup moins bien, du coup je prend ton code!

Merci!

ps: je vous tiens au courant dans la progression du site, je dois encore me concentrer sur un petit problème au niveau de ma barre de naviguation
Sujet clos
Aller à