Discussion :

[GYK]

Bonjour,
J'ai créé une liste déroulante, et j'aimerais à chaque ligne au survole du curseur afficher une info supplémentaire via une infobulle.
L'un comme l'autre marchent bien individuellement, mais je ne sais pas comment les imbriquer.
Avez vous une idée.
Merci

[transgohan]

Il n'existe pas d'évènement JS sur la balise option.
Tu n'en as que sur la balise select.

Je te conseille donc de plutôt travailler sur l'évènement onchange pour afficher une infobulle.

Sinon je ne vois pas tellement le rapport avec la balise dt, ce n'est pas fait pour afficher une infobulle dynamique.

[GYK]

Bonjour transgohan,

Merci de ta réponse.
Je viens de regarder la fonction onchange et il est précisé Bulle : Non

Pour la balise <dt>, et l'infobulle je l'utilise déjà mais pas dans un select et ça marche très bien.

[transgohan]

On peut en savoir plus sur ce que tu appelles une infobulle et voir ton système ?

[GYK]

Ce que j'appelle une infobulle c'est un message d'information qui s'affiche à proximité du curseur et qui dans mon cas sont les différente lignes de ma liste déroulante.

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<style>
.infobulle{
	position: absolute;
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial;
	font-size: 10px;
	background-color: #EAD792;
	color: #50410E;
 
}
</style>
.
.
 <script language="javascript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e) {
  if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
    if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
    }
    else { // Modif proposée par TeDeum, merci à   lui
    if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
    } else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
         }
    }
  }
}
 
function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; // dés que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.
//-->
</script>
.
. 
<div id="curseur" class="infobulle"></div>
.
.
<select...>
.
.
.
<?php
echo '<option value="'.$Z[0].';'.$Z[2].';'.$Z[4].';'.$resultat[5].';'.$rZ[6].';'.$Z[7].';'.$Z[8].'">'	?>
            <dt style=" cursor:pointer" onmouseover="montre('<?php echo "<font face=tahoma size=1 color=#6F3A00 weight=bold><b> $info</b></font>"  . '<BR/>' . addcslashes(nl2br($Nom), "'\r\n\\"); ?>');" onmouseout="cache();"></dt><?php echo '</option>'."\n"; ?>
.
.
.
</select>

[transgohan]

Bon donc c'est bien ce que je disais alors j'étais pas à l'ouest...
L'élément option ne permet pas ce fonctionnement car il ne permet pas l'insertion de balise HTML ainsi que d'évènements JS.
Il faut donc intervenir sur l'élément select, et là pour cibler une balise option particulière il faut travailler au clic de souris et non au positionnement.

Donc réaliser une fonction intermédiaire pour afficher ton infobulle sur l'évènement onchange du select en affichant telle ou telle infobulle en fonction de l'option sélectionnée.
C'est purement un problème Javascript et aucun PHP n'intervient là dedans.
Tu es donc dans le mauvais forum.

[GYK]

Bonjour et merci de ta réponse.

Faire ça au niveau du select, n'a pour moi aucun intérêt, c'est justement cet info qui dira de cliquer sur telle ou telle ligne.

[vorace]

Code :

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

1
2
3
4
<select name="liste" >
<option title="info" value="1" >valeur 1</option>
...
</select>

[GYK]

Bonjour Vorace,

J'y ai pensé mais ça ne marche que sur des textes sans espaces.
Or moi c'est du littéral que je veux et dans ce cas l'infobulle s’arrête à la fin du premier mot.

[vorace]

Bonjour Vorace,

J'y ai pensé mais ça ne marche que sur des textes sans espaces.
Or moi c'est du littéral que je veux et dans ce cas l'infobulle s’arrête à la fin du premier mot.

je viens de tester avec une phrase entière et ça marche...toute la phrase apparait et pas seulement un mot (sous ie9 et ff 11.0).

[transgohan]

Il parle sans doute des retours à la ligne en parlant d'espace ?

[GYK]

Non je parle bien du texte lui même, et quand je l'affiche seul le premier mot s'affiche.
Pour ce texte j'utilise une variable.
Peut-être que cela vient de là?

