JavaScriptでつくるマウスストーカーについて

以下のサイトのマウスストーカーですが、
http://oekakirenn.webcrow.jp/mouse/mouse_moji1.h …
これを星や花などの画像で行うことは可能でしょうか？
☆などの文字でも構いません。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2017/03/13 17:29

こんにちは

ご提示のサイトのマウスストーカーの単位要素となっているものは、5×1ピクセルの縦長DIVと1×5の横長DIVを組み合わせて「＋」状に表示したものを更にDIV要素で包含したものでできています。
位置の制御などは、包含しているDIV要素を制御することで行っているようです。

ですので、包含DIVの中に画像を入れたり、文字を入れたりするように変えるだけで、ほぼそのままでご質問の内容を実現することが可能と思われます。

一方で、マウスストーカーを実現する方法はご提示のものが唯一というわけではありませんので、他にもいろいろな実現方法は考えられることでしょう。

この回答へのお礼

fujillin様

ご回答ありがとうございました。
不勉強で恥ずかしいのですが、提示サイトのソースのどの辺りを
編集すれば（例えばimg.jpg) 似た挙動が得られますでしょうか？

"5×1ピクセルの縦長DIVと1×5の横長DIVを組み合わせて「＋」状に表示したものを更にDIV要素で包含したものでできています。"
"ですので、包含DIVの中に画像を入れたり、文字を入れたりするように変えるだけで、ほぼそのままでご質問の内容を実現することが可能と思われます。"

このあたりぼんやりとしか理解できませんでした。
お手数をお掛けいたしますが、具体的なソースをご教授お願い致します。

お礼日時：2017/03/13 18:38

No.3 回答者： fujillin 回答日時： 2017/03/14 10:05

ANo2です。

＞お手数をお掛けいたしますが、具体的なソースをご教授お願い致します。
ANo1様がすでに提示なさっていますが、ご質問のサイトに紹介されているマウスストーカーの中にも画像利用のタイプのものがいろいろあります。

＞参考に致します。
とのことなので、すでにご覧になっていることと思いますが、見た目に似た雰囲気のものの例
http://oekakirenn.webcrow.jp/mouse/mouse_e8.html
スクリプトの作り方が、ご質問文でリンクしているものとはかなり違うようですが、どうやら、別の方が作成されたものを単に紹介しているということのようですね。

検索してみると、他にもいろいろ見つかります。例えば、
http://hakobe932.hatenablog.com/entry/2015/03/09 …
こちらは、★の文字（テキスト）のようにも見えますが、使用しているのは画像のようです。また、ごく簡単な作成上の解説もなされています。
ご自身でも検索なさってみれば、他にも数多く見つかるものと思います。


スクリプトがわからない場合は、画像ベースのものでお気に召すものを探して、画像だけを入れ替えて利用するという方法が簡単だと思います。

解説を読めば理解できるようであれば、自分好みのものを自由に作成することも可能でしょう。
http://www.bing.com/search?q=%e3%83%9e%e3%82%a6% …

この回答へのお礼

fujillin様

ご回答有り難うございました。
色々勉強してみます。

お礼日時：2017/03/14 10:52

No.1 回答者： moon-and-star 回答日時： 2017/03/13 17:01

これは参考にならない？

http://oekakirenn.webcrow.jp/mouse_setumei.html#ga

この回答へのお礼

moon-and-star様

ご回答ありがとうございました。参考に致します。

お礼日時：2017/03/13 18:38