Vous souhaitez mettre en place un système de tag d’images comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer ? jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.
Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.
<html>
<head>
<style type="text/css" media="all">@import "./css/annotation.css";</style>
<script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.7.1.js"></script>
<script type="text/javascript" src="./js/jquery.annotate.js"></script>
<script language="javascript">
$(window).load(function() {
$("#toAnnotate").annotateImage({
editable: true,
useAjax: false,
notes: [ { "top": 286,
"left": 161,
"width": 70,
"height": 70,
"text": "Edites moi !",
"editable": false },
{ "top": 134,
"left": 179,
"width": 100,
"height": 80,
"text": "Ne m'édites pas !",
"editable": true } ]
});
});
</script>
</head>
<body>
<div class="main-content">
<img src="./monImage.png" id="toAnnotate" />
</div>
</body>
</html>
Voici un exemple concret : Exemple
En conclusion il s’agit d’un plugin très intéressant, mais il est destiné à un nombre très restreint de projets, du fait de sa spécificité.
