faceMocion.js で別のアイコン画像を加えたい

Question

前提

あるSNSサイトを作っています。そこで、ユーザーの投稿に、いわゆる「いいね！」機能、リアクション機能を実装しようと、faceMocion.jsというプラグインを導入したいと考えています

製作者さまのGitHub

• https://github.com/oscaruhp/FaceMocion

製作者さまによるデモページ

• http://oscaruhp.github.io/FaceMocion/

このプラグインで使われているリアクション画像の順番を入れかえたり、いいね！する前の空 (白抜き) のいいね！画像を加えようとしています。

課題

しかし、ダウンロードしたプラグインの中を見てもそれぞれのリアクション画像が見当たらず、どのようにリアクション画像を表示しているのかがわかりません

なので、このプラグインがどういうテクニックを使ってそれを実装しているのか、何を検索して調べたらいいのか、ご意見やヒントをいただきたいです

試したこと

• ダウンロードしたソースコードを調べました
• サンプルをブラウザで表示し、developper toolで挙動を調べました

Answer 1

ダウンロードしたzipファイルを展開した中にある、「sqhTN9lgaY1.png」が、表示されるリアクション画像の一覧になっています。

この画像ファイルを編集すれば、順番を入れ替えたり、差し替えたりすることが可能だと思います。
（縦横のサイズ（48pixel）は固定。もしサイズを変える場合は、CSSも修正する必要があると思います）

どのようにリアクション画像を表示しているのかがわかりません

js（jQuery）でcss中に指定した画像の表示位置を切り替えているものと思われます。

faceMocionExampleフォルダ内のindexExample.htmlをブラウザで開くと実際の動作を確認できます。

Comments

[退会済みユーザー]

とても早いご回答をありがとうございました。要領がわかりました。一つの画像の表示位置を切り替えることで、それぞれのリアクションを表示しているのですね

ソースコードをよく調べてみると、たしかに、そのような箇所が見つかりました

とても助かりました！