![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
こんばんは。
javascriptについて質問させていただきます。
ホームページに模索要素を取り入れようと思い
マウスのポインタの周辺だけ背景(等)を表示するソースを探しています。
色々探して
http://sintarohtmlcss.com/JAVASCRIPT/other06.html
のソースへ辿り着いたのですがIE専用であり、使用出来ないで困っています。
もし、この様なソースが記述されてますサイトをお教え頂ければ幸いです。
何卒、宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
ご提示のサイトにも書かれている通り、filterの効果はIE独自の拡張なので一般のブラウザでは同様の方法は実現できません。
似たような効果を出そうとするならと考えてみると…
透過GIFやpngの画像でスポットライト部分が透明なものを用意しておいて(他はブラックアウト)、これをposition:abusoluteでマウスに追随させて移動させるという仕組みを思いつきます。(丸い穴の開いたレイヤーで、元の表示を覆って見るような感じ)
ただし、使用するのが固定の画像なので、filterのように微妙に変化するライティング効果は出ませんけど。(周囲をぼかす程度は画像で可能)
カバーする画像はウィンドウの中を動くので、そのままだとウィンドウサイズの約4倍(縦2倍×横2倍)のサイズが必要となってしまいます。
これを避けるために実際には、ほぼライトの部分の大きさだけの画像を用意してそれを動かし、残りの周辺部分はdiv要素などで上下左右を埋めるということになるのでしょうか。
マウスに追随してアイコンなどが追いかけてくるスクリプトがあるのをご覧になったことがあると思いますが、スポットライト(画像)がマウスに追随して移動するあたりはそのまま参考になるのではと思います。周辺の要素(divなど)のサイズを調整するのは、(↑)の部分ができればそれほど難しくはないでしょう。
一方で、この方法の欠点は、本来の表示の上に一枚レイヤーを被せたようになってしまうために、(下の)リンクやボタンなどをクリックしても反応しなくなってしまうこと。(他にも方法があるかも知れませんので、この問題も同時に解決できるものがあるといいのですが、今のところ思いつきません)
クリックされた位置から下の要素を割り出して、クリックの効果を反映することも可能だとは思われますが、こちらの部分のほうが返って作成するのが面倒かも…
No.1
- 回答日時:
CSSのfilter:light();は確かにIEのみですね。
IEは、ほっといていいならHTML5の<canvas>要素使えるかも。
<div>の代わりに<canvas>かぶせちゃって、マウスポインター付近にグラデーションかけて穴を空けるしかないか!。
待てよ他にも方法あるかもしれん
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
透過pngの透明部分以外をクリッ...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
Javascriptで指定した日付と時...
-
Twitterの埋め込みしたWebペー...
-
クリッカブルマップの一部分だ...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
JQueryを使用して画像をゆっく...
-
リロードさせるには?
-
MAX関数を使ってからLEFT JOIN...
-
チェックボックスに入っている...
-
jquery ドロップダウンメニュー...
-
読み込んだQRコードをフォーム...
-
C言語のポインタ表現
-
javascript ループがうごかない
-
Colorboxがうまく設置できません
-
JQueryタブのアクティブ アン...
-
Ctrl+F(検索)の窓を出したいの...
-
CSS のみのタブ切り替えについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックすると複数...
-
Javascriptで指定した日付と時...
-
1枚の画像をクリックして複数の...
-
ボタンをクリックした時に、キ...
-
画像の重なりの順序を代える方...
-
【java】背景画像を一定時間で...
-
オンマウスで、画像切り替え+...
-
javascriptで毎月替わる画像
-
画像がプルプルふるえるんです。
-
jQueryスライドショー画像への...
-
HTMLで条件分岐はできますか?
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
中心を軸にくるくる回るjQuery ...
-
プルダウンの位置がwin/macでず...
-
bxsliderにて読み込み後に内容...
おすすめ情報