Showmaparea

0/5 (1 avis)

Vue 4 623 fois - Téléchargée 443 fois

Description

ShowMapArea est une suite de fonctions qui permet de visualiser les zones définies
dans des map d'image.
Le but est non seulement de vérifier, durant la phase de développement du site, si les
coordonnées des areas (rect, circle, polygon) sont bien précises,
mais également d'être intégré au site au profit de l'internaute afin de lui montrer
certaines zones particulières, au survol de la souris, lors d'un click, ...

ShowMapArea sait gérer plusieurs images sur une même page, spécifier des couleurs
différentes en fonction des formes (CSS), ...

Les options mises à dispositions sont les suivantes:
- Affichage et effacement de toutes les areas de toutes les images,
- Affichage et effacement de toutes les areas d'une seule images,
- Affichage et effacement d'une seule area particulière.

Les Areas peuvent être seulement entourées ou bien remplies de façon opaque.
Bien que des classes soient déjà prédéfinies par CSS, le programmeur peut définir une classe
particulière à sa convenance pour un area spécifique.

Le principe est le suivant:
- Création d'un tableau avec toutes les areas avec un flag visible ou non
ce principe permet d'afficher chaque area indépendamment
- Création d'un div pour chaque areas avec la classe correspondant à sa forme
malgré les différentes shapes possibles, les divs seront toujours rectangulaires
- Appel à un timer qui balaye le tableau des areas pour les afficher ou les affacer
en fonction de leur flag visible ou non

Fonctions à appeler:
initShowArea(); Initialisation à placer dans le onload du body <body onload="initShowArea();">
showAllArea(); Affichage de toutes les areas de toutes les images
hideAllArea(); Effacement de toutes les areas de toutes les images
showImgArea(idImg); Affichage de toutes les areas d'une seule image, en transmettant son Id
hideImgArea(idImg); Effacement de toutes les areas d'une seule image, en transmettant son Id
showOneArea(idArea); Affichage d'un seul area, en transmettant son Id
hideOneArea(idArea); Effacement d'un seul area, en transmettant son Id
swapOneArea(idArea); Bascule entre l'état visible et non visible d'un seul area, en transmettant son Id

showTabArea(); Ouvre un popup avec un tableau des areas trouvées dans la page et leur statut.
Cette fonction est utile en phase de développement, elle permet de voir si toutes
les areas ont bien été prises en compte.

CSS personnalisés:
Des CSS prédéfinis permettent de donner un style à chaque shape d'Area. Les classes sont installées au moment
de lacréation de la div.
Si la div existe déjà, programmée en html, la classe n'est pas touchée, le programmeur peut alors donner
le style de son choix: exemple

<!-- div personnalisée -->
<div id="divAreaxxx" class="maClasseArea" style="position:absolute; display:none;"><br /></div>

Important: l'Id de la div est en rapport étroit avec celui de l'Area auquel il se rapporte. Il est constitué
du préfixe "divArea" + l'id de l'Area. Si cette convention n'est pas respectée, la div sera ignorée,
un nouvelle sera créee avec son style par défaut.

Source / Exemple :


Source trop long: 500 lignes

Conclusion :


Simple à mettre en place, ce petit bout de code permet d'agrémenter un site en apportant une petite touche d'interactivité colorée.

Codes Sources

Ajouter un commentaire Commentaire
Messages postés
14
Date d'inscription
vendredi 19 novembre 2010
Statut
Membre
Dernière intervention
5 juin 2013

Bonjour, chargé ce zip puis ouvert, quelques remarques :
Rajouter les fermetures de Balise/ en fin de Code, ainsi que les alt="" sinon une brouette d'erreurs de non conformité aux Normes du W3C !
De même, la shape=polygon n'existe pas, à remplacer tant dans le .css que le .js par poly !
Ces rectifications faites, affiche la conformité espérée.
Néanmoins, avec ou sans ces erreurs corrigées, le résultat est le même, à savoir que les shapes affichées ne sont toutes que des rectangles ? ? ?
Ce qui est d'ailleurs visible sur la capture d'écran donnée en exemple, où le marteau, censé présenter un polygone avec treize paires de coordonnées affiche le même résultat. De même, le clou, censé présenter un cercle, affiche lui aussi vaillamment un rectangle !
Dommage, j'espérais pouvoir utiliser cette source pour dessiner les Départements de la France, mais non fonctionnelle ? Je vais essayer de me pencher sur le Code JavaScript car je pense qu'il s'agit d'une bête erreur de création de tableaux, néanmoins n'étant qu'un "bidouilleur de bas étage", combien de temps vais-je mettre...
Bien cordialement, Yvanoph---

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.