rollover sur map area: possible ?

[xpatval]

Bonjour,

Comme indiqué dans le titre, est-ce faisable, et si oui comment ?

A la base, j'ai une image de 400px sur 250px. Elle n'est pas en background. Le but est d'afficher une autre image, beaucoup plus petite, par dessus la première qui reste visible, lors du survol d'une zone cliquable. J'ai qd même un gros doute sur le faisablilité de la chose, de cette manière.

Avez-vous un ou des conseils ?

Merci,

xpatval

[Sarc]

Salut

On est pas mal à vouloir ça en ce moment...

Cartes Interactives

Images Intuitives

Au final, rien de nouveau.

Il est possible de le faire en javascript uniquement, d'après mes recherches, en rajoutant une image gif en position absolue au dessus de l'autre...

[Perrine]

Bonsoir vous 2

J'ai exactement la même problématique en ce moment : afficher une carte de France découpée en département, chacun nécessitant un lien et un rollover mais je voudrai éviter le javascript...

Je suis sur une piste en css, je continue de creuser et vous tiens au courant.

Quoi qu'il en soit, je ne pense pas pouvoir éviter le découpage de la page avec n coordonées x,y pour la balise area !

[Perrine]

Bon, ma piste en css s'est avérée être totalement foireuse et je crois que je vais en arriver à la même conclusion que sur les 2 posts précédents : point de salut sans Flash !

Je dis Flash car même en javascript, avec les rollover, il faut précharger les images pour éviter un clignotement indésirable et quand on a 100 images à précharger, c'est pas canon canon

Ce qu'il faut savoir :

- La balise AREA ne peut pas recevoir de style. La balise MAP oui mais ça ne sert pas à grand chose.

- Puisqu'AREA ne peut pas recevoir de style, pourquoi ne pas utiliser la balise A ? Dans une carte où les rollover sont rectangulaires, c'est viable... mais dans le cadre d'une carte géographique avec des polygones, la balise A ne permet pas de définir des coordonnées précis.

- On peut donc se retourner vers la solution des sprites (voir le chapitre sur les formes irrégulières) mais là encore, dans le cas d'une carte géographique, les blocs sont trop proches pour avoir un rollover sur des zones précises.

Si vous avez une petite carte, avec peu de zones cliquables, vous pouvez tenter cette solution en javascript. A noter dans ce cas que pour chaque rollover, l'image complète est rechargée, c'est ce qui fait que cette solution n'est pas élégante pour les grandes images, contenant de nombreux rollover (il faut dupliquer l'image autant de fois que l'on a de zones sensibles)

Dans ton cas xpataval, peut-être que tu peux t'en sortir avec les z-index pour positionner ton rollover au dessus de la grande image. Si la zone sensible est rectangulaire, c'est tout à faire gérable avec la balise a et le a:hover (je pense)

Sarc, quand tu dis :

Il est possible de le faire en javascript uniquement, d'après mes recherches, en rajoutant une image gif en position absolue au dessus de l'autre...

Est-ce que tu arrives à ne charger que le département en rollover ? ou dois-tu charger toute la carte de France avec le département surligné ?

[Sarc]

Il est possible de ne mettre que le département en question...

Pour ça, soit tu crées un Gif de la taille de l'image de départ, avec tout transparent sauf le département en question, soit tu crées un gif de la taille du département, et tu le places au pixel près grâce à un "calcul" préalable avec ton logiciel d'images préféré. Moi personnellement j'ai opté pour la grande image toute transparente, ce qui me fait environ 1ko pour chaque zone...

Ca fait pas mal, effectivement.

Si tu t'orientes vers flash, je suis volontaire pour travailler en équipes, ça me plairait pas mal... Mais ça risque d'être compliqué :/

On a l'air d'être pas mal à chercher sur le sujet.

[Perrine]

Ah ben oui ! Tout transparent, je viens de tester et je descends à 800 octets / département, ce qui reste raisonnable !

Pour la 2ème solution, avec l'image de la taille du département, comment tu codes le tout ?

Dans le html, tu utilises aussi les area ? Et le js ressemble à quoi ? Car toutes les solutions que j'ai vues parlent de remplacer l'image grand format mais pas département par département.

Cela dit, l'avantage de la première solution est que cela reste propre au niveau du code.

Pour le Flash, si je devais utiliser cette solution, je ferai intervenir la graphiste avec laquelle je bosse mais je ne prévois pas de le faire de suite. Je n'ai aucune compétence en Flash. Je vais d'abord tester la solution que tu proposes avec la transparence qui m'a l'air pas mal

Sinon, accessoirement, j'étais partie sur une solution qui reste relativement esthétique (mais sans rollover), et qui utilise la balise A avec une bordure pour le :hover.

Mais cette solution ne répondait pas à 2 critères : rollover et zones irrégulières

L'idéal serait que la balise AREA puisse recevoir un style... ce serait le top mais je ne sais pas si c'est prévu

[Sarc]

Area d'après plusieurs sites peut recevoir des styles, mais j'ai tout essayé... Apparamment comme toi, et sans résultats. Rien du tout !

Je peux pas te donner l'URL en public pour l'instant, parce que cette partie de mon site n'est pas rendue publique pour l'instant, mais je t'envoie une URL de test en privé pour que tu regarde un peu

[ghost]

Bonjour,

A priori avec un gif transparent (ou png) par département sur une carte en background cela me semble possible sauf que la zone cliquable déclenchant le rollover sera rectangulaire en se contentant d'un texte (nom du département?) ou un point de survol, cela résout le problème. Au point de vue poids, on peut à la limite pré charger les départements mais bon ... Le plus fastidieux sera de positionner chaque image.