Changement de couleur lors du passage de la souris Résolu

Question

bjr, voilà un morceau de code, j'aimerais savoir comment faire pour qu'une région change de couleur au passage de la souris sachant que j'ai tout les départements individuellement d'une autre couleur qui peuvent se supperposé sur la carte de france. merci à tous ceux qui prennent du temps pour répondre à ceux qui n'y connaisse pas grand chose cordialement

Bul3 · Accepted Answer

Bul3 · Answer

ce n'est pas un changement de couleur mais un changement de dessin qu'il te faut faire
quand une image est affichée on ne peut que changer cette image ( ou la déplacer,
la cacher, changer ses dimensions... mais bon : rien à voir )., pas en changer la
couleur.

librepierre · Answer

bjr, merci pour la réponse j'ai une carte de france, j'ai découpé tout les régions et changé les couleurs, et je voudrais au passage de la souris que cette régions vienne se superposer au dessus et disparaisse lorsque la souris sort du champ de la région. que faut t'il que j'écrive aprés . merci encore pour tout ce qui me réponse et qui prennent du temps cordialement

Bul3 · Answer

onmouseover="repositionner la région là où il faut"

librepierre · Answer

??????????? je ne comprend pas, mon image s'appel "Bretagne.jpg" qui doit se supperposer a la même région sur la carte qui est d'une couleur différente au passage de la souris peut tu me modifier le code si tu en a le temps, merci encore pour les réponses rapide, trés bon site d'entraide cordialement,

Bul3 · Answer

là tu as une seule image : carteregion.jpg
ton area en est une zone sélectionnable,  pas une image

il faudrait mettre une Bul

@karamel · Answer

bonjour 
bul ++
ou il y aurait la solution de mettre la meme carte mais avec la region ou la sourie se trouve colore (une carte complete  par region)

Bul3 · Answer

kazma++
ou bien... tu n'as pas tort
les images seront plus lourdes (?) mais la gestion bien plus légère (!)
amicalement.

@karamel · Answer

pour garantir le resultat une image en gif et pas de 56kp ou sinon prechargement

librepierre · Answer

bonjour 
bul ++
"ou il y aurait la solution de mettre la meme carte mais avec la region ou la sourie se trouve colore (une carte complete  par region)"

comment tu vois la chose ? 22 cartes car 22 régions ? ou la région serais d'une autre couleur avec un fond transparent ! 
un peut lourd non ?
y aurais t'il pas une autre solution?

je peut vous envoyer mes sources voir si une autre solution existe !

cordialement

Bul3 · Answer

certes... 

soit 22 régions avec contours transparents + la France 
soit 23 France, 1 normale, les 22 autres avec 1 région de couleurs différente
pas réellement de choix coté client je pense
peut-être me trompe-je ?

coté serveur tu pourrais recoloriser uniquement la région,
mais serait-ce plus rapide ? mieux ? moins lourd ? parierais pas

@kazma : préchargement ? il faudrait attendre le chargement des 
23 cartes avant que la page ne soit disponible. ce qui me semble
bien pire.

librepierre · Answer

voilà ou j'en suis bretagne.gif........carte de france ( juste la bretagne )avec fond transparent carteregion.jpg......carte de france avec fond mais mon code ne marche pas merci de votre aide cordialement

Bul3 · Answer

img src n'est pas valide dans un area
donc this.src ne fonctionnera pas
le Bul

librepierre · Answer

je t'es envoyer un mail avec mon fichier html, car je suis un peut perdu
merci encore
cordialement

Bul3 · Answer

oulah !!!!
j'espère que ce n'est pas trop lourd !!!
tu vas me bloquer totalement ma boite aux lettres  !

j'ai un modem 56 k

et il vaut mieux rester ici

que te dirais-je de plus que je ne t'ai dit ?

librepierre · Answer

Le fichier et pas gros , mais bon laisse tomber....... voila ................................ (les deux image se supperpose bien ) a partir de là je ne comprend plus comment faire apparaitre juste l'image de la "bretagne" carte de france sans fond ou il y a juste la bretagne d'une autre couleur qui se trouve caché par ="carteregion.jpg" en passant la souris sur la bretagne. cordialement

@karamel · Answer

un petit exemple qui je pense ressemble a ce que tu cherche

librepierre · Answer

Voilà ce que j'ai fait, mais ça ne marche pas, dommage d'être aussi ignard ....................... > cordialement

librepierre · Answer

j'avance un peut, mais la carte bretagne ne se supperpose pas sur la carte carteregion merci kazma mais à tu une idée pourquoi ? cordialement

librepierre · Answer

Merci aussi à Bul3, en espérent que quelqu'un est une idée pour me donner un conseil pour que les deux image se supperpose
je ne rechercher pas sur un click, mais sur un passage de souris, mais bon j'avance grace à tout ce petit monde qui connais la programmation et en fait profiter tout le monde
cordialement,

