キーワードをクリックすると説明文をする表示方法

質問

最近「キーワード」をマウスでクリックしたり、乗せたりするとキーワードの説明が、キーワード付近に表示されるサイトを見ます。
その実装方法が分からずに困っています。

下記の流れで実現するのかと考えています。

(1)キーワードの説明分をHTMLの最後に列記してCSSのdisplay:noneで非表示にする。
(2)クリックされた「キーワード」のウィンドウに対するマウス座標をJavascriptで取得する。
(3)座標を元に「キーワード」に対応する説明分をCSSで絶対配置してdisplay: blockで表示する

特に(2)の方法が分からずにいます。

上記の流れでよいのかも自信がないです。どのような方法でも実現できれば大変うれしいです。手がかりだけでも教えていただければと考えています。

よろしくお願いします。

回答No.2

noname#23734 · ベストアンサー

大雑把に書いたもので、余分なところも結構ありますが、こんなのはどうですか？
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の便利さと素晴らしさを実感しました。

本当にありがとうございました。

回答No.1

Tetralemma

実装方法
<a href="#" title="キーワードの説明">キーワード</a>

お礼

早速のご回答ありがとうございます。
こういう方法があったんですね。
大変参考になりました。

ありがとうございます。