Bonjour, 

J'aimerais savoir s'il est possible de modifier une image en fonction de la position de la souris. 

Je m'explique, par exemple sur une carte de la France, modifier celle ci avec la région en couleur où  se trouve la souris

L'image est en png, peut-être faut-il la passer en svg ?

Ou je découpe chaque région et je change l'image individuellement de chaque région 

Merci 

Ce serait beaucoup plus simple et expressif en SVG. Chaque région serait un path différent, donc tu t'en sortirais avec une simple règle CSS tandis qu'une solution sur la base d'images nécessiterait de générer des coordonnées pour un area map ou un canvas.

Aussi, le PNG a beau être léger pour ce genre de graphisme, télécharger autant d'images qu'il y a de régions n'est pas la solution la plus pragmatique : le nombre de requêtes, le temps de latence entre les téléchargements et le poids même des images a un coût.

Enfin, si tu dois faire quelque chose avec ta carte en Javascript, il sera plus concis si tu bénéficies du DOM.

D'accord 

Si j'ai bien compris, je passe chaque région en svg et je change le svg avec un hover

En fait de base j'avais fait un area map sur mon image pour déterminer un lien pour chaque région mais j'arrivais pas à modifier l'image en fonction de la position de la souris

Je vais essayer le svg

Merci

Hello

Un petit plugin jquery qui pourra t'aider:

imageMapster

Non, pas du tout

Un SVG c'est comme du HTML : chaque partie est stylable en CSS. Tu peux avoir une règle :hover qui change la couleur. En fonction du SVG, ça peut être aussi simple que #monSVG path:hover {fill: blue;}

Merci à vous deux, j'essaye d'abord l'idée de toubouretBleu, j'ai mon image en svg, avec 

<svg

<path id="" style="" d="">

<path id="" style="" d="">

J'ai essayé de mettre dans mon style CSS ta ligne de code avec mes id mais ça ne marche pas, dois-je mettre une div à chaque path ? Ou puis je modifier directement dans style mais je sais pas faire avec le :hover

Merci 

C'est parce que tu utilises un attribut style dans tes balises <path>. En CSS un style en ligne a une plus grande priorité qu'un style définit dans une feuille de style. Tu peux définir le style de base de tes régions dans la feuille de style de la même façon que tu définis le style :hover. Note que tu peux utiliser des class, des id comme ne HTML, et tu peux utiliser la balise <g> comme une div pour regrouper des éléments et simplifier le ciblage CSS si tu veux faire des groupes de régions sans répéter des class.

Bonjour, 

J'ai essayé ce que tu m'as dit tabouretBleu, j'ai i changé tous mes styles mais rien n'y fait, rien ne change

J'ai regardé l'idée de Krogoth et elle est plutôt pratique car j'avais déjà mes coordonnées avec area map j'ai changé l'image et le code mais j'obtiens des secteurs qui ne correspondent pas avec mon image, j'ai pourtant redimensionner mon image comme avant et mis les mêmes coordonnées qu'avant

Si vous avez une idée, merci

Je ne peux pas t'aider si tu ne fais pas l'effort d'apprendre.

J'essaye d'apprendre, j'ai essayé ce que tu m'as dis j'ai tout mis en svg, j'ai changé mes path, j'ai ajouté des g, modifier mes style, mes feuilles de style, je vois pas d'autre solutions ducoup je suis passé sur la deuxième proposition de Krogoth

Je vois pas ce que je devais faire pour que ton idée marche, mais je te remercie 

C'est pas une idée, c'est un truc que je fais tous les jours. Quand un truc ne marche pas et que tu débutes, il faut reproduire le problème sur un code plus simple

https://jsfiddle.net/1hy7x2wr/

Y'a rien de compliqué.

Merci de ta réponse, j'ai essayé ta technique, elle fonctionne effectivement, mais j'ai un problème, il y a des carrés blanc qui se forme je ne sais comment 

https://jsfiddle.net/LL4431x0/1/#

Il y a en tout 4 aires, mais les aires ne se remplissent pas entièrement

Merci de ton aide

Ton fichier SVG a un problème. Quand je l'ouvre dans Illustrator je vois la même chose, et une inspection des éléments montre que les formes s'interpénètrent et ne sont pas correctement fermées. Ce n'est pas réparable apriori, il faut partir d'un bon fichier.

Par ailleurs, ton SVG est vraiment trop lourd pour du web. Il fait près de 73 000 points avec une précision de 3 chiffres après la virgule pour une largeur de 1200px. C'est bien trop précis vu la taille à laquelle tu affiches la carte. ça peut que faire ramer le navigateur et ça te fait un fichier de 930ko.Tu peux réduire le nombre de points à 10 000 en supprimant les décimales (ou en n'en laissant qu'une à la rigueur) tout en conservant le même niveau de détails, ça fait un peu plus de 200ko (70 gzipé), mais tu peux aussi utiliser une carte au graphisme plus épuré.

J'ai trouvé ce fichier sur le site data.gouv.fr ce qui me paraît bizarre qu'il soit abîmé, pense tu que c'est le fichier de base qui a un problème ?

Merci,  j'ai baissé le nombre de décimales en suivant ton conseil, ce qui m'améliore effectivement le temps de chargement mais j'ai toujours le même problème donc le fichier doit avoir un problème 

 Si le fichier est abîmé, faut-il que je trouve une autre carte svg de la France ?

 Merci

Si tu parles de cette carte https://openstreetmap.fr/f/France-departements.svg les régions ne sont pas délimitées comme des aires : les frontières sont dessinées avec des contours indépendants. Du coup quand tu veux remplir les path, le logiciel referme le tracé en faisant se rejoindre le premier et le dernier point des tracés.

Pour utiliser cette carte, il faudrait fusionner les contours de chaque région entre eux (en pensant à les dupliquer pour recommencer avec les régions contiguës). Ça promet d'être plutôt fastidieux, mais heureusement il y a peu de régions.

Si tes coordonnées map area sont extraites du SVG, ça explique pourquoi tu as eu du mal à les exploiter.

D'accord, si j'ai bien compris je dois tracer chaque région avec combiner et relier les deux point aux extrémités et normalement sa crée des polygone qui se remplissent avec hover

Merci de ton aide

Pourtant mes coordonnées area map était prise avec paint.net car au début je voulais juste un lien sur mon image en fonction de la position sans animation 

Je ne sais pas comment on fait dans Pain.NET mais dans Illustrator il suffit d faire Objet > tracé > rejoindre (ou un truc comme ça, j'ai le logiciel en anglais)

Tu as ta forme de base mal refermée.

Tu vois qu'elle est constituée de pluseurs parties.

Tu sélectionnes le tout et tu fais CTRL + J ou Objet > tracé > rejoindre.

Et ta forme est correctement fermée

Ici je montre juste un rectangle isolé, mais dans une carte où des régions sont voisines, certaines frontières servent plusieurs fois, donc il faut penser à les dupliquer.

-
Edité par tabouretBleu 4 janvier 2018 à 10:13:02

Nickel merci beaucoup, j'ai tout bien qui se remplit sans soucis en fonction de ma souris