Bul3 · Answer

tu dois faire le contaire déjà !

la carte de France est dans le map, les area décrivant les contours des régions
la bretagne dans une Bul

librepierre · Answer

merci bul3, mais je ne vais pas te faire perdre ton temps, je ne comprend pas ce que tu me dit, car pour moi sans exemple je ne peut comprendre, je débute .
merci encore j'ai quand même appris des choses avec toi
cordialement,

librepierre · Answer

envoyer mon message trop top, tu avais compris
merci pour l'exemple

librepierre · Answer

merci impécable et je vais chercher tout seul le moyen de faire disparaitre  la bretagne lorsque la souris quitte son contour.
vraiment bien expliquer cette fois ci
encore merci pour le temps passé, mais j'ai appris quelque chose aujourd'hui
cordialement,

peut être que cette exemple vas servir à d'autre et dite merci à BUL3

Bul3 · Answer

ça marchera... mais très très mal !
en effet, la région est dans un rectangle ( même s'il est transparent,
il existe ) , qui empiètera obligatoirement sur les régions voisines.
pour que le survol y soit effectif, il faudra d'abord sortir de ce rectangle.
pas la bonne solution... à priori, si je ne me trompe pas.

librepierre · Answer

bjr

bon je crois que je vais laisser tomber, car un peut compliquer pour moi qui suis pas trop dans la programmation javascript........et puis je ne vais pas enmerder tous le monde par des choses qui vous paresse simple.....
dommage et merci encore pour le temps que vous avez consacré pour moi
cordialement

librepierre · Answer

j'ai fait juste une image de la bretagne,et en changeant juste bretagne.jpg qui est la carte transparente par bretagne.gif qui est une image découpé de la bretagne ( l'image ne s'affiche pas ) cordialement ps: je ne peut pas resté sur un échec !!!!!!!!!!!!!!!!!!

Bul3 · Answer

ça doit être normal... 2 , pas de , pas de ... pas regardé plus loin !! faut, au moins, respecter les syntaxes....

librepierre · Answer

j'ai découpé les images bretagne etc.......et rogné les image avec photoshop. [bretagne.html ] le href ne marche pas onmouseout= "command fait on pour que l'immage disparaisse lorsque la souris n'est plus sur la BRETAGNE merci pour votre aide cordialement

Bul3 · Answer

alors... je répète : ça ne peut pas fonctionner il manque il manque ... et n'oublie pas l'empiètement qui va te poser souci et le href affiche la page lors du click onmouseout = comme le onmouseover mais avec 'none' @+

librepierre · Answer

bjr, merci pour les renseignements, mais je pense que la syntaxe est bonne, je n'avais pas tout envoyé !!!! le seul problème est que le href ne marche pas, et que lorsque je passe la souris sur la bretagne la couleur n'arrête pas de changer quand je bouge la souris ? Recherchez votre camping en cliquant sur la région de votre choix merci pour ta patience cordialement,

Bul3 · Answer

