Calcul dynamique de distance

**jockhip12** · 09/08/2012, 14h59

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

**NoSmoking** · 09/08/2012, 15h28

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

pour exemple de ce que l'on peut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Bovino** · 09/08/2012, 15h45

NoSmoking, en HTML5, tu peux avantageusement remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta charset="UTF-8">

**NoSmoking** · 09/08/2012, 15h52

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

**jockhip12** · 09/08/2012, 16h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 09/08/2012, 18h30

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.

**jockhip12** · 10/08/2012, 09h55

Bonjour, et merci encore une fois.

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Amicalement
jockhip12

**NoSmoking** · 10/08/2012, 11h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**jockhip12** · 10/08/2012, 12h14

J'ai essayé ton code, mais les infos bulles ne s'affichent pas

**NoSmoking** · 10/08/2012, 12h41

MEA CULPA, n'importe quoi le code....

j'édite pour remettre cela en ordre.

**jockhip12** · 10/08/2012, 12h56

Je suis coincé

je ne sais que je dois faire pour résoudre ce problème

**NoSmoking** · 10/08/2012, 13h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**jockhip12** · 10/08/2012, 16h04

Envoyé par NoSmoking

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**NoSmoking** · 10/08/2012, 16h10

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**jockhip12** · 10/08/2012, 16h56

ça marche pas aussi

**jockhip12** · 13/08/2012, 10h45

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

Calcul dynamique de distance [HTML 5]

HTML

Discussions similaires

Partager

Partager