Discussion :

[eddynamique]

Salut à tous,

J'ai une image de cette forme la :


J'aimerai rendre chaque partie cliquable, et faire apparaître en surbrillance les parties cliquées.

Je ne suis pas particulièrement adepte des solution HTML5 / CSS3, car j'aimerai conserver la compatibilité avec des navigateurs plus anciens (IE 7&8).

Avez-vous une idée de comment réaliser cela ?

Merci !

[rodolphebrd]

Bonjour,

vous pouvez travailler avec la propriété background en vous inspirant de cet exemple.

[eddynamique]

Merci pour la réponse rapide.
Le problème de la solution que vous présentez est la superposition des images, par exemple si vous pointer votre curseur en haute à gauche de "Saudi Arabia", c'est le hover de "Jordan" qui s'active...

J'ai pensé à créer une image du squelette de la rosace en laissant l'intérieur en transparence. Appliquer un map area à cette image et faire apparaître zone en surbrillance avec des images positionnées derrière l'image du squelette.
Qu'en pensez vous ?

[rodolphebrd]

si vous pointer votre curseur en haute à gauche de "Saudi Arabia", c'est le hover de "Jordan" qui s'active...

Appliquer un map area à cette image et faire apparaître zone en surbrillance avec des images positionnées derrière l'image du squelette.
Qu'en pensez vous ?

Je ne sais pas si le découpage sera simple dans le cas de cette image...

[eddynamique]

Du coup pour ceux que ça intéresse, j'ai essayé mon idée et cela fonctionne plutôt pas mal.
http://the-digitalfactory.com/develo...t/test_rosace/

Je n'ai fait que le tiers supérieur pour tester.

Si vous avez des remarques, n'hésitez pas !

[rodolphebrd]

Ah je n'avais pas vu le résultat comme cela, désolé