こんばんは。
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で質問しましょう!
似たような質問が見つかりました
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
- HTML・CSS ホームページにブログ記事をサムネイル付きで掲載する方法 2 2022/11/25 14:55
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript Javascriptで出来ること 1 2022/05/16 20:19
- JavaScript Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい 5 2023/08/04 01:22
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Lightbox2でのキャプションにつ...
-
クリックで背景変更するタグ
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
JavaScript で flexslider の画...
-
JavaScriptとチェックボックス...
-
スライドショー作成方法。
-
JavaScriptでの画像切替について。
-
スライダーを実装した場合、ペ...
-
代替文字が表示されなくなった...
-
Java Scriptの画像切り替えにつ...
-
VB2005 でビットの深さ8の画像...
-
ロールオーバーで切り替えられ...
-
スワップイメージが上手く動作...
-
JavaScript スライドの画像にリ...
-
右クリック禁止スクリプト挿入法
-
javascriptを使用し、別窓をサ...
-
Photoswipeのアニメーションの変更
-
一定日本時間で画像変更 Java S...
-
画像のサイズが取得できません
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報