Page 1 sur 1

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

Publié : 17 sept. 2008, 00:41
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

Publié : 17 sept. 2008, 08:42
par Benoit
Pourquoi ne pas continuer à utiliser SVG ?

Publié : 17 sept. 2008, 08:50
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

Publié : 17 sept. 2008, 18:20
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

Publié : 17 sept. 2008, 23:24
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.

Publié : 18 sept. 2008, 08:10
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