Colorer une zone (map/area) réactive

Bonjour à tous,

je fais appel à votre expérience pour résoudre le problème suivant :

J'ai en image de fond le plan d'un bâtiment.

Lorsque la souris survole une salle donnée, je fais apparaître des informations concernant cette salle dans un cadre fixe, placé sur l'image. Pour cela, j'ai bien défini une map pour l'image de fond avec des area correctes.

En plus de cela, je voudrais colorer l'area lorsqu'elle est survolée par la souris, et là, je dois bien avouer que je sèche. J'ai passé la journée dessus.

J'ai bien envisagé un rollover de l'image complète, avec autant d'image différentes qu'il y a de salles, mais je trouve cette solution un peu lourde, car l'image est grande.
Et en plus, je ne vois pas comment faire plusieurs rollover avec une seule image de fond.

Ou alors, je fais un assemblage d'autant d'images qu'il y a de salles, mais là non plus, je trouve pas ça propre.

Je vous remercie par avance de votre aide, je dois bien avouer que je me suis inscrit car je me casse les dents sur ce problème.

Hello,

Personnellement j’opte pour les même choix que toi, à savoir :

- une image de fond à l'état off ;
- des variantes de cette image avec tout les états on ;
- des liens placés sur l'image via un map (sans oublier leurs alternatives) ;
- un script qui vient changer l’image de fond au survol de chaque area.

C’est quelque chose de robuste et accessible, mais c’est vrai qu’il faut veiller à :

- optimiser au maximum le poids des images ;
- pré-charger ses images pour éviter toute attente lors des premières interactions.

Parfois je rajoute même un script qui réalise des infobulles personnalisées sur l’ensemble.

Mes ressources pour réaliser tout cela :

- "Map Spinner" (sous Mac et payant, mais la version d’essai est bien suffisante – je suis preneur de mieux) ;
- Le plugin "Tooltip" pour jQuery ;
- Le plugin "Preload" pour jQuery ;
- un script maison pour les changements d’images au survol (rien de bien compliqué).

Tout d'abord, merci de m'avoir répondu.

Je pense que je vais opter pour la solution avec le rollover de l'image, mais pour alléger le tout, je ne voudrais pas que l'image soit totalement remplacée, mais je voudrais juste y superposer une image png, avec simplement la salle survolée de colorée.

Un rollover qui ne remplace pas mais qui superpose ... c'est possible ?

J’ai peur que ce soit bien compliqué et que tu transformes un peu ton truc en usine à gaz. Sans compter les problématiques nouvelles qui vont fatalement apparaitre.

KISS comme on dit chez Paris-Web.

Éventuellement tu pourrais peut-être creuser du côté de SVG qui me semble aussi une techno. appropriée pour ce genres d’usages.

Bon, ben je m'en suis sorti en mettant le plan en image de fond de la div, en y superposant une image transparente qui renvoie à la map et je remplace l'image vide par des rollover pour les salles.

C'est très bien sauf que je mets du contenu (le plan) dans une feuille de style. Je dois pas vraiment respecter les standards ...

Merci.

Sans le support des CSS ton exemple doit être assez peu compréhensible ouais.