• 締切済み

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

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

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

考え方のみですが… とりあえず、画面スクロールがないものとして、 　1）画面ののサイズを取得 　2）表示する画像のサイズを取得 　3）表示する画像をposition:absoluteで配置できるようにしておいて、 　4）画像のleft、topにそれぞれ、（画面サイズ - 画像サイズ）/2を設定する で、中央に表示できると思います。 lightboxなどの場合は、画像の背後に半透明の黒バックなどをいれていると思います。 画面のスクロールがある場合は、スクロール量を取得して上記にプラスしてあげればよろしいでしょう。 ＞マウスオンでやりたいと思っています。 上記の処理を、mousuoverのイベントハンドラとして設定してあげればよろしいかと。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • マウスオンの画像の切り替え

    マウスオンで画像が切り替わるというJAVAソースですが、 違う位置に画像を表示させるというやり方を教えてください。 そのようなサイトをみてソースをみるのですが、 JAVAプログラムは全然知らないので、見ても どこがどうなっているのか、さっぱりわかりません。 本当に初心者とも言えないのですが、 何とか気の長い方、教えてください。

    • ベストアンサー
    • Java
  • lightbox2で画像を天地左右中央に表示させたい

    こちらのLightBox2を使用しております。 http://www.huddletogether.com/projects/lightbox2/ サムネイルの画像をクリックし、背景が暗くなって、画像が現れますが、この画像がどのサイズのモニタで見てもど真ん中（天地左右中央）に表示されるようにするにはどのようにしたら良いのでしょうか。 ウィンドウサイズが変わったときにも合わせて位置を変化してくれたりする方法があるとベストなのですが、どなたか後損の方がいらっしゃいましたら宜しくお願い致します。

  • マウスオン＆アウトで小画面を開閉できないでしょうか？

    JavaScriptで、マウスオンでメッセージを表示する手法がありますが、このメッセージを背景2色+文字色2色で表現する必要が生じました。 単純に１色の背景に１色の文字でない場合は、ちゃんと１枚のページとして表示させないと無理のように思いますが、そうなると、画像のある部分にポインタが乗ると小画面を表示し、ポインタをどかすと小画面が閉じるというスクリプトが必要になります。 このようなスクリプトを公開していらっしゃるサイトをご存知の方や、リンクをクリックすることで小画面を表示するスクリプトを改造してこの目的を達する方法をご存知の方がいらっしゃいましたら、教えて頂けませんでしょうか？ どうかよろしくお願い致します。

  • ＦＣ２ブログで、画像の画面中央に表示にするには？

    ＦＣ２ブログで、記事を書く場所に画像をアップすると、 画面左側に寄ったかたちで表示されるのですが、 画像を中央に表示させることはできるのでしょうか？ 教えてください、よろしくお願いします！

  • javaを使ってマウスオンでの画像切替について

    javaを使って、ある1つの画像にマウスを乗せると、 他の場所にある画像2つが同時に入れ替わるという事を行いたいのですが どうしても上手くいきません。 例えば・・・ ┌─────┐ │◇画像Ａ◇ │ └─────┘ ┌─────┐ │○画像Ｂ○ │ └─────┘ ┌─────┐ │☆画像Ｃ☆ │ └─────┘ とあるとしたら、 画像Aにマウスを乗せた場合、画像Cと画像Dが 他の画像になるようにしたいのです。 ┌─────┐ │◇画像Ａ◇ │←これにマウスオン └─────┘ ┏━━━━━┓ ┃●画像Ｂ● ┃ ┗━━━━━┛←画像Ｂと画像Ｃが ┏━━━━━┓←同時に他の画像に変わる ┃★画像Ｃ★ ┃ ┗━━━━━┛ 画像Ａはマウスを乗せても変化は無いままで、 画像Ｂと画像Ｃは異なる画像です。 マウスを画像Ａから放したら、元の画像に戻るようにしたいと考えています。 さらに、同ページ内に複数使用したいのです。 　　　　 ~~~~~~~~~~~~~~~~~~~~~ if (document.images) { var img0 = new Image(); img0.src = "○画像Ｂ○"; var img1 = new Image(); img1.src = "●画像Ｂ●"; function On(name) { if (document.images) { document.images['ネーム'].src = eval(name + '.src');}} function Off() { if (document.images) { document.images['ネーム'].src = img0.src;}} を応用して、どうにかならないかな…と思ったのですが、 どうにもなりませんでした。 もしかしたら、応用のやり方が間違えているのかもしれません。 あまり詳しくないので・・・。 どこを探してもサンプル等見つからず、困っています。 どなたか教えて下さい。どうぞ宜しくお願いします。

  • 表を画面中央に表示したい

    文字や画像は画面に中央に表示できるのですが、表を作成すると、左端に寄ってしまいます。これを中央に表示させることはできないものでしょうか。 ソフトはホームページビルダー９を使っています。

  • Light boxなどを使わないで画像、文字を同一画面上にそれのみを表示する方法は?

    Light boxなどを使わないでYahooの画像検索のように画面上にある画像や文字をクリックすると同一画面上に背景がオーバーレイ状態になり、クリックした画像、文字のみが表示される方法ってありますか? ご存知の方、教えてください。ヒントでもいいです。よろしくお願いします。

  • 検索結果画面の画像が表示されなくなりました

    　pixivで画像の検索を行おうとしたところ、検索結果画面の画像が表示されなくなりました。正確には画像のあるところも、背景と同様に白く映ってしまいます。 　非常に不便で困っています。 　ただ、画像があるらしきところにマウスを移動させると、「矢印」が「人差し指」の形に変わり、そこをクリックすると今までと同様に、投稿者のページと選択した画像の表示は行われます。　 　どうすれば画像が元通りに表示されるのでしょうか？どなたか回答をお願いします。 　 　pixivにアクセスする前に、cookie？の操作（であったかもしれませんが、わかりません。）を行っていたため、それが関係しているかもしれません。

  • ブログ記事上にクリックで画像を表示させたい

    livedoor blog Proです。が、PCは初歩です。 505×190の画像を48×18のサムネイルにして記事に貼り、 同サムネイルをクリックすると元の大画像が出ます。 ただし、それが別窓で、なのです。 これを記事上に出す方法をお教え頂けないでしょうか。 あるいは、505×190の<img src=******* />をURL化する方法があれば、 それでも構いません。素人考えですが・・・ AllAboutでLightbox Plusの使い方を読みましたが、分かりません。 それに、どうも違うようにも思えるのです。 よろしく、お願い申しあげます。

  • 図形　上下も中央に表示するには

    エクセルの図形で左右の位置を中央に表示できますが 上下も中央に表示するにはどうすればいいですか？ 画像は左右の位置を中央に表示しようとしている画面です。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する