Discussion :

[Nighthawk]

Bonjour.

Depuis quelque temps déjà j'essaie de réaliser une carte interactive en html5 canvas et là je touche au but (http://jsfiddle.net/vt6fbx60/)
Du coup j'ai ma carte, avec mes points, mes couleurs et une action au click (après ce sera des liens vers de nouvelles pages au lieu d'alertes).
Là je suis dans le paufinage et la mise en forme. Je voulais donc savoir s'il était possible :
- de faire un effet fondu sur le changement de couleur des zones (un peu comme cette carte que j'ai faite en flash : http://nyko-test.jimdo.com/)
- Et pendant qu'on est sur cette carte, pourquoi ne pas afficher les noms de départements

Voilà, ce ne sont pas des options indispensables, mais ce serait assez sympa si c'était réalisable. Juste pour la forme.

[NoSmoking]

Bonjour,
il te suffit de mettre une animation dans les événements via la méthode animateLayer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
mouseover: function (layer) {
  $(this).animateLayer(layer, {
    fillStyle: '#999A19'
  }, 'slow', 'swing');
},
mouseout: function (layer) {
  $(this).animateLayer(layer, {
    fillStyle: '#E8E3CA'
  }, 'slow', 'swing');
}

[Nighthawk]

J'ai une autre question concernant l'animation. Sur mon site web j'ai voulu simplifier au maximum le code et du coup j'ai fait un fichier .js dans lequel on retrouve le code javascript lié à la carte (donc le dessin du canvas et les fonction mouseout et mouseover), mais il semblerait que les animations ne fonctionnent pas... J'ai bien la carte et le changement de couleur au passage de la souris, mais pas l'effet de changement de couleur.
Est-ce qu'il y aurais un problème dans le code ou serait-ce dû au fichier .js ???


EDIT : Non c'est bon, ça marche. En fait c'est juste qu'il fallait un peu de temps pour que mon hébergeur actualise le fichier que j'ai chargé et pour qu'il soit correctement récupéré par le navigateur. J'ai également mis à jour mon jcanvas. Voilà le résultat : http://nyko-test.jimdo.com/r%C3%A9f%C3%A9rences/
Mon souci c'est que, plus je recherche sur internet, plus j'ai envie d'ajouter des fonctions. Et la dernière que j'ai vue permet de passer du curseur de base au pointeur, comme ça : http://www.html5canvastutorials.com/...drop-tutorial/
Je voulais donc savoir comment faire? Est-ce qu'il me faut réutiliser ce code-là ou est-ce qu'il existe une version simplifiée par jquery ou jcanvas (j'ai cherché mais il ne me semble pas avoir vu ce genre d'option, mais si quelqu'un connais mieux)


EDIT 2 : Après pas mal de recherche, j'ai découvert la fonction .css de jquery
Alors ça marche et ça ne marche pas. Quand je suis en dehors de ma forme et que je me met sur l'une ou l'autre des surfaces, le pointeur change sans problème. En revanche, lorsque je passe d'une surface à sa voisine je perd le pointeur et je reviens à la flèche normale. quelqu'un saurait-il comment y remédier? D'avance merci.


EDIT 3 : J'ai fait quelque tests et repris jquery en français ce coup-ci (des fois que j'aie mal saisi certaines explications en anglais), et j'avais (effectivement) mal compris certaines explications en anglais. Du coup j'ai trouvé ma solution. J'ai simplement rajouté un paramètre mousemove (expliqué ici : http://www.jquery-fr.com/manuel/Les-...nts/mousemove/) et du coup je ne suis plus limité par les changements de surfaces, même accolées. Voilà le résultat : http://jsfiddle.net/vt6fbx60/5/