Balise <dt> (html) dans <select><option>

Version imprimable

19/03/2012, 08h59
GYK

Balise <dt> (html) dans <select><option>

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
19/03/2012, 10h35
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.
19/03/2012, 10h49
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.
19/03/2012, 16h01
transgohan

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

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:

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>

19/03/2012, 20h01
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.
20/03/2012, 08h22
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.

Code:

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

20/03/2012, 11h37
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.
20/03/2012, 11h49
vorace

Citation:

Envoyé par 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.

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).
20/03/2012, 13h08
transgohan

Il parle sans doute des retours à la ligne en parlant d'espace ?
20/03/2012, 13h35
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à?
20/03/2012, 13h51
Celira

Tu as probablement un problème de quotes et de doubles quotes : :faq: Pourquoi mes valeurs de champs textes de formulaires sont-elles coupées après le premier espace ?
20/03/2012, 16h57
GYK

Bonjour Celira,

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

Citation:

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.
20/03/2012, 17h19
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:

1 2 $texte = "j'aime developpez.com"; echo "<span title='$texte'>developpez.com</span>";
sera interprété en HTML comme

Code:

<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.
20/03/2012, 17h49
GYK

Bonjour Bovino,

Comme je l'ai précisé ma variable ne contient absolument aucune cote.
20/03/2012, 18h05
transgohan

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

Code:

<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.
20/03/2012, 18h13
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 ?

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
 
<?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";
?>

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

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...