Version imprimable
Bonsoir,
J'ai du mal à terminer un programme javascript, et je voudrais savoir comment avoir dans une fonction, le code utile pour créer des divs sur ma page avec chacun un id.
Merci de votre réponse !
Edit :
Ou à défaut, un lien vers lequel je pourrais apprendre ça.
Merci !
J'ai cherché sur les tutos javascripts et je n'ai pas trouvé :/
A+JYTCode:
2
3
4
5
6
Oh merci Sekajin !
Je vais tester ça ce soir !
Merci encore ;)
:ccool:
Grace à ta Solution j'ai pu créer mes 3 DIV, merci beaucoup !
J'ai essayé de mettre un test onMouseOver="inbulle(this.id,this.style.top,this.style.left)" sur chacun des DIV créés, pour envoyer ces trois paramètres (id, top, et left) à la fonction d'info-bulle mais l'infobulle ne reconnait ces paramètres que si ce sont des valeurs numériques, comme 150 pour LEFT par exemple.
Mon but est que l'info-bulle se place toujours au-dessus du DIV sur lequel passe la souris, et en prenant comme position la position du DIV et pas celui de la souris comme je vois souvent dans les scripts d'info-bulles.
Voilà mon code complet qui fonctionne si on le colle dans une page vide :
Mais le déplacement de l'info-bulle ne se fait pas.
Dans le body il y a d'abord un champ text :Code:
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
75
76
77
78
79
80
81
82
Sous le champ texte se trouve un div contener qui se nomme "affichage", dans lequel je crée les 3 liens DIV.Code:<input type="text" id="invite" onchange="saisie(this.value)"></input>
Dans le code JS, c'est cette ligne qui ne transmet pas les parametres à l'infobulle :
Code:aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );
Bonjour,
si tu veux que cela soit pris en compte il te faut créer la chaine avec les valeurs vouluesCitation:
aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );
[EDIT]Code:
2
Oubli des guillemets autour de this_id qui doit être une chaine!
mieux vaut utiliser une fonction car de tout façon le parser JS va transformer la chaine en fonction.
je ne vois jamais l'intérêt de construire une chaine de caractère dynamiquement qui sera évalué pour donner le corps d'une fonction
il est tellement plus simple d'écrire la fonction.
en l'écrivant directement plus de problème de ' et ", on a accès au variable de la portée, on peut aussi capter le paramètres facilement etc.
A+JYTCode:
2
3
4
Merci beaucoup pour votre aide !
Je vais vite utiliser ça.
J'ai mis des variables à la place de valeurs directes dans le onmouseOver car j'ai besoin de passer le top et left du DIV créé dynamiquement pour positionner l'infobulle.
Merci encore !!!
:plusser:
C'est pour ça que j'ai utilisé this.left et this.top. onmouseover étant une méthode du div créé this est une référence au div créé. infobute reçoit donc les valeurs de top et let du div créé.Citation:
J'ai mis des variables à la place de valeurs directes dans le onmouseOver car j'ai besoin de passer le top et left du DIV créé dynamiquement pour positionner l'infobulle.
A+JYTCode:
2
3
4
En relisant la discussion je me rend compte que cela est entièrement gérable via le CSS et la pseudo-class :hover.
Merci de la précision^^
Je n'ai pas su utiliser vos astuces, donc je reviens sur le topic :/
Voilà où j'ai placé le code, et l'infobulle ne se déplace pas :
Donc je n'ai sûrement pas su utiliser votre astuce :/Code:
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
Sinon au passage, une question comme ça, c'est qui le plus rapide à executer ou le moins lourd, c'est de faire en css ou en javascript ?
Parce que je vais utiliser mon programme dans un téléphone portable et je cherche à ce que mon programme soit léger en ressources mémoire et tout.
sorry petite erreur de ma part
je n'ai pas compris comment fonctionne ta fonction infobule mais la variable choix n'est pas définie dans cette fonction il y a donc quelque par un effet de bordCode:
2
3
4
5
6
si j'ai bien saisi l'utilisateur saisit une valeur et la fonction saisie est appelée.
en fonction de la valeur saisie cette fonction appelle affiche avec en paramètre te tableau à utiliser.
la fonction affiche construit un dis qui devra afficher des infos issues de ce tableau. or le tableau n'est pas transmit à infobule. pas plus que le choix.
je pense qu'il faut ajouter un paramètre à infobule pour lui passer le tableau.
ensuite tu as un autre problème tu crée des div en utilisant l'indice du tableau pour l'id. il est déconseiller d'utiliser ds id purement numérique (mais ce n'est très grave). ce qui pose problème c'est que si tu appelles la fonction affiche deux fois tu crées des div qui on le même id.Code:
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
il te faux trouver un moyen d'avoir des id uniques.
par exemple en utilisant la valeur de saisie
et l'utiliser ensuite dans afficheCode:
2
3
4
5
6
7
8
9
10
11
Il n'est pas très efficace d'utiliser des switch mieux vaut utiliser un tableauCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
de la sorte data[0] est un tableau de voitures data[1] un tableau d'animaux et data[2] un tableau de plantes la fonction saisie devientCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
de façon générale évite les variable globales (définies dans le script) utiliser des variable locales à tes fonctions et les paramètres.Code:
2
3
4
5
6
7
8
il te reste un dernier point
c'est que si l'utilisateur saisi deux fois la même valeur tu ajoute deux fois les divs.
pour l'éviter dans la fonction affiche avant de créer le div fait un un document.getElementById(id); si la valeur retournée est un div c'est qu'il a déjà été créé sinon il faut le créer.
A+JYT
Merci beaucoup Sekajin !
J'ai appris pas mal de trucs dans tes explications, je vais essayer de mettre tout ça en place ce soir ;)
Le but de mon programme :
Le visiteur saisie une valeur choix qui est par exemple "voiture" et le programme crée un DIV pour chaque enregistrement contenu dans le tableau des voitures.
(Un tableau fait en splitant une chaine voitures déclarée en début du script JS).
Ainsi s'il y a 3 voitures dans le tableau voitures alors chaque DIV créé affichera les enregistrements 0 et 1 du tableau voitures (c'est à dire deux infos concernant chaque voiture du tableau).
C'est seulement le onMouseOver sur le DIV qui affichera dans un infobulle les enregistrements 2, 3, et 4 du tableau voitures (le reste des infos de la voiture) mais seulement pour la voiture indiquée par le onmouseOver (d'où le id du div que je transmets).