В виртуальных турах формата HTML5, создаваемых в программе Pano2VR курсор мыши отображается как стандартная стрелка. То ли это недоработка, то ли это так должно быть. В данной статье, вы узнаете, как заменить курсор на "Grabbing cursor" – руку, которая при нажатии кнопки мыши в области панорамы принимает вид зажатой руки. Таким же образом можно будет установить любой курсор, в том числе и собственный.

Первый пример показывает, как выглядит просмотр панорамы со стандартными курсором.

Вид курсора Grab / Grabbing

В этом примере будет произведена замена стандартного курсора. Как выглядят курсоры вы можете проверить, наведя курсор мыши на слова "Grab" и "Grabbibg" в заголовке раздела.

Создадим два правила CSS в секции style. Селектор .cursor-grabing определяет вид курсора при нажатии кнопки мыши. Селектор .cursor-grab определяет вид курсора при не нажатой кнопке мыши.

Важный момент. Элементам оформления (скина), таким как кнопкам, необходимо назначать вид курсор вида pointer, или стандартный для остальных элементов, через свойства CSS в настройках элемента. Это нужно для того, чтобы вид курсора не перекрывался тем, что будет установлен.

.cursor-grabing {
   /* cursor: url(images/grabbing.cur); Собственный курсор */
   cursor: -webkit-grabbing !important;
   cursor: -moz-grabbing !important;
   cursor: grabbing !important;
}

.cursor-grab {
   /* cursor: url(images/grab.cur); Собственный курсор */
   cursor: -webkit-grab !important;
   cursor: -moz-grab !important;
   cursor: grab !important;
} 

Обязательно используем декларацию !important для повышения приоритета свойств CSS.

В секции script после инициализации объекта pano добавим следующий код, написанный с использованием библиотеки jQuery.

$("#container > div:first").find("div:eq(1)").on({
  //Нажатие кнопки мыши
  "mousedown": function (e) {
    //Меняем классы с cursor-grab на cursor-grabing
    $(this).addClass("cursor-grabing");
    $(this).removeClass("cursor-grab");
    return false;
  },
  //Отпускание кнопки мыши
  "mouseup": function (e) {
    //Меняем классы с cursor-grabing на cursor-grab
    $(this).removeClass("cursor-grabing");
    $(this).addClass("cursor-grab");
  }
});

//Текущий вид курсора
$("#container > div:first").find("div:eq(1)").addClass("cursor-grab"); 

#container – это идентификатор элемента, который служит областью воспроизведения панорамы.

Вид курсора в зависимости от режима DRAG / MOVE

А что если вид курсора устанавливать в зависимости от режима вида: перетаскивание (Drag), когда зритель нажимает кнопку мыши и перетаскивает панораму нужную сторону (этот режим включен по умолчанию), или движение (Move), когда панорама вращается в сторону, куда смещается курсор относительно точки, где была нажата кнопка мыши.

Для этого создадим еще одно правило, определяющее курсор в виде стрелок, направленных в четыре стороны.

.cursor-move {
  cursor: move !important;
} 

Код скрипта будет следующим:

$("#container > div:first").find("div:eq(1)").on({
  //Нажатие кнопки мыши
  "mousedown": function(e) {
    //Определяем режим вида
    if (pano.getViewMode() == 0) {
      //Если это 0, значит режим move
      $(this).addClass("cursor-move");
    } else {
      //Иначе - drag
      $(this).addClass("cursor-grabing");
      $(this).removeClass("cursor-move");
    }
    //Вне зависимости от режима удаляем класс cursor-grab
    $(this).removeClass("cursor-grab");
    return false;
  },
  //Отпускание кнопки мыши
  "mouseup": function(e) {
    //Вне зависимости от режима удаляем класс cursor-grabing
    $(this).removeClass("cursor-grabing");
    //Определяем режим вида
    if (pano.getViewMode() == 1) {
      //Если это 1, значит режим drag
      $(this).addClass("cursor-grab");
    }
  }
});

//Текущий вид курсора
if (pano.getViewMode() == 0) {
  $("#container > div:first").find("div:eq(1)").addClass("cursor-move");
} else {
  $("#container > div:first").find("div:eq(1)").addClass("cursor-grab");
}

В отличие от режима drag, в котором курсор имел 2 состояния, в режиме move курсор будет одинаков при нажатой и при не не нажатой кнопке мыши.

Собственный курсор

Собственный курсор устанавливается через CSS c указанием имени файла курсора.

.cursor-custom {
  cursor: url(images/custom.cur), auto !important;
}

В качестве имени файла указывается изображение в формате .png и .cur. Формат .png поддерживается не всеми браузерами. Поэтому рекомендуется использовать формат .cur.

Если кому-то нужны коды скриптов на чистом Javascript, пишите в комментарии.

Демонстрационные примеры не оптимизированы под мобильные устройства. Рекомендуется просмотр в браузерах на ПК.

Исходный код примеров можно просмотреть в браузере, нажав специальную комбинацию клавиш. Обычно это Ctrl + U.