Calcul dynamique de distance

Version imprimable

09/08/2012, 14h59
jockhip12

1 pièce(s) jointe(s)

Calcul dynamique de distance

Bonjour,

j'ai un code qui affiche 5 icônes verticalement, et quand on passe la souris sur l'icône, une infos bulle s'affichera sur l'icône. Mais cet travail est fait statiquement, de façon que chaque info bulle est paramétré dans un le fichier css par un left de 0 px la première, 40 px la deuxième, 80 px la troisième etc ...

Maintenant je veux changer la méthode de façon dynamique, parce que les icônes ne seront pas tous affichés. il peut que seulement 3 icônes seront affichés. Le problème donc sera dans l'affichage de l'info bulle, par exemple si on affiche seulement le cinquième icône, l'info bulle sera décaler trop à droite.

Ci-joint une image qui facilite peut être mon problème, n'hésitez pas à poser vos questions.

Amicalement

Bonjour,
un extrait de ton code aurait été le bien venu ;)

pour exemple de ce que l'on peut faire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
ul{
  list-style:none;
}
li span{
  display:none;
  border:1px solid #e0e000;
  padding:5px;
  margin-left:10px;
}
li:hover span{
  position:relative;
  display:inline;
}
</style>
</head>
<body>
<ul>
  <li><img src="http://www.developpez.net/forums/images/buttons/edit.gif"><span>Edition du message</span></li>
  <li><img src="http://www.developpez.net/forums/images/buttons/quote.gif"><span>Citation du message</span></li>
</ul>
</body>
</html>

09/08/2012, 15h45
Bovino

NoSmoking, en HTML5, tu peux avantageusement remplacer

Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

par

Code:

<meta charset="UTF-8">

;)
09/08/2012, 15h52
NoSmoking

certes il faut que je me décides à changer ma trame, idem pour <style></style>, <script></script> d'ailleurs :ccool:

Citation:

Envoyé par NoSmoking

Bonjour,
un extrait de ton code aurait été le bien venu ;)

