Image marker annotation

Télécharger le projet
Commenter

Description

le script ajoute des marker dans une image pour ce faire il y a un éditeur wysiwyg qui vas permetre de créer et visualiser l'image avec les markeurs et generera un fichier json de configuration qui sera inserer avec le fichier js dans la page.
on peut aussi ouvrir un fichier precedement créer. J'ai fais en sorte de mettre un maximum de possibilité de configuration.

pour la derniere mise a jour j'ai ajouter l'encapsulation des image pour les marker dans le fichier généré j'ai hésiter a faire de meme pour l'image de fond mais sa risque de faire grossire fortement le fichier et en conséquence sont chargement. Il faut donc juste preciser l'image de fond et son emplacement.

l'ensemble est partielement responsive car il s'adapte a la taille du conteneur mais ne peut etre redimentionné a chaud.

techniquement c'est du pur dhtml utilisant donc le combo html js css.Le tout étant étant asser long surtout l'éditeur il y a peut de commentaire j'ai tout de meme fait en sorte de donner des nom de variable et fonctions explicite.

precision au sujet de l'éditeur quand on charge un marker il suffit de faire un drag & drop du marker a partir de la fenetre de visualisation du marker vers la fenetre de visualisation de l'image.

mise en place:

pour la mise em place on insere le fichier de configuration json et le fichier js et la partie css dans la page les deux principale contrainte sont la declaration d'un div conteneur et l'utisation d'une fonction qui doit s'appeler marker_action() si on veut interagir avec les marker au click mais dans ce cas il faudra activer l'option (ativer action au clic).

pour le generateur il y a rien a faire on clique dessus et il se lance.

pour la visualisation dans le navigateur

on inserre donc dans le header de la page le chemin du fichier "zoom_plot.js" celui du ou des fichier qui ont éte generé par l'éditeur et le fichier pour le css 

<head>
   <meta charset=utf-8>
 <script type="text/javascript" src="res/zoom_plot.js"></script>
 
 <script type="text/javascript" src="res/vallee.json"></script>
 <script type="text/javascript" src="res/mars.json"></script>
 <script type="text/javascript" src="res/plan.json"></script>
 <link rel="stylesheet" type="text/css" href="res/zoom_plot.css" />

</head>


dans le cas ou l'on desire interagir avec le marker au clic que souris on ajout la fonction marker_action qui retournera l'identifiant donné au marker par l'intermediaire d'un attribut' dataset-identifiant ou une valeur par l'intermediaire de l'' attribut rel correspondant a son ordre de creation dans l'editeur' 

<script>

function marker_action(evt){
alert(evt.currentTarget.dataset.identifiant)
alert(evt.currentTarget.getAttribute('rel'))

}

</script>



concernant le contenu du css il contient le rendu pour le conteneur pour lequel il faudra mettre l'attribut overflow a hidden.la deuxieme class est celle de l'infobull en cas d'utilisation d'infobull pour celle ci il faut respecté le nom de la class en cas de demande il m'est possible de modifier l'editeur afin de definir un nom personalisé pour la class a suivre. 

#conte3{
        cursor:zoom-in;
        width:45%;
        overflow:hidden;  /* important */
        top:20px;
        background-color:white;
        margin:auto;
        border:solid;
        border-color:black;
  border-width:10px;
  border-radius:15px
    }

  /* infobulle */

    .bulle{
        position: absolute;  /* important */
        display: none;
        background: #292929;
        color: white;
        font-family: sans-serif;
        border-radius: 3px;
        font-size: smaller;
        padding: 5px;
        max-width:150px;
    }
 
 .bulle div:first-child{

  font-weight: bold;
  text-decoration: underline;  
 }


page teste
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)