>>la syntaxe est bonne, je n'avais pas tout envoyé comment pouvait-on pouvait deviner ??? en simplifiant ( et tu as peut-être des erreurs ailleurs !!!! je n'ai donc laissé que ce qui concerne la carte en remplaçant poly par rect dans area pour la visibilité et en changeant bien entendu les images ) [bretagne.html tout fonctionne ( chez moi ) []mon Site][M'écrire]Bul

Bul3 · Answer

restons sur le forum s'il vous plait ! plus d'intervenants, plus de compétences, plus de chances d'avoir une réponses correcte. sans parler que la solution peut intéresser d'autres lecteurs !!! ce que vous m'envoyez par mail : 1° Erreur : initMenu is not defined Ligne : 1 je sucre pour aller plus loin 2° il manque un je sucre un totalement inutile et qui probablement perturbe 3° il n'y a aucun onmouseover, onmouseout sur les area ... ????? ça ne fonctionne donc pas ça me semble normal encore heureux que vous n'ayez pas saturé ma boite aux lettres ! j'ai uniquement un modem 56 k ( quand il est au mieux de sa forme ce qui n'arrive jamais, et je fus déjà totalement bloqué par l'envoi de messages trop importants )

librepierre · Answer

ok, c'était simplement pour te montrer ce que cela fessais .........en plus les  3 fichiers ne fait avec 2 images  que 200ko , de plus quand cela fonctionneras je mettrais le fichier en ligne sur le forum, car je vois que bc de personnes sont demandeur de ce sujet et que pour le momment aucun fonctionne . 
voilà le pourquoi de l'envoi de ces fichier
cordialement

Bul3 · Answer

>>c'était simplement pour te montrer ce que cela fessais
ben.. je n'ai pas vu... pour les raisons indiquées !

>>que 200ko ,
encore heureux

>>et que pour le momment aucun fonctionne
ben si. mon exemple fonctionne ( aux restrictions près ), ce que proposais kazma
     fonctionnerait aussi... bien entendu il y a d'autres pistes

librepierre · Answer

bjr,

puisque que ton script marche, peut tu me l'envoyer par mail que je le regarde ou alors tu le met sur le site que tout le monde le vois et l'essaie, cela donneras un bon exemple pour tout ce qui recherche la même chose.
cordialement,

Bul3 · Answer

déjà fait : message du dimanche 1 février 2009 à 12:19:11

librepierre · Answer

bjr,

ok on laisse tomber , je vais sur un autre forum

merci quand même pour ton temps

cordialement,

Bul3 · Answer

ben.. je ne sais pas ce que tu veux de plus....
mais... c'est comme tu le sens.

librepierre · Answer

je t'ai envoyer le fichier avec les images pour que tu regarde le problème que je rencontre, la tu essayer ? marche t'il ? il vaut mieux avoir un cas sur son ordi pour voir comment cela marche et si cela ne marche pas donner des solutions au problème et non des marceaux de codes par ci par lè !!!!!

mais merci quand même pour ton temps .....

et si je trouve la solution sur un autre forum je te la donnerais avec des explications.

cordialement

librepierre · Answer

bjr,

voilà pourquoi le problème 

mousover => souris au dessus ...l'image bretagne s'affiche et
comme je passes sur l'images Bretagne le mousout de l'area se declenche ...
 
cordialement

Bul3 · Answer

j'ai déjà répondu aussi
c'est le message du dimanche 1 février 2009 à 15:11:20

librepierre · Answer

ismap title="pour voir" coords="0,0,100,100" href="bretagne.html" alt="Bretagne" > tu l'avais dit mais cela ne marche pas !!!!! cordialement

Bul3 · Answer

c'est normal dans ce que tu mets
pas de body, pas d'élément "Bretagne"   ....
et si ça ne marche pas, dis nous au moins quoi ? un message d'erreur ? ...
car chez moi, ça fonctione ( IE, FF ... )
tu ne dois pas faire tel quel l'exemple !!!

librepierre · Answer

voilà mais ça ne marche pas car l'image "a.gif" vient bien se supperposer sur la carte de france mais des que je bouge la souris elle clignotte et le href ne marche pas cordialement

Bul3 · Answer

je viens de comprendre le souci... ! on survole la "bretagne 1", onmouseover est déclenché, on montre "bretagne 2" donc sur "bretagne 1" onmouseout est déclenché, > on cache "bretagne 2", on survole donc "bretagne 1"... et c'est reparti. boucle do infernale une solution ? : avant d'afficher la région, cacher la précédente qui aurait été affichée peut-être ça fonctionnerait aussi en mettant le onmouseout sur fond1 et fond2... ( pas testé ) j'ai simplifié l'exemple en mettant un rect à la place du poly et laissé uniquement 2 "régions" carrés @+

librepierre · Answer

bjr, ça marche bien , même avec "poly", la seul chose et que le "href='#.html" ne fonctionne pas quand on est sur l'image "bretagne" pour afficher une autre page ? peut être une erreur de syntax de ma part on vas y arriver au résultat final; trop content!!!!! cordialement,

Bul3 · Answer

oui puisque le href est sur l'area et que cet area n'est 
pas accessible car caché par l'autre image
met les images de "remplacement" dans un lien peut-être ?
du style :

[url voulue  
      ]

librepierre · Answer

ok nickel ça marche , encore quelques modifs pour améliorer cela , mais c'est bon dans l'ensemble

merci 

cordialement

Bul3 · Answer

après tu pourras nous mettre ça dans les sources
( la partie carte de France + recouvrement régions )
nickel si ça baigne
on a ( enfin, j'ai surtout à percuter : ) eu du mal

librepierre · Answer

ce qui serais bien maintenant, se serais sur le lien "href" de mettre un "popup"de forme rectangulaire, attaché à la souris lors du survol de la région pour y insérer des infos et qui changerais suivant le survol de la région
quand pense tu ?
tu as une idée !!!
pour l'instant je vais mettre dans les sources la partie carte et recouvrement, en indiquand que le plus gros du boulot a été fait grasse à la participation de  BULL3 si tu est d'accord pour que je cite ton speudo .
cordialement,

Bul3 · Answer

>mettre un "popup"de forme rectangulaire, attaché à la souris lors du survol de la région
un div caché qu'on montre et qui suit la souris
tu trouveras foultitude d'exemples sur CodesSources
sans suivre la souris, avec les dernières versions des navigateurs : uniquement en css
pour suivre la souris, 5 lignes en javascript, pas plus
( sauf si tu tiens à une compatibilité avec IE6 et autres vieilles versions  )

Changement de couleur lors du passage de la souris

52 réponses

Votre réponse

Discussions similaires