[Celira]

Tu as probablement un problème de quotes et de doubles quotes : Pourquoi mes valeurs de champs textes de formulaires sont-elles coupées après le premier espace ?

[GYK]

Bonjour Celira,

Ma variable ne contient aucune cote.
Le lien que tu me donne précise:

Dans ce dernier exemple, si la variable $nom comporte des espaces, le navigateur n'interprétera pas le reste de la chaîne de caractères.

Ce qui est le cas de la mienne puisque c'est une phrase.

[Bovino]

Apparemment, tu n'as pas vraiment compris ce qui est dit dans le lien donné par Celira...

Le navigateur n'interprètera pas le reste de la phrase parce que l'attribut n'est pas entouré de quotes !
Donc ce que Celira voulait te dire, c'est que si ta phrase contient les mêmes quotes que celles servant à entourer la valeur de l'attribut, ça va poser problème, pas parce que tu ne peux pas mettre une phrase dans l'attribut title mais parce que tu l'as mal codé.
Exemple :

Code :

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

1
2
$texte = "j'aime developpez.com";
echo "<span title='$texte'>developpez.com</span>";

sera interprété en HTML comme

Code html :

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

<span title='j'aime developpez.com'>developpez.com</span>

et tu vois bien qu'il y a un problème avec les quotes qui coupent la valeur de l'attribut.

Bref, en faisant attention, il est tout à fait possible de mettre une phrase entière dans un attribut title.

[GYK]

Bonjour Bovino,

Comme je l'ai précisé ma variable ne contient absolument aucune cote.

[transgohan]

Et ton attribut ?
Car si aucune quote on obtient ceci :

Code html :

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

<span title=ceci est un title>test</span>

Et là seul le premier mot sera pris en compte, les autres étant interprétés comme des attributs de la balise span.

[Celira]

Histoire de gagner du temps et d'éviter de tourner en rond, tu pourrais peut-être nous donner le bout de code qui écrit ta liste déroulante et ses options ?

[GYK]

Code PHP :

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
 
<?php
			echo '<select class="B_R" size=1 name=liste>'."\n";  
 
		   	mysql_select_db($database_connection, $connection);
			$SQLsel = "SELECT * FROM Mon_fichier WHERE ID = '$ID  ORDER BY ID ASC " ;					  
			$ressel = mysql_query($SQLsel, $connection) or die('Echec de la requete '.$SQLsel.' : '.mysql_error());
			$coul = 1; 
			while ($resultat = mysql_fetch_row($ressel))	
			{
 
			$Nom = $resultat[2];
			$ID = $resultat[0];
 
			$j = substr($resultat[4],6,2);
			$m = substr($resultat[4],4,2);
			$a = substr($resultat[4],0,4);
 
			$info = "Debut de mon texte " .$j ."-".$m."-".$a . " milieu de mon texte " . $resultat[8] . " fin de mon texte " ;
			echo '<option '.$class.' value="'.$resultat[0].';'.$resultat[2].';'.$resultat[4].';'.$resultat[5].';'.$resultat[6].';'.$resultat[7].';'.$resultat[8].'">'?>	
            <?php echo $Nom ; '</option>'."\n"; ?>
            <?php	
 
			echo '</select>'."\n";
?>

[Celira]

En supposant que la variable $info soit le texte à afficher dans l'info-bulle, quelque chose comme ça devrait fonctionner :

Code :

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

1
2
3
4
$info = "Debut de mon texte " .$j ."-".$m."-".$a . " milieu de mon texte " . $resultat[8] . " fin de mon texte " ;
echo '<option '.$class.' value="'.$resultat[0].';'.$resultat[2].';'.$resultat[4].';'.$resultat[5].';'.$resultat[6].';'.$resultat[7].';'.$resultat[8].'" title="'.$info.'">';
echo $Nom ; 
echo '</option>'."\n";

avec éventuellement un appel de htmlentities sur $info pour éviter les problèmes si il ya des quotes dans le texte...