TIPS

マウスのカーソルを好きな画像に変更する

2017/10/10

以前仕事で、マウスのカーソル(ポインター)の変更を行ったところ、意外と簡単にできたので、実装方法をメモとして残しておきます。CSSとjQueryのいずれかで変更することができます。

CSSで変更する

まずはカーソルに使用したい画像を用意します。画像の形式は「png」などでも表示されるブラウザもあるようですが、IEまで含めたブラウザに対応しているのは「.cur」または「.ani」になります。そのため作成した画像を変換する必要があります。今回は様々な形式に変換が行える便利なオンラインサービス「Convertio」を利用しました。

続いて、マウスのカーソルを変更したいエリアを対象にCSSを設定します。サイト全体であれば「body」に指定してください。マウスのカーソルは「cursor」プロパティの値を画像のURLにすることで変更が可能です。画像のカンマの後の指定は画像が表示されない場合に備えたものですので、任意の値を指定してください。

CSS
.change {
  cursor: url(original.cur), auto;
}

デモはページの最後のほうに設置していますのでそちらでご覧ください。

jQueryで変更する

映画「Free Fire」の公式サイトでは、この方法でカーソルがオリジナルの画像に変更されています。トップページの両端にあるグレーのエリアにマウスを置いてみてください。このエリアにマウスがある時だけカーソルの画像が変わります。

それでは実装方法ですが、jQueryの場合は、まずカーソルを変更したいエリアの中に変更後のカーソルの画像を「img」タグで読み込みます。CSSではエリア内ではカーソルを非表示にし、class名の有無によって画像の表示/非表示が切り替わるようにします。

次にJavaScriptでの設定ですが、「エリアにマウスを置いたら画像を表示/エリアからマウスが外れたら画像を非表示」と「カーソルの画像をマウスに追従させる」の2つを設定します。画像の表示/非表示は「addClass/removeClass」で行います。マウスの追従は、マウスの位置を取得し、その値を画像のCSSとして設定します。マウスと同じ位置に画像が表示され、マウスが動くと画像も一緒に動くため、マウスのカーソルが変わったように見えます。

HTML
<div class="change">
  <img src="original.png" alt="">
</div>
CSS
.change {
  position: relative;
  cursor: none;
}

.change img {
  position: fixed;
  visibility: hidden;
  opacity: 0;
}

.change.on_mouse img {
  visibility: visible;
  opacity: 1;
}
JavaScript
$(function(){
  //マウスが置かれたらclass「on_mouse」を追加、外れたら「on_mouse」を削除
  $('.change2').on('mouseover', function() {
    $(this).addClass('on_mouse');
  }).on('mouseout', function() {
    $(this).removeClass('on_mouse');
  });

  //マウスの位置にあわせて画像のCSSを指定
  function mouseMove(e) {
    $('.change2 img').css({
      'top': e.clientY,
      'left': e.clientX
    });
  }
  $('.change2').on('mousemove', mouseMove);
});

参考:「カーソルの形を変更する」, <http://www.tagindex.com/stylesheet/page/cursor.html> (参照2017-10-8)

参考:「マウスに追従する吹き出しを表示」, <http://php.o0o0.jp/article/jquery-mouse_balloons> (参照2017-10-8)

SHARE