マウスオンで画面中央に別の画像を表示する方法

質問

マウスが文字や画像の上にきた時（マウスオン）に、lightboxのように、画面の中央に別の画像を表示させるには、どうやればいいのか教えてください。
javaの関連記事を検索していますが、元の画像の位置が基準となっているものばかりです。
現在は、lightboxでしていますが、これは、クリックする必要があるので、マウスオンでやりたいと思っています。よろしくお願いします

回答No.2

ORUKA1951

JavaScriptじゃなく、CSSを使うほうが楽なのでは？？
[例]
http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html
で、表示⇒スタイルシートで[標準(縦並び)]や「画像下」のスタイルシートがあてはまるのではないかと・・

回答No.1

fujillin

考え方のみですが…

とりあえず、画面スクロールがないものとして、
　1）画面ののサイズを取得
　2）表示する画像のサイズを取得
　3）表示する画像をposition:absoluteで配置できるようにしておいて、
　4）画像のleft、topにそれぞれ、（画面サイズ - 画像サイズ）/2を設定する
で、中央に表示できると思います。

lightboxなどの場合は、画像の背後に半透明の黒バックなどをいれていると思います。
画面のスクロールがある場合は、スクロール量を取得して上記にプラスしてあげればよろしいでしょう。

＞マウスオンでやりたいと思っています。
上記の処理を、mousuoverのイベントハンドラとして設定してあげればよろしいかと。