jQuery. Активные зоны на фотографиях

Во многих социальных сетях стало модно давать возможность пользователям аннотировать произвольно выбранную ими зону на фотографии. Впервые, видимо, это было сделано на Flickr.com. Сделать такой сервис можно с помощью плагина jQuery Image Annotation. С помощью него легко создается горячая зона. Если потом двигать мышью по этой активной зоне, будет появляться всплывающая аннотация (tooltip).

Пример работы (demo) и источник (внешка)

Для работы плагина, сначала надо подключить библиотеки jQuery и jQuery UI и файлы плагина jquery.annotate.js и annotation.css.

Код: Выделить всё

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.5.3.min.js"></script>
<script type="text/javascript" src="js/jquery.annotate.js"></script>

<style type="text/css" media="all">@import "css/annotation.css";</style>

После этого добавим необходимый скрипт инициализации плагина и выведем пару активных зон с подсказками

Код: Выделить всё

<script language="javascript">
  $(window).load(function() {
    $("#toAnnotate").annotateImage({
      editable: true,
      useAjax: false,
      notes: [ { "top": 286, 
                 "left": 161, 
                 "width": 52, 
                 "height": 37, 
                 "text": "Small people on the steps", 
                 "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5", 
                 "editable": false },
               { "top": 134, 
                 "left": 179, 
                 "width": 68, 
                 "height": 74, 
                 "text": "National Gallery Dome", 
                 "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe", 
                 "editable": true } ]   
    });
  });
</script>

Функция $(window).load(function()) нужна для того выполнять скрипт, только после того как все картинки на странице были загружены.

HTML код:

Код: Выделить всё

<html>
  <head>
    <title>Demo Page</title>
  </head>
  <body>
    <div>
      <img id="toAnnotate" src="images/trafalgar-square-annotated.jpg" alt="Trafalgar Square" />
    </div>
  </body>
</html>

Плагин может работать с зонами не только в статическом режиме, но и загружать, обновлять и удалять их используя AJAX. Зададим Get, Save и Delete URLы, и переключим флаг useAjax в состояние true.

Код: Выделить всё

$(window).load(function() {  
                $("#toAnnotate").annotateImage({  
                    getUrl: "get.php",  
                    saveUrl: "save.php",  
                    deleteUrl: "delete.php",  
                    useAjax: true  
                });  
            });

Сервер должен возвращать в ответ на запрос получения зон данные в формате JSON

Код: Выделить всё

[ { "top": 286,  
    "left": 161,  
    "width": 52,  
    "height": 37,  
    "text": "Small people on the steps",  
    "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",  
    "editable": false },  
  { "top": 134,  
    "left": 179,  
    "width": 68,  
    "height": 74,  
    "text": "National Gallery Dome",  
    "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",  
    "editable": true } ]