Un peu de javascript =)

[Rockleader]

Je n'ai pas la prétention d'avoir des connaissances ne javascript, j'essaie seulement de "bidouiller" quelques trucs manière de voir les principales fonction existantes.

J'ai fais quelque chose de ce style:

[CODE][/CODE]

Ainsi au passage de ma souris sur l'image une fenêtre de type windows s'ouvre et écrit le texte au passage.


J'aimerais savoir s'il était possible de faire cela plutôt sous la forme d'info bulle sans forcément ouvrir une fenêtre spéciale pour écrire le texte.
En fait possible oui, mais j'aimerais savoir si une fonction est pré écrite pour ce genre de chose.

Merci à vous !


EDIT au passage, je remarque après différents test que même la fonction alert est pas top, elle ne peut pas afficher de texte trop long.

[XENSECP]

Je pense qu'il faut créer un bloc "info bulle" et activer le display (onmouseover) et le désactiver (onmouseout ou un truc comme ça).

Quant à la position, tu peux connaître la position de la souris dans la fenêtre donc...

[Rockleader]

Ben je ne pense pas, onmouseover et onmouseout semble tout de même être deux actions opposées.

Quant à la position, tu peux connaître la position de la souris dans la fenêtre donc...

Là je vois pas ce que tu as voulu dire désolé.



Encore désolé si ce que je demande parait stupide, je ne fais qu'y jeter un simple coup d’œil pour le moment sans vraiment avoir lu de cours si ce n'est quelques infos du sdz.

[XENSECP]

C'est loin d'être stupide mais je connais pas de fonction "intégrée" qui le fait.

Donc tu dois créer un

qui est à la base hidden et au mouseOver tu le montres. Sauf que l'idée de l'info bulle c'est de ne s'afficher que quand tu as la souris dessus donc au mouseOut tu re-cache le div.

Tu vois?

[fatal_error]

Je pense qu'il faut créer un bloc "info bulle" et activer le display (onmouseover) et le désactiver (onmouseout ou un truc comme ça).

c'est exactement ca . Apres reflexion il faut pe s'aider de mousemove (parce que ptet bien que onmouseover ne trigger que lorsqu'on est out et qu'on passe sur la zone, pas quand on bouge au sein de la zone)

Quant à la position, tu peux connaître la position de la souris dans la fenêtre donc...
Là je vois pas ce que tu as voulu dire désolé.

ben l'info bulle elle se montre genre un peu en dessous de la souris ou qqch dans le genre. Donc il faut connaitre la position de la souris.

alert c'est un peu différent parce que par défaut (si mes souvenirs sont bons) ca affiche une fenetre au milieu de la page. Son equivalent en javascript/css, c'est la thickbox (et non pas la tooltip).

qqch dans les lignes

Code: Tout sélectionner





#target{
   position:absolute;
   top:300px;
   left:500px;
   width:100px;
   height:100px;
   background-color:#eeeeee;
   border:1px solid black;
}
#tooltip{
   display:none;
   position:absolute;
}


function debug(str){
   document.getElementById('junk').innerHTML+=str+'';
}
window.onload=function(){
   var node=document.getElementById('target');
   var tooltip=document.getElementById('tooltip');
   node.onmouseover=function(e){
      debug('onmouseover');
      updateTooltipPosition(e);//we move the tooltip before displaying it
      showTooltip();
   }
   node.onmouseout=function(e){
      debug('onmouseout');
      hideTooltip();
   }
   node.onmousemove=function(e){
      updateTooltipPosition(e);
   }
   
   function showTooltip(){
      tooltip.style.display='inline';
   }
   function hideTooltip(){
      tooltip.style.display='none';
   }   
   function updateTooltipPosition(e){
      tooltip.style.left = e.clientX+10+'px';
      tooltip.style.top = e.clientY+10+'px';      
   }
};



Mouse meeeee

yo, I head you want me to mouse you so I moused your mouse in your mouse zone.







[Rockleader]

Je crois que je vais devoir regarder plus profond dans les scripts pour comprendre parce que là c'est encore un peu obscur pour moi^^

[Rockleader]

