Введение в MooTools HeatMap

Иногда полезно знать, куда, именно на сайте, кликают пользователи. Например, в какое место картинки или статичного элемента DIV прошел клик.

Благодаря данному соображению и был спроектирован HeatMap: класс MooTools, позволяющий вам следить, загружать, сохранять и отображать точки данной области, куда кликнул пользователь.

ПримерСкачать

CSS

На самом деле нужно только одно объявление класса в CSS. Этот класс отвечает за отображение точек. Пример кода CSS для отображения точки представлен ниже:

Обратите внимание на то, что вы можете управлять размерами точек. Уменьшая или увеличивая margins, вы увеличиваете или уменьшаете точку.

MooTools JavaScript

Класс достаточно компактен. HeatMap позволяет просто загружать и сохранять точки с минимальным JS кодом:

Аргументы для HeatMap:

  • element: элемент на котором будет висеть «прослушка» кликов
  • options: опции для экземпляра класса

Опции для HeatMap:

  • event: (строка, по умолчанию событие) событие для прослушки — по умолчанию, клик мыши
  • load: (объект, по умолчанию {}) Request.JSON объект для загрузки точек
  • method: (строка, по умолчанию «get») Request.JSON тип запроса
  • save: (объект, по умолчанию {}) Request.JSON объект для сохранения точек
  • spotClass: (строка, по умолчанию 'heatmap-spot') класс CSS для стилизации точки
  • zone: (строка, по умолчанию '') «зона» на которой был сделан клик мыши; особенно важно, если зон на странице несколько.

События для HeatMap:

  • onSpot: инициализируется, когда создается точка.

Относительно простой класс. Его можно было бы сделать и сложнее, но оставим его таким, чтобы можно было бы использовать для итераций.

Использование HeatMap

Использование довольно просто:

Намного проще, чем вы могли себе представить! Мы советуем использовать события click, потому как другие типы событий могут ввести в заблуждение пользователей и создать громадное количество данных, например, для событий mouseenter.

MySQL таблица

Выглядит следующим образом:

Скрипт PHP

Мы хотели отметить несколько вещей относительно серверной части кода:

  1. Вы можете использовать любой серверный язык для облегчения загрузки и экономии места. Мы использовали PHP потому, что он знаком нам более всего.
  2. Важно ваше мнение об использовании скрипта сохранения точек.

Ниже PHP код для сохранения и загрузки точек:

Предпочтение отдано компактности кода и общей функциональности в одном файле.

Принесите много тепла!

MooTools HeatMap является занимательной и веселой штукой. Вы сами можете придумать, как и где использовать этот класс. Достаточно посмотреть на пример и вам станет все понятно. Удачи в реализации!


Оставить комментарий