Trucs et astuces pour implémenter une interface web javascript à l'aide de cartes-images HTML

Question

Je voudrais obtenir quelques trucs et astuces pour implémenter une interface web avec JavaScript qui permettrait aux utilisateurs de cliquer sur certaines régions prédéfinies sur une carte et de retourner une liste des régions cliquées en cliquant sur un bouton de soumission. Cette liste sera ensuite envoyée à un serveur (pour cela je peux utiliser la méthode HTTP "post").

1. La première question est: comment définir les régions sur une carte. Je pense à des cartes d'images HTML, mais il semble que ce soit fastidieux car je devrai extraire les coordonnées de chaque région. Je me demandais si elles seraient un moyen de générer automatiquement cette liste à partir d'une image?

2. La deuxième question est: comment stocker la liste des régions cliquées afin que je puisse l'envoyer au serveur lorsque l'utilisateur clique sur le bouton soumettre. Je ne suis pas trop familier avec JavaScript il sera probablement un autre pour des programmeurs JavaScript expérimentés

facile de Merci

Answer 1

1. Vous pouvez utiliser l'une des nombreuses carte images programmes de création là-bas ou trouver un utilitaire pour le faire pour vous: q = image + Tracing + oU + trace + "image + MAP" + oU + hyperimage

2. un champ caché sous une forme peut être mis à jour avec

   [zone onclick = "document.forms [0] .clicked.value + = ', région 3' » ... />

   [zone onclick = "document.forms [0] + = .clicked.value », région4' " ... />

   [forme onsubmit = "var val = this.clicked.value; si (val) this.clicked.value = val.substring (1) ">

   [input type =" hidden » name = "cliqué" value = ""/>

où le script supprime la principale virgule

S'il vous plaît changer le [à < - SO me donne un moment difficile avec le code ci-dessus

Answer 2

1. Cela dépend de l'endroit où vous obtenez vos cartes de Yat-il une API publique. En général, je dirais qu'ils d doit être ajouté manuellement. Pour vous aider à créer une interface qui vous faciliterait la tâche, par exemple en faisant glisser une petite case autour d'une zone spécifique, vous pouvez saisir ses détails tels que le comté, l'indicatif régional, etc.

2. Enregistrer les régions en tant que Tableau 2-multidimensionnel. map[x][y].town = 'uxbridge' puis de déléguer un écouteur d'événement à une image. Découvrez les coordonnées x, y sur lesquelles la souris a été cliquée, faites une boucle dans le tableau de la carte pour voir si elle correspond. L'utilisateur devra cliquer sur un point 1px pour qu'il soit trouvé dans le tableau, donc pour éviter cela, il suffit d'utiliser une valeur d'espacement de 50px, de sorte que le x, y peut être de 50px de toute façon. Puis mettez en surbrillance cette zone et ajoutez-la au tableau de la région.Il y a probablement une meilleure façon de le faire avec <map> et meilleur algorithme pour rechercher le tableau map[], mais vous auriez finalement devoir convertir tous les éléments de la carte [] tableau à <area> qui serait lourd de toute façon

---

En fait, la ferraille qui, <map><area> serait beaucoup plus facile et adapté pour cela. Le plus gros problème ici est de savoir comment obtenir les régions stockées dans le tableau map[], encore une fois c'est le point 1 et tout sur l'API que vous pouvez utiliser, ou les ajouter manuellement via une interface. Ensuite, vous faites une boucle dans le tableau et le transmettez à chacun avec ses coordonnées x, y, w, h à un area et appuyez sur le DOM une fois terminé. Ensuite, ajoutez un écouteur d'événement à chaque OR si vous voulez être beaucoup plus efficace, déléguez un écouteur d'événement sur <map> pour gérer les événements de clic. Ensuite, vous venez de tirer les données du tableau map [] pour cet élément de zone.

Answer 3

J'ai essayé le script maphilight (http://davidlynch.org/js/maphilight/) et il fonctionne très bien mais il semble consommer beaucoup de temps CPU en utilisant des cartes avec de nombreuses zones (j'ai environ 10000 zones). Y aurait-il un moyen de régler cela?

Par ailleurs, il est une version améliorée de ce script ici: http://formidablo.nl/jquery/