Image dynamique javascript / html.

Bonjour à tous et à toutes,

C'est la première fois que je poste ici car je suis face à un problème de "taille" voici le problème :

Je dois "créer" sur une page un cercle correspondant à un réveil ou une horloge ( donc divisé en 12 parties égales ), et si l'utilisateur clic sur une des 12 heures celle-ci, se grise ou s'entoure,... peu importe.
Mon problème étant que je ne sais pas quel est le meilleur moyen, utilisé une image mais est ce que je pourrais modifier des parties de cette image à ma guise? Utilisé une image de fond et des petites images qui représentent les heures et en cliquant dessus il y a aurait un changement d'image avec la même mais grisée.

Ou sinon il est peut être possible de générer un "réveil" en code, mais pourrais-je lui assigner des actions en javascript?

Toutes réponses sont les bienvenues.

Merci d'avance.