初心者のためのHP画像切り替え方法
- HPを作成中の初心者の方向けに、画像の切り替え方法について質問です。表を使ってメイン表示とサムネイル表示を行いたいと考えています。
- 具体的な方法として、表の中にA/B/Cスペースを作成し、それぞれのスペースで画像を表示させる方法を検討しています。
- また、マウスカーソルの動きやクリックによって画像を切り替える方法についても教えていただきたいです。
- ベストアンサー
《初心者》HPの画像を切り替える方法について
現在HPを作成中です。画像について質問させて 下さい。 表（table）を使ってメイン表示/サムネイル表示 をさせようと考えとります。 例：《表の中にA/B/Cスペースを作成》 Aスペース： 一番大きいスペースで初めは画像Bを 『大きく』表示 Bスペース： 小さいスペースで画像Bを『小さく』表示 Cスペース： Bスペースと同じ大きさで画像C『小さく』表示 上記の表で、Cスペースの上にマウスカーソルが 来るとAスペースにC画像を表示、また、Bスペース の上にマウスカーソルが来るとB画像を表示と言う 動きをさせたいのですが、簡単な方法がございま したらお教え下さい。 （もう一つの手法として、B/Cスペースをクリック して切り替える場合も教えて欲しいです。） OnMouseとか、JAVAとか使いそうですか？
- najima-jun
- お礼率82% (19/23)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ここでどうでしょう…。 下の方に「Ｑ：クリックすると画像が変わるようにしたいのですが」というのがあるので それに従っていただければ、わりと近くなるとは思うのですが…。
関連するQ&A
- 画像をチェンジ→もとに戻す
ひとつのページに複数のリンクがあります すこしはなれた場所には、リンクと関係ない 画像A がひとつあります テキストリンク０１ にマウスカーソルをのせます すると 画像A は 画像B と入れ替わります テキストリンク０１ からカーソルをはずします すると 画像B は 画像A にもどります テキストリンク０２ にマウスカーソルをのせます すると 画像A は 画像C と入れ替わります テキストリンク０２ からカーソルをはずします すると 画像C は 画像A にもどります テキストリンク０３ にマウスカーソルをのせます すると 画像A は 画像C と入れ替わります テキストリンク０３ からカーソルをはずします すると 画像C は 画像A にもどります ...................... このようなことをしたいんですが少しわがままかもしれないので、無理なら どのテキストリンクにカーソルを置いても 画像A → 画像B はずすと 画像B → 画像A こういうJavascriptを教えてください
- ベストアンサー
- HTML
- ＨＰの画像について。
ＨＰ上にある、画像についてなんですけど、 画像Ａとリンク文字Ｂがあったとします。 Ｂの上にカーソルを持って行っただけでＡが違う画像に 変わる・・・っていうのをあるＨＰで見たんですけど、 どうやってするんですか？ とってもわかりにくい説明ですいません。
- 締切済み
- HTML
- サムネイル画像をクロスフェードで切り替えたい
大きい画像(画像A)と、その下にサムネイル画像(画像B、画像C)があり、各サムネイルをマウスオンすると クロスフェードで大きい画像の部分にそれぞれの拡大画像を表示して、 マウスを画像から離すと元の画像Aがまた表示されるようにしたいのですが、どうすればよろしいでしょうか。 画像をマウスオンで切り替えるだけなら検索で出てくるのですが、 マウスオンで各画像がクロスフェードで切り替わるという点とマウスを離すと元の画像に戻るという部分が なかなか見つからなく苦労しております。 どなたかどうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- google画像検索 画像が大きく表示されるようになったんですか?
google画像検索は、 以前は、画像を含むページそのものが表示されました。 しかし今日、画像検索をかけてみると、 サムネイルで示された、画像そのものが、大きく表示されるようになっています。 表示の形式や手法や形式が変わったのでしょうか? いつから変わったのでしょうか? 何故このような形式手法に変わったのでしょうか? この変更を説明されているサイトをご存知ですか? http://images.google.co.jp/images?hl=ja&q=okwave&btnG=%E7%94%BB%E5%83%8F%E6%A4%9C%E7%B4%A2&gbv=2&aq=f&oq=
- 締切済み
- その他（インターネット・Webサービス）
- 画像を入れ替える方法
ホームページで、画像をクリックしたら、その画像だけが入れ替わるようにしたいと思っています。 A.html というファイルの中に、b.jpg という画像があるとします。その画像をクリックしたら、c.jpg に入れ替わるようにしたいのですが、たとえば、直接、c.jpg にリンクすると、その画像だけが表示されてしまいます。かといって、新しくC.htmlというファイルを作って、その中にc.jpgを入れておくと、画面が変ってしまいます。 また、カーソルが触れると画像が入れ替わるようなことも出来るようですが、できればクリックして初めて画像が変るようにしたいのです。 iframe も考えましたが、画像の大きさが違うとうまくいかないと思いますし、もっとなにかいい方法があれば教えてください。
- ベストアンサー
- HTML
- 小さい画像にマウスを合わせると小さい画像の右上（右下）に拡大画像が表示される
ホームページ作成で教えて欲しいのですが、小さなマンションのサムネイル画像の上にマウスを持って行くと、大きな画像がサムネイル画像の右下か右上に表示されるような仕組みを作りたいのですが、どのようにしたらいいのでしょうか？ヤフー不動産などで実際にあるのですが、小さな間取り図にオンマウスで拡大間取りが見れるようにしたいのです。 javaスクリプトで作成しているのでしょうか？javaは当方分からないのですが、アドバイスをお願い致します。
- 締切済み
- Windows XP
- ボタン（画像）をクリックするたび表を切り替える方法
HTMLとcssで組み立てたサイトのページ内に設置したいものです。 タイトルボタン（画像 W300px）の下に表Ａ（簡単な<table>内にテキストがあるW300 H400くらいのもの）があって、 タイトルボタンをクリックするたびに表Ｂ、表Ｃに切り替わるようにしたいのですが、 JavaScriptか何かで可能でしょうか。 表の大きさはすべて同じです。 画像切り替えはできたのですが、どうしてもテキストありの表を切り替え表示したく、 悩んでおります。 宜しくお願い致します。
- ベストアンサー
- HTML
- 画像がテーブル内に収まらない
IEを使っているのですが テーブルの中に縮小した画像を入れると、 元の画像のサイズ分、テーブルが広がってしまいます。 テーブルのタグは <TABLE> <TBODY> <TR> <TD><A href="aaa.html"><IMG class=size src="/image/aaa.jpg"></A></TD></TR></TBODY></TABLE> このような感じです。 スタイルシートで sizeは } IMG.size { ZOOM: 20% } のように指定しています。 IE8の時は 画像をクリックする時も、マウスカーソルで画像を押してる時だけ元の画像サイズが、点々で表示されます。 IE９の場合も同じく画像が広がりますが マウスカーソルを画像に当てても点々は表示されません。 スレイプニル等のブラウザなら、テーブルの中に画像を入れても 画像は指定したサイズで表示され、テーブルに収まります。 テーブルのサイズを <TABLE width="30%"> としても、やはり画像の元サイズを基準にテーブルも広がってしまいます。
- 締切済み
- HTML
- 画像の切り替え
教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。
- ベストアンサー
- JavaScript
- table内の画像を中央寄せ、のせると拡大、方法？
画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ～～～ HTML ～～～ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ～～～ CSS ～～～ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }
- ベストアンサー
- HTML
お礼
早速のご回答ありがとうございます♪ まさに理想の形です！！ JAVAを少し勉強する必要がありますが とりあえず、コピペで動作確認しながら勉強します！ ありがとうございました！