Discussion :

[nuke_y]

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

[nuke_y]

Je commence déjà à lister les avantages / inconvénients:

Map / Area:
- [I] impossible d'ajouter du style à une AREA. Il n'est donc pas possible de la mettre en évidence, seules le comportement standard du navigateur permet de l'identifier.