画像が大きくされるホームページ

質問

よろしくお願いいたします。
まず、例になるHPを見ていただけるとよくわかると思います。
http://shinchiku.homes.co.jp/man_detail/bid-16004840000004/dk-2/pv-1/

http://shinchiku.homes.co.jp/man_detail/bid-16004840000004/dk-3/pv-1/

最近このように、画像をクリックすると大きく表示されるHPを見かけるのですが、これはどのように作るのでしょうか。
難しければ、詳細な説明でなくても、これを勉強しなさいみたいなアドバイスいただけないでしょうか。
よろしくお願いいたします。

回答No.1

mindatg · ベストアンサー

質問者さんの提示しているURLでの方法でしたら、JavaScriptになります。
俗にいうAjaxとか言う奴ですね。

スクリプトレベルから勉強するならご自由にと言いたいところですが、もしゼロからなら大変難儀なことです。
この手のスクリプトはLightBoxというのが有名ですので
カスタマイズされたLightBoxを流用したり、自分好みに書き換えたりしてみてください。

また、上記とは別にFlashのActionScriptを用いた方法でも同様の表現ができます。詳しくはGoogle先生にてどうぞ

お礼

ありがとうございます。
Google先生というのはどこで拝見できるのでしょうか。

回答No.2

qualheart

JavaScriptによる表示・非表示の処理ですね。
基本的には<div>にIDを付けておき、このDIVの要素の表示・非表示をJavaScriptで制御する形になります。
質問者様のリンク例では、クリックした画像をそのまま表示するDIV要素に入れ込むようなスクリプトになっているようですが。

最も簡単な方法としては、表示しているサムネイル画像にonclickで呼び出すJavaScriptのファンクション名をしてしておき、このファンクション内でDIVに対する表示・非表示をgetElementById(id).style.displayで切り替える、という形になりますね。表示・非表示を切り替えるDIVの中身には<img>タグで表示したい拡大画像を入れておけば良いだけです。

もちろん、ウィンドウサイズにあわせて表示や表示ポジションの指定など、細かく設定したい場合はもっと複雑になってきますが、まずはgetElementById(id).style.displayを使ったJavaScriptのサンプルなどを見て勉強すると良いと思います。

お礼

ありがとうございます。
何を勉強していいのかもわからなかったので・・・。
トライしてみます。