最近「キーワード」をマウスでクリックしたり、乗せたりするとキーワードの説明が、キーワード付近に表示されるサイトを見ます。
その実装方法が分からずに困っています。
下記の流れで実現するのかと考えています。
(1)キーワードの説明分をHTMLの最後に列記してCSSのdisplay:noneで非表示にする。
(2)クリックされた「キーワード」のウィンドウに対するマウス座標をJavascriptで取得する。
(3)座標を元に「キーワード」に対応する説明分をCSSで絶対配置してdisplay: blockで表示する
特に(2)の方法が分からずにいます。
上記の流れでよいのかも自信がないです。どのような方法でも実現できれば大変うれしいです。手がかりだけでも教えていただければと考えています。
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
大雑把に書いたもので、余分なところも結構ありますが、こんなのはどうですか?
positionのtop(getPos(Event,obj)[0])、left(getPos(Event,obj)[1])の位置を返す予定です。
objは表示させたい要素です。
Eventはイベントです。
IE6,Firefox1.5,Opera8,9.1には対応すると思いますよ。
function getPos(Event,obj){
var CSS = document.compatMode == 'CSS1Compat'
if(CSS){ var BElem = document.documentElement }
else { var BElem = document.body }
if(window.innerHeight != undefined){
var EffectiveWidth = window.innerWidth //有効範囲幅
var EffectiveHeight = window.innerHeight //有効範囲高さ
}else{
var EffectiveWidth = BElem.clientWidth //有効範囲幅
var EffectiveHeight = BElem.clientHeight //有効範囲高さ
}
var EMouseX = Event.clientX //有効範囲上のマウス座標X
var EMouseY = Event.clientY //有効範囲上のマウス座標Y
var ScrollLeft = BElem.scrollLeft //横スクロール量
var ScrollTop = BElem.scrollTop //縦スクロール量
if(Event.pageX != undefined){
var MouseX = Event.pageX //横スクロール量込みマウス座標X
var MouseY = Event.pageY //横スクロール量込みマウス座標X
}else{
var MouseX = EMouseX + ScrollLeft //横スクロール量込みマウス座標X
var MouseY = EMouseY + ScrollTop //横スクロール量込みマウス座標Y
}
var RMenuWidth = obj.clientWidth //RMenu幅
var RMenuHeight = obj.clientHeight //RMenu高さ
var RMenuRight = EMouseX + RMenuWidth
var RMenuBottom = EMouseY + RMenuHeight
if(EffectiveHeight < RMenuBottom){ var Top = MouseY - RMenuHeight }
else{ var Top = MouseY }
if(EffectiveWidth < RMenuRight){ var Left = MouseX - RMenuWidth }
else{ Left = MouseX }
return new Array(Top,Left)
}
大雑把な流れですがご参考になれば・・・
早速のご回答ありがとうございます。
詳しいサンプルコードを掲載していただき、
ありがとうございます。
ご質問した処理は,
現在の自分の力では難しく本当に行き詰っていましたが、
掲載頂いた関数を利用することで、
当初の目的どおりの処理が達成できました。
またJavascriptの便利さと素晴らしさを実感しました。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Amazon アマゾンで出版中の本の販売部数を伸ばすためには、どうすれば良いですか? 4 2022/08/18 23:30
- その他(開発・運用・管理) 複数のサイトから、同じキーワードの出現の数をとれるサイトを教えてください。 1 2022/07/13 15:42
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- YouTube ヤフーニュースで特定のニュースを非表示にする方法をおしえてください 1 2022/05/22 09:15
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Dropbox Dropbox 4 2022/05/05 17:18
- オープンソース ChatGPTをスプレッドシートと連携して自動でリサーチしたいんですがうまく出来ません。。。 1 2023/05/05 15:59
- Perl Perlで特定文字列から特定文字列までを抜き出したい 4 2022/04/02 14:24
- その他(IT・Webサービス) スマートニュース内のクロスワードパズル 2 2023/03/31 17:49
- SEO 検索候補に見られたくないキーワードがある 2 2022/09/19 17:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
JavaScriptで決まった「時刻」...
-
jqGridについて
-
C#OpenCv V4にのエラーに関する...
-
ローカルにあるファイルを検索...
-
C# 演算 奇数と偶数 表現の仕方
-
VSCODE[Python]の設定について
-
ASP.NETのコントロールの値をJa...
-
1日1回だけ引けるjavascriptお...
-
イベントが初めの一回しか起き...
-
1日1回だけ引けるjavascriptお...
-
C# 演算 分岐処理 繰り返し処理
-
イラストレーターでドキュメン...
-
シンプルなweb版スタンプラリー...
-
チェックボックスのチェック保持
-
javascriptでテーブルに追加し...
-
【javascript】正規表現で括弧...
-
gas スプレッドシートがアクテ...
-
なぜmatchメソッドがエラーにな...
-
カンマで終わってるのはセミコ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
HTMLで作った時報アプリが動き...
-
javascriptでテーブルに追加し...
-
html javascript リンク先アド...
-
【西暦等の変換】
-
ローカルにあるファイルを検索...
-
ASP.NETのコントロールの値をJa...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
カンマで終わってるのはセミコ...
-
JavaScriptで文字列の特定文字...
-
javascriptでiframeのURL変更は?
-
APIを使って埋め込んだグーグル...
おすすめ情報