[Résolu] Combiner balise <map> et <audio> pour un menu

Bonjour,

J'ai un problème pour gérer un menu. Je vous explique...
J'ai créé une image pour un menu horizontal (un clavier de piano) et j'ai défini des zones cliquables sur chaque touche de piano avec la balise <map> pour amener vers les pages de mon site.
J'aimerais associer des sons en .wav (des notes de musique donc) en hover pour chaque zone cliquable...

Est-ce possible de mettre la balise <audio> quelque part dans le code pour que cela fonctionne?

ps: j'avais intégré dans mon code un script js pour gérer ces sons en amont puisque j'avais un menu (qui ressemblait vaguement à un piano fait avec des div) et j'avais réussi à mettre les sons en question... N'étant pas très joli graphiquement, j'ai préféré créé mon image de piano sur photoshop...

J'espère avoir été assez claire...
Merci !
Modifié par agathel (03 Jun 2014 - 12:44)

IL y a certainement moyen de faire ce que tu veux, mais ce n'est pas une bonne idée.

J'aurais une très forte tendance à fuir les sites qui me balancent du son quand je ne l'ai pas demandé, et il y a beaucoup de bonnes raisons de penser ainsi. Que faire si on surfe à la bibliothèque ? et si quelqu'un dort dans le lit à côté ? et si, simplement, on écoute autre chose en naviguant ? même les petits sons comme ceux-là deviennent rapidement énervants.


Le fait que ton menu est l'allure d'un clavier n'est à mon avis pas suffisant pour qu'on s'attende à ce qu'il y ait un son en hover. Ca serait différent si tu proposais une application d'instrument virtuel, mais ce n'est apparament pas le cas !

Je sais que les sons peuvent s'avérer pénibles mais je ne fais que réaliser ce qu'on me demande et s'agissant d'un site un peu ludique pour les enfants, je pense que les parents ne tiendront pas rigueur de mes petites notes de musique!

ps: J'ai trouvé la solution en faisant des petites images de mon menu avec l'outil tranche sur photoshop et j'ai donc enlevé la balise <map> qui gênait le code. Le script js et mon html avec <audio> fonctionnent alors dans ce cas.

Bonne journée!