Etant donné qu'il s'agit également de javascript, je vais faire un up du sujet.


Je vous explique; j'ai dans l'idée de réaliser un questionnaire à l'aide de javascript pour un forum que je fais. En réalité, le codeur de mon forum a commencé ce travail; mais en ce moment il est submergé et n'a pas vraiment le temps de continuer ça, j'essaie donc de me pencher sur son code, mais je ne me suis pas encore vraiment penché sur le javascript, ce qui me rend la tache un peu compliqué.


La page finale ressemblera à quelque chose dans ce style là: http://manga-daisuki.forumactif.org/h3-code-d-activation



Afin de simplifier l'exemple; j'ai plus ou moins réussi à simplifier sur une seule question pour comprendre d'emblée le processus; j'obtiens donc ceci en supprimant des parties : http://manga-daisuki.forumactif.org/h5-test

Mais il est clair que j'ai effacé un truc qu'il ne fallait pas vu que la validation des réponses ne se fait plus comme elle le devrait.


Etant donné la longueur du code, je ne vais pas vous embêter à la mettre en bloc, sauf si vous me le demandez; d'autant qu'il y a une bonne partie plus en rapport avec le css je pense.



Je ne cherche pas forcément à reprendre ces éléments là; mais si je voulais réaliser une page web; sur laquelle je poserais une question à choix multiple; et qui réagirait en fonction du type de réponse donné un peu comme avec les exemples si dessus; quelle structure de base devrais je utiliser.
Pour une seule question déjà; pour passer à plusieurs question; je suppose qu'il me suffira d'incrémenter un compteur ou quelque chose dans le genre.


Je vous met la totalité du code de base tout de même; en spoiler.
EDIT; je ne peux pas le mettre ça dépasserait à priori le nombre de caractère maximal autorisé dans un message sur ce forum è_é

[Dlzlogic]

Bonjour,
A mon avis, pour ce genre de traitement (question-réponses), le PHP semblerait plus indiqué.
Le Javascript est très bien pour faire des choses uniquement au niveau client.

[Rockleader]

Je veux bien te croire; mais même en php je ne saurais pas vraiment coder ça. Si tu as une structure de base je suis preneur.


A la limite je peux vous mettre le code qui avait été fait en plusieurs fois sur deux ou trois messages; mais ça va faire lourd...

[Dlzlogic]

