Superposer des zones réactives à une image + événements
Bonjour,
j'ai le besoin suivant : dans une page Web, afficher une image, positionner par-dessus des zones, interagir avec les zones pour déclencher des actions, le tout sur une page web.
J'aimerai avoir une vision assez large des solutions possibles pour satisfaire ce besoin, avec leurs avantages et inconvénients, et leur capacité à satisfaire seulement une partie du besoin. C'est aussi votre retour d'expérience que je recherche, inutile de me plonger à corps perdu dans une solution technique dont je serais incapable de tirer un résultat valable. Pas de solutions java / flash / silverlight, il faudrait se limiter à du pur web HTML / CSS / javascript.
Image : raw ou vectorielle, je n'ai pas de souci à considérer qu'utiliser une image raw (jpg, png) ou vectorielle (SVG, définition de zones à la volée comme Map - Area, etc.) est suffisamment structurant pour devoir choisir l'une ou l'autre technologie
Zones : à priori je pars sur des zones de forme régulières, cercles ou rectangles, mais je suis très intéressé de savoir si des formes irrégulières (polygones) sont possibles aussi. Il faudrait que les zones puissent être:
- invisibles
- invisibles qui apparaissent (lors du survol par exemple)
- invisibles qui apparaissent et restent
- visibles avec de la transparence
Interactions: hover et click, pas de drag & drop
Actions : surbrillance / contour de la zone, apparition d'informations sur la zone (nom, attributs), apparition d'une zone contenant des informations supplémentaires / des graphiques.
J'ai bien entendu trouvé une multitudes de solutions:
- area + jquery
- HTML Canvas
- SVG (mais je n'ai pas encore trouvé comment faire les interactions avec le SVG)
- plugin Jquery Maphilight
Merci beaucoup de vos idées / retours / conseils / critiques
