人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSとJavaScriptについての質問です。

ヤフーオークションの商品画像のように、サムネイルをクリックすると大きな画像が表示されるようなページを作りたいと思い、
似たような例が出ていた本を買ってきて、そのソースをそのままhtmlにコピーしました(htmlには外部CSSも読み込んでいます)。

しかし、クリックすると画面の左下(フッターの左下に)画像が表示されてしまいます。
FirefoxのFirebugで見ると、CSSを指定をしているdivの外側に画像がきてしまっています。
画像にCSSを適用させて、コンテンツになじむようにしたいのですが、どうしたらいいのでしょうか?

<a href="" onclick="showPicture('images/●●.jpg');return false;">

↑これで画像を表示させていると思うのですが、これ自体はdivの中に入れています。

本の著作権があるため、JavaScriptに関してはここには記載できませんので、アドバイスをいただけるとありがたいです。
試行錯誤してみましたが、JavaScriptの知識が無く、本も難しくてチンプンカンプンです。何卒よろしくお願い致しますm(_ _)m

●質問者: inomonta
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS Firebug firefox HTML JavaScript
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pahoo
●50ポイント ベストアンサー

サムネイルをクリックすると大きな画像が表示されるような

別ウィンドウに表示するのですか、それとも現在表示されているサムネイルと同じページ(画像を表示させるBOX)に表示するのですか。ご質問の文面から後者であるという前提で回答します。


JavaScript の中で showPicture 関数が定義されており、img タグを発生するようになっていると思います。その img タグに対し、画像表示 BOX の位置を指定した CSS を加えておけばいいでしょう。

◎質問者からの返答

ドンピシャでございました!id付きのimgタグが発生するようになっておりました。おかげさまで解決出来ました!助かりました!ありがとうございましたm(_ _)m


2 ● esecua
●50ポイント

CSSだけでもできますよ。

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-imag...

◎質問者からの返答

CSSだけで出来るんですね…こういうのが知りたかったのですが、調べても出てこなかったので、

教えていただき大変ありがたいです。どうもありがとうございましたm(_ _)m

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