• ベストアンサー

【WEBデザイン】画像の並び方と切り替え方法

大きな画像の右隣に3つの小さな画像を縦に並べ、 小さな画像を選択すると大きな画像が切り替わるようにしたいです。 （添付画像のイメージです） cssとjavascript がまだまだ初心者なので手こずっています。 WEBデザインに詳しい方、ご教授願います。

画像を拡大する

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

  • ベストアンサー
回答No.1

こんにちは ＃画像1と大きい画像1は同一画像で大きさだけ違うサンプル作成しました。 ＃onclick="ch(1)"で引数を利用します。 ＃ function ch(n) { if (n == 1) { imgchang(n); } nが1の時は関数imgchang(n);を引数付で実行します。 ＃関数imgchang(n)は大きい画像をDOMで変更します。 サンプル <!DOCTYPE html> <html> <head> <title>画像切り替えサンプル</title> <style type="text/css"> div.table{ display:table; } div.row{ display:table-row; } div.cell{ display:table-cell; border:1px solid; } img.big{ width:450px; height:298px; } img.small{ width:150px; height:97px; cursor:pointer; } </style> <script type="text/javascript"> function ch(n) { if (n == 1) { imgchang(n); } if (n == 2) { imgchang(n); } if (n == 3) { imgchang(n); } } function imgchang(n) { document.getElementById("img").src = "img" + n + ".png"; } </script> </head> <body> <div> <div class="table" style="float:left;"> <div class="cell"> <img class="big" alt="" id="img" src="img1.png" /> </div> </div> <div class="table"> <div class="row"> <div class="cell"> <img class="small" alt="" id="img1" src="img1.png" onclick="ch(1)"/> </div> </div> <div class="row"> <div class="cell"> <img class="small" alt="" id="img2" src="img2.png" onclick="ch(2)"/> </div> </div> <div class="row"> <div class="cell"> <img class="small" alt="" id="img3" src="img3.png" onclick="ch(3)"/> </div> </div> </div> </div> </body> </html>

画像を拡大する
yu1ezweb
質問者

お礼

お返事遅くなりました。 希望どおりにできました。 ありがとうございます。

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

関連するQ&A

  • レスポンシブｗebデザインでの画像表示について

    私はサイト制作初心者なんですが、なんとかレスポンシブｗebデザインでのサイトを作っています。 そこで、画像の表示方法について悩んでいたので、アドバイスをお願いします。 今現状やっていた画像表示処理は・・・ ＜パターンA＞ １つの大きな画像を％で縮小させ、あくまで１枚だけで全サイズに対応する というものです。 ところが最近、ネットでたくさんのプロの方々のブログを拝見していると、どうやらRetinaディスプレイに対応した画像は必須なんじゃないか？となり、悩んでおります。 もしRetinaディスプレイに対応した画像の場合は、表示サイズの倍サイズで作ったものを縮小して表示させなければいけないため、重くなるのは必定。 となると、さすがにパターンAでは厳しいと思い下記のパターンBを検討しています。 ＜パターンB＞ １つの画像につき 　・PCディスプレイ用画像 　（・タブレット・高解像度スマホ用画像） 　・通常スマホの縦向用画像 の、２つないしは３つのサイズ別で対応する そこで、もしこのパターンBで画像を表示する際は、一体どのような変換方法を使うのが現在では適切なのでしょうか？ 初心者なりに調べてみたりして考えていたのが↓ (1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える (2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する でした。 個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？ どなたかお詳しい方、レスポンシブｗebデザインでの画像表示方法について、アドバイスをください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • webデザイン　セミナーについて

    現在webの勉強をしている者です。 デザインについてまったくの初心者なので何から勉強したらよいかもわからず、 困っています。 一応html,css,javascript,php,mysqlの基本的な部分は勉強しました。 ただ、いざサイトを作ろうとなるとどんなページレイアウトにしようか？、配色はどうしようか？ 素材はどうしようか？など悩んでしまっています。 どこかセミナーになどに参加してみたいのですが、知っている方がいましたら教えてください。 場所は都内希望です。 よろしくお願いします。

  • Webデザインのスライスについて。

    Webデザイン初心者のものです。 自分が知っているWebデザインの知識は、 １、レイヤーは重ねていく。 ２、スライスとは画像を切り分けることだ。 レイヤーの上に取り込んだ画像をスライスをすると、背景はなくなるのですか？ レイヤー＝背景？ スライスした画像は、これまで重なってきたレイヤーの情報が表面画像の下にあるのですか？ であれば、Web画像保存時に「透明部分」を選択すると、透明になってしまうのですか？

  • Webデザインで使うグラフィックソフトてどれを使えばいいですか？

    Webデザイン初心者です。 Webのアイコンやボタンなどの画像を作ろうと思ってるのですが、 どのグラフィックソフトが最適なのでしょうか？ 今、photoshop、illustrator、ImageReadyが手元にあります。 一応、自分的にぐぐって調べてみたのですがFireWorksが良いとか 書いてましたが一番いいのはそれなのでしょうか？？ 自分的にはCSS SPRITE用の画像や、ロールオーバー用の画像を 作りたいのですが。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 最新のWEBデザインはマテリアルデザインなので

    新しいポートフォリオを作ろうとしているのですが、 最新のWEBデザインはマテリアルデザインなのでしょうか？ それともまだ先の話で現状はフラットデザインが良いのでしょうか？ また、フラットデザインは押せる感が出せないのでスキューモフィックと混ぜるべきだという、意見も有るのですが、今ポートフォリオを作るならどんな感じが良いと思いますか？ 下記のようなフラットデザインだけど立体的に見えるボタンをCSS3で作るのが良いでしょうか？ http://delaymania.com/201410/web/css-button-flat-design/ 商用可のジェネレーターで良いのですよね。 手打ちで微調整までは出来なくても。 また、マテリアルデザインを調べてみたのですが、フラットデザインとどう違うのでしょうか？ またシャドウなどを使い始めると言うことが違うのでしょうか？ また画像は重いので出来るだけ使わないのが主流のようですが、ボタンなどの色もすべてCSS3で作った方が良いででしょうか？

    • ベストアンサー
    • CSS
  • WEBデザインど素人WEBサイトの見栄えがショボイ

    XHTML+CSS＋PHP＋JavaScriptを勉強しているのですが、 これだけではテキストベースのWEBページになり、そっけないので困っています。 コーディングは独学で勉強してある程度知識がつき、構造記述についてはまぁまぁ可能なのですが、 絵心がないのでWEBデザインや画像加工がとても苦手で、配色センスもなく WEBサイト製作において非常に困っています。 今作ろうとしているのは自営工務店のWEBページです（一人で全部作る予定） ※企業サイトではないので公開して恥ずかしくない程度のデザインや見栄えであればOKな考えです。 WEBページの見栄えを「シンプルかつ、おお！」って思わせるためには、 XHTML+CSS＋PHP;＋JavaScriptだけ勉強しても無理ですよね？ WEBサイトを作る上でphotoshopとかfireworksでの画像加工やデザインカンプ？ すら作れません。（絵心がないから？ｗ） ロゴ１つやWEBページで紹介する施工例写真やナビゲーションボタン１つも かっこよく作れず苦戦しています。 例えば、ここはメニューはこのフォントを使うべきだとか、文字をぼかすべきだとか、 影をつけるべきだとか、角を丸くすべきだとか、そういった画像加工のセンスがないのです(泣） こういう人は何千時間かかってもWEBデザイン（画像加工）センスは身につかないのでしょうか？ 少しでも早く、具体的にWEBデザイン（画像加工）を学ぶサイトはないでしょうか？ デザインカンプを１から作ってパースをスライスしてサイトを作る方法（初心者向け） のサイトなどがなかなか見つかりません。 ある店舗さんや会社さんのWEBサイトを一人で全部作っておられる方など いましたらよろしくお願いします。 【製作環境】 windows　XP Adobe イラストレータ　CS3（ちょっとだけ使えるが、画像加工のセンスがまったくない） Adobe photoshop　CS3（ちょっとだけ使えるが、画像加工のセンスがまったくない） Adobe Fireworks CS3（ちょっとだけ使えるが、画像加工のセンスがまったくない） 　Adobe Dreamweaver CS3　（普通に使える） Adobe Flash CS3 (まったくできない。）

  • これだけはおさえておきたいWEBデザインの参考書教えてください。

    これだけはおさえておきたいWEBデザインの参考書教えてください。 Illustrator,PhotoShop,DreamWeaver,Fireworks,Flash,HTML,CSS,Javascript 等 でこれだけはおさえておきたい参考書教えてください。 上記以外にデザイナーの考え方とか色とかの参考書もあれば教えてください。

  • webデザイン　画像の罫線を立体的にしたい

    webデザイン　画像の罫線を立体的にしたい 下記のwebサイトのメニューバーの縦の罫線（項目の区切り） のような立体的な罫線のPhotoShop、Fireworksでの作り方を、どなたか 教えてくださいますでしょうか.. 。 http://www.chem.keio.ac.jp/

  • webデザインが学べるサイト

    html cssをたまに勉強しています。 ウェブデザインの知識がないので独学で学習できるサイトがあればご教授お願い致します。 将来webデザイナーになりたいとかではないのですが、興味本位で勉強をしたいなと思い質問いたしました。

  • 【Webデザインの技術】佐藤秀峰さんのWebサイトで

    こんばんは。よろしくお願いいたします。 Webデザインに関しての初心者なのですが、 佐藤秀峰さんのWebサイト↓ https://satoshuho.com/index.html こちらは良くあるWebサイトと違って ・手書きのような画像 ・本を開くような分かりやすい操作性 があると思うのですが、このサイトをデザイン、プログラミングの技術で説明すると、どういう言い方をすればよいのでしょうか？ それはWebデザインの中でも、高度なものだとお見受けするのですが いかがでしょうか？ 用語を調べても、実際どのようなものなのかイメージがつかず デザインの技術を言葉で説明したいのです。 プロの方にとっては簡単なことかと思いますが、 教えていただけると幸いです。よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する