Showmaparea
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.
Simple à mettre en place, ce petit bout de code permet d'agrémenter un site en apportant une petite touche d'interactivité colorée.
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.
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.