[Résolu] Schéma de clavier en HTML

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

[Résolu] Schéma de clavier en HTML

Message par Ymai »

Bonjour
Dans le cadre d'un logiciel d'apprentissage du clavier, je souhaite pouvoir présenter un clavier du type
http://en.wikipedia.org/wiki/Image:Fren ... yboard.svg
Chaque touche doit pouvoir être mise en évidence en couleur à la demande. J'imagine donc d'attribuer un "id" à chacune et de changer sa couleur avec une sauce à la Jquery.
Mais comment présenter ce clavier?
Chaque touche pourrait être une image .png transparente. Il suffit de définir la couleur de fond.
Pour la première ligne, les images sont simplement posées côte-à-côte.
Un <br> à la fin de la ligne.
Pour les deuxième et troisième ligne, je ne vois pas de méthode simple pour le cas de la touche "Enter".
Une idée, quelqu'un?
Merci pour toute réponse.

[edit]Désolé d'avoir tout d'abord posté dans un autre fil. Bientôt les vacances... Non??? [/edit]

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1
Dernière modification par Ymai le 18 sept. 2008, 08:10, modifié 1 fois.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Pourquoi ne pas continuer à utiliser SVG ?
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Bonjour
Benoit a écrit :Pourquoi ne pas continuer à utiliser SVG ?
J'ai un argument choc: je ne maîtrise pas du tout SVG.
La solution y serait-elle triviale? C'est pour un logiciel dont j'ai promis la livraison autour du début de ce mois. :(

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Je confirme après avoir regardé les notions que je devrais intégrer pour mettre tout cela en oeuvre. Y compris autour de http://wiki.svg.org/Main_Page. Tout cela est un peu trop loin de mes charentaises.
Je laisse l'idée bien au chaud pour plus tard et je reste ouvert à toute autre idée aussi géniale (ou même pas tout à fait mais presque).


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Bon, alors je découperais simplement l'image de la touche Entrée en deux bandes horizontales, et au lieu d'utiliser un ID tu utilises une classe.
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Merci
Nous arrivons effectivement à la même conclusion.
J'ai aussi essayé de mettre les touches de la deuxième et troisième rangée dans un tableau à deux lignes et deux colonnes. Les deux lignes de la première colonne accueillent les touches de A à * et de Q à £. Les deux cellules de la deuxième colonne sont fusionnées pour accueillir la touche Enter. Mais c'est très laid autant par l'esthétique finale (la touche Enter reste un peu décalée à cause du bec en haut à gauche) que la technique carrément bourrine.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités