Remplissage avec javascript

Résolu/Fermé
abcene Messages postés 42 Date d'inscription mercredi 19 mars 2014 Statut Membre Dernière intervention 9 mars 2016 - 21 juin 2015 à 07:42
aurelienC Messages postés 2 Date d'inscription lundi 22 juin 2015 Statut Membre Dernière intervention 22 juin 2015 - 22 juin 2015 à 16:05
bonjour,
je dispose de cette image:

j'aimerai en cliquant sur l'une de ces numeros, remplire sa case:

merci d'avance

2 réponses

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 228
21 juin 2015 à 10:47
'lut, avoir l'image c'est bien, mais tu n'as que ça?
Depuis HTML5 ça serait possible juste avec l'image et un
<canvas>
mais c'est peu performant et pas facile à coder.
N'as-tu pas ton affichage 16 segments sous une autre forme, genre <div> avec des règles CSS3 ou mieux, l'image sous forme de SVG?

(et au fait, c'est pour un devoir? Si c'est le cas ça me semble bien compliqué)
1
abcene Messages postés 42 Date d'inscription mercredi 19 mars 2014 Statut Membre Dernière intervention 9 mars 2016
21 juin 2015 à 16:03
c'est bien un devoir et cela fait une semaine que je me casse la tête dessus vraiment chiant. n'y arrivant pas, je cherche maintenant de l'aide. je viens juste de voir les SVG, c'est nouveau pour moi du coup je risque de passer de heures dessus... . mais je vais essayer.
0
aurelienC Messages postés 2 Date d'inscription lundi 22 juin 2015 Statut Membre Dernière intervention 22 juin 2015 1
22 juin 2015 à 16:05
Salut,
Vu que c'est un devoir scolaire la première question que je me pose est: Quelle sont les contraintes exactes? Selon les contraintes je vois plusieurs solutions:
1 - Superposer un canvas à l'image, jouer avec la transparence du canvas pour faire en sorte qu'au clic sort un bouton une zone défini du canvas se colore, ce qui devrait avoir pour effet de colorer une partie de l'image en dessous.
2 - Reproduire l'image en dessins sur un canvas ou en SVG, définir chaque forme dessiné comme un objet indépendant et lors du clic sur le bouton correspondant, changer sa couleur.
3 - Si l'image n'a pas besoin d'être identique il est envisageable de produire quelque chose de similaire avec des éléments html modifiés en CSS, changer leur couleur lors du clic sera très facile.

Voila, fais nous part des contraintes exactes, qu'on puisse mieux t'orienter.
1