• ベストアンサー

スタイルシート 画像ポップアップについて

マウスオンで画像をポップアップさせたいのですが、いくつか 検索をしていて「これだ!」という物があったのですが、ちょっと 変更したくいろいろ試したのですが・・・ やり方が解らないのでご質問させてください。 http://www16.big.or.jp/~ogura1/java_scr/text_image/text_image.html 上記のURLの画像のポップアップはテキストにマウスオンすると 画像が右側にポップアップする形なのですが これを左側に出るようにしたいのですが、どのようにしたらよいでしょうか? 教えてください。宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • neorg
  • ベストアンサー率54% (235/433)
回答No.1

試したら、 <div style....の前に<div algin="right">を入れてテキスト全体を右に寄せます。 各画像のstyle="position:absolute;の後とdisplay:none;の前の間などに、left:0px;top:0px;を挿入します。 </body>の前に </div> </div> を入れて保存します。 ↓上の説明です。 left:ここに左からの位置(何ピクセル分)の数字px; 0で左端です。 top:ここに上からの位置(何ピクセル分)の数字px; 0で一番上です。 でできました。(一例です。他にもっといい方法があるかもしれません)

関連するQ&A

  • サムネイル画像にマウスを合わせて画像と説明をチェンジ

    javaスクリプトで サムネイル画像にマウスを合わせて 画像と説明をチェンジするには どうしたらいいのでしょうか? 簡単に言うと以下のURLのフォームでないバージョンにしたいのですが このスクリプトをいろいろと変えてみてもできませんでした。 http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html 私どうもjavaスクリプトが苦手なもので 似たような関連記事はほとんど見たのですが もう、さっぱりお手上げです。 参考になるHPか作り方を教えてください。 どうか宜しくお願いします。

  • FC2 クリックポップアップ画像の方法について

    http://rgrg.blog61.fc2.com/blog-entry-593.html 画像をクリックすると、そのページ上で画像が大きく表示されるJavaスクリプトツール を上記サイトのとおりやってみましたがポップアップがされません。画像サイズは480X360で、これをクリックすると元画像サイズの640X480をポップアップさせたいのです。 テンプレートは「lightframe_white」にしていますが、ダウンロードし直しても、また他のテンプレートにしてもやはりできません。 <script type="text/javascript"><!-- : : <link rel="index" href="<%url>archives.html" title="サイトマップ" /> ポップアップのスクリプトの上にはデフォルトで上記の記載がありますが、この中に改変しなくてはならない行があるのでしょうか? ご教示の程よろしくお願いします。

  • ポップアップをクリックで終了させる方法

    Javaの知識はありませんが、あるサイトから画像にマウスオンするとその下にポップアップでリンクが表示されるスクリプトをいただきました。 それはマウスが外れたらポップアップが消えるようになっているのですが、フレーム内などでマウスが外れた場合には認識されず、ポップアップがずっとでている状態になってしまいます。 そこで、クリックしたらポップアップが消えるようにしたいのですが、そのようにできる方法はありますか?

  • Javascriptについての質問

    下の図のように、画像にマウスをポイントすると、下に画像と説明が表示されるようにしたいのですが、画像を大きく表示させることは、出来たのですが、説明の入れ方がわからないのです。 こちらのページも参考にさせて頂いたのですが、イメージ通りにいきませんでした。 http://netneko.jp/homepage/gazoumsg.html http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html わかる方がいたら、解答よろしくお願いします。 画像1 画像2 画像3 画像4 大きく画像を表示 説明文を表示

  • イメージ画像を使ったポップアップメニューを作りたいです。

    イメージ画像を使ったポップアップメニューを作りたいです。 チカッパ!レンタルサーバーのトップメニューがそうです。 http://chicappa.jp/ 作り方が載っているサイト、サンプルダウンロードなどを探したのですが、なかなか見つかりませんでした。 そういうサイトを教えて下さいますか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 画像中のある座標でマウスオーバー時にポップアップテキスト

    画像の中の任意座標にマウスをもっていった時に、マウスより少し上の位置に説明文等のテキストをポップアップ表示させ、マウスアウトでポップアップ表示を消すのに何か良い方法はありませんか? 画像はテーブルで分割していない一枚のイメージで”画像の中のある場所”はランダムです。 表示イメージはこんな感じ ●:画像中の任意の座標 -------------------------------- | ●                  | |     ココに説明文をポップアップ表示 |    ●<-(マウス)        | |             ●      | |  ●                 | --------------------------------

  • FireFoxでのCGIからのポップアップ表示

    ある検索CGIにて、検索結果をポップアップウィンドウで出しています。 しかし、FireFoxで見た時だけ、ポップアップページがHTMLソースで表示されてしまいます。 そのポップアップのURLは、 http://www.example.jp/cgi-bin/search/test.cgi?~~~~~~ という形のURLになります。 IEでは普通に表示されるのですが、なにが原因でしょう? お分かりになる方いらっしゃいますか?

  • highslideHPのEDITORでキャプションを画像の右側に出すサ

    highslideHPのEDITORでキャプションを画像の右側に出すサンプルの取得方法 こんにちわ。 highslideを使用しているんですが、 設定した画像をクリックすると、ポップアップで画像とキャプションが表示されますが、 キャプションを画像の右側に出すにはどうすればいいでしょうか? やりたいことは以下のURLにあるサンプルでいうと、四つ目のセピアになった木が画像のイメージです。 http://highslide.com/ 以下のエディターでサンプルソースをGETできそうですが、 クリックすると左に画像、右にテキストという形にこのEDITORで表示させるには、 どこをどう設定すればできるんでしょうか? http://highslide.com/editor/ できるだけ私のイメージに近づけてそのまま貼り付けたいと思っています。 以上、よろしくお願い致します。

  • クリッカブルマップ上のポップアップ画像

    初心者です。よろしくお願いします。 クリッカブルマップ上にあるリンク先にポインタを合わせると、ポップアップ画像が表示される仕組みを作りたいと思います。 いろいろなサイトで調べるうちに、テキストにポインタを合わせた時にポップアップ画像が表示されるコードを見つけたので、そのコードを自分なりに作り変えて試してみたのですが、うまく表示されません。 現在のhtmlコード、およびcssのコードは下記のとおりです。 <ul> <img src="img/top_map.jpg" alt="テスト画像" width="880" height="720" border="0" usemap="#Map" /> <map name="Map"><span class="test"><area shape="rect" coords="363,70,379,86" href="リンク先URL" target="_blank" /> </span> </map> </ul> ul area { position: relative; } ul area span { display: block; visibility: hidden; width: 150px; height: 150px; position: absolute; top: -100px; left: 50px; } ul area:hover { background: #FFFFFF; } ul area:hover span { visibility: visible; text-indent: -10000px; } span.yahoo { background: url(ポップアップ画像URL); } 他のサイトで、areaにはhoverという記述ができないという書き込みもありましたが、何とか実現できないものかと思っています。 どなたか、教えていただけないでしょうか?

  • 2つ画像を背景にするスタイルシートってある?

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!--    BODY {       background-image:素材のURL;       background-position:0% 100%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

    • 締切済み
    • CSS

専門家に質問してみよう