Un gros avantage du PHP est que la syntaxe et la logique sont très proches du C/C++.
En ce qui me concerne, j'ai créé mon site pour apprendre le PHP. Par contre, pour d'autres besoins, le Javascript était nécessaire, et là ça a été plus dur.
Tu peux toujours aller voir mon site (http://www.dlzlogic.com), t'y inscrire, faire des essais, tu risques pas de le faire exploser. Tu constatera que le graphisme est un peu vieux-jeu. Bien sûr je peux te donner tout ce que tu veux, mais le mieux est encore que tu le fasses toi-même.

[Rockleader]

Mes profs à la fac ne m'ont pas fait une bonne pub du C d'un point de vue de la structure logique des programmes; ils disaient que ce n'était pas super; à la différence de l'ADA qu'il nous ont fait faire en première année.


La proximité du C avec le php ne m'aidera pas tellement vu que je ne l'ai vu non plus encore è_é


Je te remercie quand même, je vais essayer de me remettre au javascript pour essayer d'arriver à faire cela. Je n'ai pas vraiment l'intention de le faire en php, ça reviendrai à dire à mon codeur qu'il n'a pas fait le bon choix (c’est peut être vrai, mais je suis mal placé pour juger).

Je cherche simplement quelque chose de simple en attendant son retour.

[Dlzlogic]

Oui, je crois savoir que l'ADA est très bien pour l'apprentissage, mais je crois aussi que c'est pas demain la veille du jour où on abandonnera le C.
Il faut savoir aussi que l'utilisation du PBP et du Javascript ne sont pas incompatibles et sont souvent complémentaires, en tout cas jamais exclusifs (il s'agit d'un OR booléen).

[Rockleader]

mais je crois aussi que c'est pas demain la veille du jour où on abandonnera le C.

Loin de moi cette pensée, je ne parlais qu'en terme de structure de donnée et non de performance. Il est évident que le C restera très pratiqué.

[ampholyte]

Bonjour,

Comme a pu le dire Dlzlogic, il va t'être difficile de faire ce que tu souhaites uniquement en js.

Sur un formulaire, le JS peut par exemple vérifier que les champs sont correctements rentrés avant d'être envoyé, mais tu as besoin lorsque tu cliques sur le bouton de validation de passer soit en PHP soit par un CGI (python, perl, c++, c, ect...).

Le php reste de loin le plus simple, même si tu ne connais pas le langage, un petit tour sur http://www.siteduzero.com/informatique/tutoriels/concevez-votre-site-web-avec-php-et-mysql/transmettre-des-donnees-avec-les-formulaires. et tu n'auras aucun problème (je pense) à faire ce que tu souhaites.

[fatal_error]

Le Javascript est très bien pour faire des choses uniquement au niveau client.

faux.
js peut aussi etre execute cote serveur. voir nodejs par exemple

Puis bon php pourquoi pas, mais l'API cest une horreur.

[Dlzlogic]

mais l'API cest une horreur.

Tu as certainement raison, mais je peux pas savoir, j'ai toujours développé avec un éditeur de texte.

[Rockleader]

Sur un formulaire, le JS peut par exemple vérifier que les champs sont correctements rentrés avant d'être envoyé, mais tu as besoin lorsque tu cliques sur le bouton de validation de passer soit en PHP soit par un CGI (python, perl, c++, c, ect...).

On peut intégrer un langage compilé dans une page web :doh: ???

Le php reste de loin le plus simple, même si tu ne connais pas le langage, un petit tour sur http://www.siteduzero.com/informati...les-formulaires. et tu n'auras aucun problème (je pense) à faire ce que tu souhaites.

oui, en fait ça s'intègre plutôt bien à l'html d'après ce que je vois.


Afin de comprendre le premier exemple qu'ils donnent:

Code: Tout sélectionner


    Cette page ne contient que du HTML.

    Veuillez taper votre prénom :

 


   
   



La première partie est un affiche html basique.
La balise form va permettre l'échange entre la feuille sur laquelle on est; et la seconde qui servira de réponse après que l'utilisateur est validé si j'ai bien compris. Avec post étant la méthode de transit.

J'ai testé le code tel quel et j'ai vu ce qu'il affichait; mais lorsque je clique sur Valider après avoir entrer mon champ de texte, je n'arrive nulle part.

Il faudrait donc si j'ai bien compris coder une seconde page et lorsque l'on cliquerait sur valider on serait amener vers cette seconde page.

Je pense plutôt que ça se fait par petit morceau mais ce doit être grosso modo le principe de base nan ?

[fatal_error]

formulaire.html:

Code: Tout sélectionner


   
   



page_a_afficher.php:

Code: Tout sélectionner

Arborescence:

Code: Tout sélectionner

./
./formulaire.html
./page_a_afficher.php

Resultat attendu:
Lorsque l'utilisateur est sur formulaire.html et qu'il a saisi son prenom TOTO et qu'il valide, le serveur le redirige vers page_a_afficher.php, et l'utilisateur voit une page blanche avec écrit :
ton prenom est TOTO

[Rockleader]

Ok, je comprends mieux comment ça va marcher. Je vais faire des tests avec des exemples plus ou moins compliqué; mais ça débloque déjà pas mal de possibilité de savoir cela !

Merci !

PS: c'est marrant j'avais aussi testé en utilisant toto comme prénom :ptdr:

[Rockleader]

Désolé pour le double post.

En réalité je ne peux pas faire mes tests en condition réelle, puisque je veux les utiliser sur forumactif, je peux donc créer la page html; mais impossible de créer la page php; la solution serait à la limite de l'héberger ailleurs, mais je ne connais pas vraiment de site qui propose un hébergement pour les pages php.




N'y aurait il pas une autre solution afin de lier la page formulaire à elle même plutôt qu'à une seconde page ? Ce qui éviterait de créer une page php à part ?

Je continue à farfouiller pour trouver un hébergeur.