- ベストアンサー
テーブルのサイズを変更することなく、ボタンをクリックしてテーブル上に画像を載せたいのですが・・・
テーブルの枠内にボタンを載せ、そのボタンをクリックすると、(別窓ではなくて)テーブル内に画像が開く、という動作をつけています。しかし、画像が でかくて、指定したテーブルのサイズを大幅に超えてしまいます。画像のサイズ縮小の指定をする方法以外に、何か方法はないでしょうか？この動作を、HTMLではなくJavaScriptで実行したいのですが・・・。
- sasatomo
- お礼率18% (10/53)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちはsasatomoさん、xruzです。 こんな感じですか？ Ie5.5sp2で動作確認しました。 <html> <head> <title></title> <script type="text/javascript"> <!-- function di(i) { var ia=document.getElementById("ia"); ia.innerHTML="<IMG src='"+i+"'>"; } // --> </script> </head> <body> <table border="1" width="600px"><tbody> <tr><td width="100px"> <table><form><tbody> <tr><td><input type="button" value="IMG 1" onClick="di('a.jpg')"></td></tr> <tr><td><input type="button" value="IMG 2" onClick="di('b.jpg')"></td></tr> <tr><td><input type="button" value="IMG 3" onClick="di('c.jpg')"></td></tr> </tbody></form></table> </td><td> <div id="ia" style="width:500px;height:500px;overflow:auto;"></div> </td></tbody></table> </body> </html> がんばってくださいね(~:~i
関連するQ&A
- アクティブ画像があるフォントサイズ変更ボタン
こんにちは。 javascriptで、フォントサイズを変更出来るようにしたいです。 「大」「中」「小」という3種類のボタンがあり、デフォルト状態を「中」に設定する予定です。 で、文字サイズを変更したいユーザーが「大」なり「小」なりのボタンをクリックすると文字サイズが変更できるようにしたいのですが、 そのときにそれぞれの文字サイズ変更ボタンのマウスオーバー時とアクティブ時（もし文字サイズの「大」を選んだのならば「大」のアクティブ画像）に画像を変えたいのです。 いろいろ探してはいるのですが、なかなか難しく困っています。。 どなたか方法や参考サイトなどをお教え頂けませんでしょうか。 どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- テーブル内での画像サイズ変更による画像の崩れについて
いつもこのカテゴリーではお世話になっております。 また、質問させて頂きます。 ドリームウィーバーMXを使っております。 テーブルを組んでそのセル内にセルより大きい画像を貼付けてから、貼付けた画像サイズを縮小するという方法というか順序はまちがっているのでしょうか？ というのも、この方法で例えば同じgifファイルを貼付けて縮小した場合に、崩れる画像と崩れない画像がでてきてしまいます。（ここでいう画像の崩れとは、文字や絵がギザギザになって見ずらい画像になることです） なぜ、崩れる画像と崩れない画像ができるのでしょうか？ それともこの方法（順序）が間違っているのでしょうか？ まず、画像を作る時に表示したい画像サイズで作って貼付けるというのが正しいのでしょうか？ 同じ画像を複数のページで違ったサイズで表示したいのですが、このような場合はそれぞれのページで表示したいサイズにページの数だけの画像ファイルを用意しないといけないのでしょうか？ また、たくさんできる画像ファイルを上手く管理する方法があれば教えて頂きたいのですが。 あまり増えてくると分らなくなってまいます。 宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- テーブル外のテキストをクリック → テーブルの背景画像を変更させるには？
IE、macで動作可能な状態に作りあげたいです。 テーブル外にあるテキストのある部分をクリックする度に、 テーブル内の【背景】画像が変わるようにしたいのです。 テーブル上の画像ではなく、テーブル自体の背景を変えられる方法がなかなか見つかりません。 もし出来るようなら、ぜひ教えてください！
- ベストアンサー
- JavaScript
- 画像がテーブル内に収まらない
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
- JavaScriptでボタンをクリックすると画像が変わる設定をするには？
たとえば、1.gif － 2.gif , 3.gif － 4.gif，5.gif － 6.gif,7.gif － 8.gif,9.gif － 10.gif の画像をついにしてボタンとして利用するとします。 最初に表示されるボタンは 1.gif , 3.gif ，5.gif , 7.gif , 9.gif の５つです。 JavaScriptで1.gifボタンをクリックしたら、2.gifボタンに画像が変わり、 3.gifボタンをクリックしたら、4.gifボタンに画像が変わるように（残りの画像も同様）したいと 考えています。この時、1.gif , 3.gif ，5.gif , 7.gif , 9.gifのいずれかのボタンがクリックされた 時点で、直前に変更していた 2.gif , 4.gif ，6.gif , 8.gif , 10.gifのいずれかのボタンは最初のボタン の状態に戻したいと考えています。 どのようにJavaScriptを記述すると可能なのでしょうか。 １つのボタンをクリックすると別の画像に変わる方法は色々なＨＰを参考に↓の記述でなんとかできたのですが、 複数のボタンになるとどのように修正していけばうまくいくのかわかりません。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- imgnum=1; function changeImage(){ if(imgnum==1){ document.myimg.src="2.gif"; imgnum=2; }else if(imgnum==2){ document.myimg.src="1.gif"; imgnum=1; } } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="javascript:changeImage()"><IMG src="1.gif" name="myimg" border=0></A> </CENTER> </BODY> </HTML> 質問がややこしくてすみません。 方法をお分かりの方はどなたか教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- tableタグの全体サイズを可変させたい
javascriptを利用して、table内tdのdisplay:none(初期状態)とdisplay:blockをボタンクリックで交互に切り替えるページを作っています 表示上はボタンをクリックするとtable内のtd1つが出たり消えたりして、その都度table全体の幅は可変します DOCTYPE宣言をする前まではtable全体のサイズを指定しなければtdのサイズ指定だけで何とかなっていたのですが、 DOCTYPE宣言後はtable全体のサイズを指定しないと表示がおかしくなってしまいました tableタグの全体サイズを可変させるにはどうすればよいでしょうか？
- ベストアンサー
- HTML
- ボタンのクリックで
すみません。 また JavaScript について質問させていただきます。 ボタンをクリックして処理を実行することができますが、例えば、1回目にクリックしたときには関数 test1() を実行、2回目にクリックしたときには関数 test2() を実行・・・という具合に処理を変えることはできますか？ 可能であれば、その方法を教えてください。 よろしくお願します。
- ベストアンサー
- JavaScript
- サブウィンドウで拡大画像を見られるようにしたいのです
javascript初心者です。 ＨＰを制作中ですが小さい商品画像をクリックして別窓を開き拡大画像を見れるようにしたいです。 別窓のサイズ、ツールバーの表示・非表示を指定、また別窓をたくさん作らず１つの別窓で複数の画像を表示するのはどうしたらいいのでしょうか。
- ベストアンサー
- JavaScript
- 画像をクリックしたら別ウインドウを開くようにするには？
検索したり本を探したりしたのですが、どうしても見つけられなかったので 投稿します。 アルバムのコンテンツを作ろうと考えています。 いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、 まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。 自分の理想としてはサムネイルをクリックすると サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が 表示されるようにしたいんです。 そこで色々調べてみたのですが、ボタンや、テキストをクリックすると 別ウインドウが開くというサンプルはあっても、画像をクリックした 場合の設定方法が見つかりません。 どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、 教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- Flash内のサムネイル画像をクリックするとサイズ指定の別窓で拡大画像を表示
お世話になっております。 Flashでフォトギャラリーを作っています。 http://okwave.jp/kotaeru.php3?q=2243910 で質問させていただいているのですが、別の方法として、 JavaScriptを使用し、Flashの画像をクリックすると、 別ウインドウをサイズ指定で開きさらに画像のサイズを変更し 拡大画像を表示させることはできるのでしょうか？ 方法を知っている方いましたら教えて下さい。 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
いままではずかしながら、インナーHTMLを 知らなかったです・・・ どうもありがとうございました！！