Merci pour votre réponse, ci dessus le code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
#roboho1, #roboho2, #roboho3, #roboho4, #roboho5, #roboho6, #roboho7{
	position:absolute;
	top:-30px;
	left:0px;
	display:none;
}
#roboho2{left:40px;}
#roboho3{left:80px;}
#roboho4{left:120px;}
#roboho5{left:120px;}
#roboho6{left:170px;}
#roboho7{left:225px;}
 
 
.acc_div{
	width:239px;
	position:absolute;
	top:38px;
	left:-83px;
	background:url(../images/ul_bg.jpg) repeat-x bottom #ebf3f8;
	border:1px solid #b0cfe2;
	border-radius:0px 0px 10px 10px;
	-moz-border-radius:0px 0px 10px 10px;
	padding:5px;
	display:none;
}
.acc_div li{
	padding:5px 10px;
	font-size:13px;
	color:#6a6a6a;
	font-weight:bold;
}
.acc_div li a,.acc_div li a:visited{
	color:#012447;
	font-size:11px;
}
.acc_div ul li a:hover{ color:#54a315;}
.wrap{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
	/*z-index:1000;*/
}

Et le jQuery pour l'affichage de l'info bulle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
<script type="text/javascript">
 
 
	$(function() {
		$("#tabs").tabs();		
	});
 
jQuery(document).ready(function() {
 
/**/
   $("a.link1").mouseover(function () {
    $("#roboho1").show("fast");
    });
 
	$("a.link1").mouseout(function () {
    $("#roboho1").hide("fast");
    });
 
  	$("a.link2").mouseover(function () {
    $("#roboho2").show("fast");
    });
 
	$("a.link2").mouseout(function () {
    $("#roboho2").hide("fast");
    });
 
  	$("a.link3").mouseover(function () {
    $("#roboho3").show("fast");
    });
 
	$("a.link3").mouseout(function () {
    $("#roboho3").hide("fast");
    });
  	$("a.link4").mouseover(function () {
    $("#roboho4").show("fast");
    });
 
	$("a.link4").mouseout(function () {
    $("#roboho4").hide("fast");
    });
/**/
 
 
 
 
});

Et le Script HTML est comme le suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<div class="roboimg marTB20">             
 
 
                <div id="roboho1" style="display: block; "><a href="#"><img src="http://www.ressource.com/default/images/bag_chk_1.png" alt=""></a></div>
                <a class="link1" href="#"><img src="http://www.ressource.com/default/images/abr1.png" alt=""></a>
 
 
                                  <div id="roboho2" style="display: none; "><a href="#"><img src="http://www.ressource.com/default/images/bag_chk2.png" alt=""></a></div>
                <a class="link2" href="#"><img src="http://www.ressource.com/default/images/abr2.png" alt=""></a>
 
 
              <div class="clear"></div>
            </div>

Qu'est ce que je dois changer dans mon code pour qu'il fonctionne correctement ?

Il faut que j'utlulise la balise ul ?
Merci por votre aide.

Amicalement
jockhip12

09/08/2012, 18h30
NoSmoking

<humour>

Citation:

Qu'est ce que je dois changer dans mon code pour qu'il fonctionne correctement ?

Tout!
</humour>
bon trêve de plaisanterie!

Questions :
- La première question est: est ce que tu as vraiment besoin d'utiliser javascript pour afficher les "bulles"?
- La deuxième question est: est ce que les liens des "bulles" sont actifs, on voit des balises A à l'intérieur, mais vide de lien?

Remarques :
- Une première remarque, observe la structure de l'exemple que je t'ai fourni.
- Une deuxième remarque, non on la fera pus tard, elle concerne le code javascript.
10/08/2012, 09h55
jockhip12
Bonjour, et merci encore une fois.

Citation:

Envoyé par NoSmoking

- est ce que tu as vraiment besoin d'utiliser javascript pour afficher les "bulles"?

-> Non rien n'est obligatoire, il faut que ça marche c'est tout :mrgreen:

Citation:

Envoyé par NoSmoking

- La deuxième question est: est ce que les liens des "bulles" sont actifs, on voit des balises A à l'intérieur, mais vide de lien?

J'ai pas compris ta question, ça veut dire quoi actif ? En fait le code de lien est comme le suit :
Code:

1 2 3 <a class="link1" href="#"> </a>
-> C'est vide normalement, je sais pas mais c'est pas moi qui a développé le code mais il faut que je le change :roll:

Amicalement
jockhip12

si tu n'utilises pas javascript, pourquoi ne pas essayer ce que je t'ai indiqué la première fois ?

Mettre un lien vide qui ne sert à rien, cela ne sert à rien justement, si l'on excepte IE6, tous les éléments peuvent recevoir un hover.

Je te remets un exemple avec un affichage sur la même ligne, qui devrait être plus proche de ce que tu cherches à faire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
ul{
  margin-top:5em;      /* pour voir les bulles */
  list-style:none;
}
ul li{
  display:inline;
  cursor:pointer;
}
li span{
  position:absolute;  /* autorise le placement hors flux */
  display:none;       /* cache au depart */
  padding:5px;        /* marge interieure*/
  font-size:1em;      /* pour un effet propre */
  margin-top:-2.5em;  /* decalage vertical */
  margin-left:-3em;   /* decalage horizontal */
  border:1px solid #FF9933;
  background-color:#FFFFCC;
}
li:hover span{
  display:inline;
}
</style>
</head>
<body>
<ul>
  <li><img src="http://www.developpez.net/forums/images/buttons/edit.gif"><span>Edition du message</span></li>
  <li><img src="http://www.developpez.net/forums/images/buttons/quote.gif"><span>Citation du message</span></li>
</ul>
</body>
</html>

on peut faire un peu plus propre en mettant une classe aux SPANs

10/08/2012, 12h14
jockhip12

J'ai essayé ton code, mais les infos bulles ne s'affichent pas :cry:
10/08/2012, 12h41
NoSmoking

MEA CULPA, n'importe quoi le code....:oops: j'édite pour remettre cela en ordre.
10/08/2012, 12h56
jockhip12

Je suis coincé :( je ne sais que je dois faire pour résoudre ce problème

Replaces tes éléments dans la structure que je t'ai fourni.

SURTOUT, vires tout le CSS lié qui ne fera que te compliquer la tâche.

Tu devrais obtenir un truc du style

Code:

1
2
3
4
<ul>
  <li class="link1"><img src="http://www.ressource.com/default/images/abr1.png" alt="abr1.png"><span id="roboho1" class="bulle"><img src="http://www.ressource.com/default/images/bag_chk1.png" alt="chk_1.png"></span></li>
  <li class="link2"><img src="http://www.ressource.com/default/images/abr2.png" alt="abr2.png"><span id="roboho2" class="bulle"><img src="http://www.ressource.com/default/images/bag_chk2.png" alt="bag_chk2.png"></span></li>
</ul>

Citation:

Envoyé par NoSmoking

Code:

1
2
3
4
<ul>
  <li class="link1"><img src="http://www.ressource.com/default/images/abr1.png" alt="abr1.png"><span id="roboho1" class="bulle"><img src="http://www.ressource.com/default/images/bag_chk1.png" alt="chk_1.png"></span></li>
  <li class="link2"><img src="http://www.ressource.com/default/images/abr2.png" alt="abr2.png"><span id="roboho2" class="bulle"><img src="http://www.ressource.com/default/images/bag_chk2.png" alt="bag_chk2.png"></span></li>
</ul>

C'est quoi le contenu de la classe bulle ?

la même chose que ce qu'il y a pour le style pour li span

Code:

1
2
3
4
5
6
7
8
9
10
.bulle{
  position:absolute;  /* autorise le placement hors flux */
  display:none;       /* cache au depart */
  padding:5px;        /* marge interieure*/
  font-size:1em;      /* pour un effet propre */
  margin-top:-2.5em;  /* decalage vertical */
  margin-left:-3em;   /* decalage horizontal */
  border:1px solid #FF9933;
  background-color:#FFFFCC;
}

c'est l'un ou l'autre

10/08/2012, 16h56
jockhip12

:( ça marche pas aussi :(
13/08/2012, 10h45
jockhip12

Le mouseenter et mouseout ne peuvent pas être une solution ?