javascript ポインタ周辺のスポットライト

質問

こんばんは。
javascriptについて質問させていただきます。

ホームページに模索要素を取り入れようと思い
マウスのポインタの周辺だけ背景(等)を表示するソースを探しています。

色々探して
http://sintarohtmlcss.com/JAVASCRIPT/other06.html
のソースへ辿り着いたのですがIE専用であり、使用出来ないで困っています。

もし、この様なソースが記述されてますサイトをお教え頂ければ幸いです。

何卒、宜しくお願い致します。

回答No.2

fujillin · ベストアンサー

ご提示のサイトにも書かれている通り、filterの効果はIE独自の拡張なので一般のブラウザでは同様の方法は実現できません。

似たような効果を出そうとするならと考えてみると…
透過GIFやpngの画像でスポットライト部分が透明なものを用意しておいて（他はブラックアウト）、これをposition:abusoluteでマウスに追随させて移動させるという仕組みを思いつきます。（丸い穴の開いたレイヤーで、元の表示を覆って見るような感じ）
ただし、使用するのが固定の画像なので、filterのように微妙に変化するライティング効果は出ませんけど。（周囲をぼかす程度は画像で可能）

カバーする画像はウィンドウの中を動くので、そのままだとウィンドウサイズの約4倍（縦2倍×横2倍）のサイズが必要となってしまいます。
これを避けるために実際には、ほぼライトの部分の大きさだけの画像を用意してそれを動かし、残りの周辺部分はdiv要素などで上下左右を埋めるということになるのでしょうか。

マウスに追随してアイコンなどが追いかけてくるスクリプトがあるのをご覧になったことがあると思いますが、スポットライト（画像）がマウスに追随して移動するあたりはそのまま参考になるのではと思います。周辺の要素（divなど）のサイズを調整するのは、（↑）の部分ができればそれほど難しくはないでしょう。

一方で、この方法の欠点は、本来の表示の上に一枚レイヤーを被せたようになってしまうために、（下の）リンクやボタンなどをクリックしても反応しなくなってしまうこと。（他にも方法があるかも知れませんので、この問題も同時に解決できるものがあるといいのですが、今のところ思いつきません）

クリックされた位置から下の要素を割り出して、クリックの効果を反映することも可能だとは思われますが、こちらの部分のほうが返って作成するのが面倒かも…

お礼

そうですか・・・。
でも大変分かりやすい返答を頂きまして有難う御座います。
別の方法で何か考えてみようと思います。

回答No.1

yyr446

CSSのfilter:light();は確かにIEのみですね。

IEは、ほっといていいならHTML5の<canvas>要素使えるかも。
<div>の代わりに<canvas>かぶせちゃって、マウスポインター付近にグラデーションかけて穴を空けるしかないか！。

待てよ他にも方法あるかもしれん