- ベストアンサー
画像集、小画像をクリックすると大画像を中央表示するには？
arenani_sorenaniの回答
- arenani_sorenani
- ベストアンサー率73% (58/79)
テーブルに対してではなく、テーブルの中に配置する画像に対して srcを指定します。 <img id="img1" name="IMG1" src="****.jpg" style="width:100px;height:100px;" /> 上記のようにidまたはnamaを指定して document.getElementById("img1").src="****.jpg" または document.imeges["IMG1"].src="****.jpg" で試してみてください。 .
noname#22222
関連するQ&A
- tableの中のtableの表示と外側（大きい方）のtableに背景画像を表示させる方法
非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側（大きい方）のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか？下記ソースまでは作ったのですが、中（小さい方）のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか？もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。 ↓ソース <html> <head> <body> <title>タイトル</title> <TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD> <TABLE border width="600" height="100%" bgcolor="white"> <TR> <TD> 文章 </TD> </TR> </TABLE> </CENTER> </body> </html>
- ベストアンサー
- ブログ
- 同ページ内リンクでの画像表示について
同じページ内にテーブルを一個ずつ作ります。 １つはメニュー欄、もう１つは表示欄。 メニュー欄のテーブルからクリックして 表示欄のテーブルに画像を表示したいのですがうまくいきません。 <TABLE border="1"> <TR><TD> <A href="http://www.geocities.jp/deepv8/gazou/G_AW.gif#hyoji2">表示</A> </TD></TR> </TABLE> <br> <TABLE border="1" width="300" height="300"> <TR><TD> <A name="hyoji2" href=""></A> </TD></TR> </TABLE> どこが間違っているのでしょうか？ ご教示の程宜しくお願いします・・・m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
- 画像をクリックして元に戻すには
ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。 アンカーで元のファイル名を記述すればできますが、 特定のファイル名を指定することなく、 <INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();"> のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=）で、どのように記述すればいいのでしょうか。 検索してみたのですが、なかなか見つけられませんのでよろしくお願いします。 次のような例を見つけましたが このTABLEを使わないで直接画像のみで指定したいのですが。 <script language="javascript"> function onPh(img) { myImg.src = img myTable1.style.display = "block" myTable2.style.display = "none" } function offPh() { myTable1.style.display = "none" myTable2.style.display = "block" } </script> －－－－－－－ <TABLE border="3" table id="myTable1" width="50%" height="50%" onclick="offPh()" style="display:none;"> <tr> <td><img id="myImg" width="100%"></td> </tr> </TABLE> <table border="0" id="myTable2" style="display:block;"> <tr> <td><FONT color="#660066"><img src="hit3.jpg" width="80" height="60" onclick="onPh(this.src)"><br>
- ベストアンサー
- HTML
- 別窓で画像を表示する場合に余白が…
大量に画像を扱って居るのですが、タイトルをクリックすると、別窓でそれぞれの画像が開く様にしています。 サイズは2種類、800*600と1024*768のがあります。 それを↓下のようなscriptで行っていますが、どちらのサイズの窓(画像)も、画像の左と上に余白が少し出て、右と下が切れてしまいます。何処が間違っているのでしょうか？ どうすれば、窓のぎりぎり一杯に画像を表示する事ができるでしょうか？ どうか、教えて下さい。 ↓ <table width="80%"> <tr> <td> <a href="#" onClick="window.open('../xxx/yyy.jpg','','width=1024,height=768')">グラデーション<font size="1">1024x768</font></a> </td> </tr> <tr> <td> <a href="#" onClick="window.open('../xxx/zzz.jpg','','width=800,height=600')">グラデーション<font size="1">800x600</font></a> </td> </tr> </table> (xxx.yyy.zzzは仮の文字です)
- ベストアンサー
- JavaScript
- 画像クリックで指定のテーブルの背景画像を変えたい
文字をクリックすると指定のテーブルの背景色が変わるようにしたい、という事で <table border width=100 height=100><td id="aa">aa</td></table><br> <span onClick="aa.style.background='red'">赤</span> を教えて頂いたのですが、これをテキストではなく画像にするの場合は <span onClick="aa.style.background='gazou.gif'"><img src="gazou.gif"></span> でやってみたものの出ませんでした。これではだめなのでしょうか＾＾；
- ベストアンサー
- HTML
- javaでサムネイルをクリックして別窓で表示したいのですが…
はじめまして！たつやです。 現在ＯＳはＸＰでビルダー９を利用して画像アルバムのホームページを作成してますが、サムネイルと元画像はhtmlファイルとして用意し、それぞれのサムネイルをクリックするとタイトルバーなどが無い別画面で表示したいと考えております。別画面はクリックした画像の数だけ開くようにしたいとも考えています。 ヘッド部には <script Language="JavaScript"><!-- function nwin1(){ sub=window.open("jpeg/001.html","subwin1","width=480,height=360,scrollbars=no,location=no,menubar=no,left=10,top=30");} function nwin2(){ sub=window.open("jpeg/002.html","subwin2","width=480,height=360,scrollbars=no,location=no,menubar=no,left=10,top=30");} } // --></script> と記入して、ボディー部には <A href="jpeg/001.html" onclick="nwin1()"><IMG src="jpeg/s001.jpg" width="90" height="68" border="0"></A> <A href="jpeg/002.html" onclick="nwin2()"><IMG src="jpeg/s002.jpg" width="90" height="68" border="0"></A> と記載下のですが、ｕｐすると、 auto；blank と出てうまくいきません。 どのように対処すればよいでしょうか？ 取り急ぎご回答をお待ちしています。
- ベストアンサー
- ホームページ作成ソフト
- 画像をクリックすると閉じる別ウインドウ
こんにちは。上記タイトルのページを作りたいと思っています。 親ページには <script language="JavaScript"> <!-- // var new1,win1p; function CenterOpen (img,Xv,Yv) { if (win1p=="on") { if (new1.closed) {} else {new1.close();} } win1p = "on"; Xw=Xv+50; Yw=Yv+80; new1=window.open("", "newwin", "resizable=1,width="+Xw+",height="+Yw+""); if(navigator.appVersion.charAt(0)>=3){new1.focus()}; new1.document.clear(); new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor=#000000><table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>"); new1.document.write("<tr><td align=center valign=center><img src="+img+" width="+Xv+" height="+Yv+"></td></tr></table>"); new1.document.write("<center><form><input type=button value='close' onClick='window.close()'></form></center>"); new1.document.write("</body></html>"); new1.document.close(); } //--> </script> 画像リンクには <a href="JavaScript:onClick=CenterOpen('●●.jpg',サイズ,サイズ);"> こんな感じで作ってあります。 この new1.document.write("<center><form><input type=button value='close' onClick='window.close()'></form></center>"); 画像ボタンがいらないのでここを抜いて 画像をクリックすると子ウインドウが閉じるようにしたいのですが、うまくいきません。このサイトもいろいろ見ましたがよくわかりませんでした。 どなたかご教示下さい。よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像表示の拡大表示について。
画像の拡大表示について？ やじりたいこと、画面上に表示している画像を拡大ボタンが押されたときに 表示しているウィンドウ／画像が拡大表示し、 拡大表示している場合、「前へ」「後へ」が押されたとき、拡大表示している ウィンドウ／画像でページが切り替えたい。 以下のソースでは 「拡大」ボタンを押したときにウィンドウ・画像を表示しますが 拡大した状態で、「前へ」「後へ」押したとき、ウィンドウは拡大しているが 画像が元のサイズに戻ってしまいます。 ソースの<img name = "dspimg" src="..... 部分でwidth/height をピクセルで 指定してるため、元に戻ってしまうと思います。width/height を%で指定した 場合、ＩＥ８ではやりたいことができますが、ＩＥ７だと画像がウィンドウ前面に出たりして うまくいきません。 長々と申し訳ありませんが、 どうすれば、うまくいくか、ご教授ください。 よろしくお願いします。 ■ＰＨＰソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>画像拡大</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function zoom(){ window.resizeTo(900,750); document.all("dspimg").style.width = 880 ; document.all("dspimg").style.height = 650; } //--> </script> </head> <body> <?php $fold = $_GET['fold']; $no = $_GET['no']; $jpgFiles = glob($fold . "*.JPG"); $cnt = count($jpgFiles); ?> <?php // ここで、 width=800 height=600にしているから、再度、呼ばれたときに画像が元に戻る。 echo '<img name = "dspimg" src="' . $jpgFiles[$no] . '" alt="' . $jpgFiles[$no] . '" width=800 height=600 " />'; ?> <input <?php print $bt ?> type="button" value="< 前へ" onclick="location.href='./view.php?fold=<?php print $fold; ?>&no=<?php print $no - 1; ?>'" /> <?php //次の10件 if($cnt - 1 != $no) { $bt = ""; } else { $bt = "disabled"; } ?> <input <?php print $bt ?> type="button" value="次へ >" onclick="location.href='./view.php?fold=<?php print $fold; ?>&no=<?php print $no + 1; ?>'" /> <?php //閉じる //"#" onClick="window.close(); return false; ?> <INPUT type="button" Value="閉じる" onClick="window.close(); return false;"> <?php //拡大 ?> <INPUT type="button" Value="拡大" onclick="zoom();" > </div> </body> </html>
- ベストアンサー
- PHP
- テーブル内に画像表示するとき。
自サイトでレイアウトにテーブルを使っています（邪道って言わないで……）。 で、サイトロゴをセル内に表示させてネスケで確認したところ、 画像が半分テーブルの外にはみ出したようになってしまいました。 ちなみにはみ出した部分は少ししか表示されず、 つまり絵がぱっつんと途中で切れてしまった状態です。 普段はIE派ですが、こちらでは問題なく表示されます。 ネスケは4.7なのですが、まさかそういうバグがあるのでしょうか。 タグ手書きでいつも何かしらミスがあるので、今回も探したのですが、 何故か何が悪いのかわかりません。 以下にソースを載せますので、一緒に考えてくださると嬉しいです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <table bgcolor="#ffffff" width="580" height="210"> <tr> <td width="210" height="210" rowspan="5"> <img src="×××.gif" width="210" height="210" alt="コメント"> </td> <td width="370" height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> <tr> <td align="right" height="15" class="orange2"> 文章文章文章文章 </td> </tr> <tr> <td height="166"> 文章文章文章文章 </td> </tr> <tr> <td height="15" align="right"> 文章文章文章文章 </td> </tr> <tr> <td height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> </table> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 問題の画像は4行目の「×××.gif」。 ちなみに1.gifはこれまたレイアウトの強い味方、 1ピクセル四方の透明画像になっております(笑)。 どうぞ宜しくお願いします。
- 締切済み
- HTML
- 画像の切り替えボタンについて教えてください
サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。 拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。 そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、 サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。 いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。 以下は進む、戻るボタン無しのソースです。 ---------------------javascript------------------------ // resizeImg() function resizeImg(imgId,width,height) { var objStr,obj; if(document.images) { objStr = 'document.' + imgId; obj = eval(objStr); obj.width = width; obj.height = height; } } // imageSwap() function imageSwap(daImage, daSrc) { var objStr,obj; if(document.images) { if (typeof(daImage) == 'string') { objStr = 'document.' + daImage; obj = eval(objStr); obj.src = daSrc; } else if ((typeof(daImage) == 'object') && daImage && daImage.src) { daImage.src = daSrc; } } } ------------------------html--------------------------- <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1.jpg')"> <img src="image/th-test1.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test2.jpg')"> <img src="image/th-test2.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test3.jpg')"> <img src="image/th-test3.jpg" alt="" width="50" height="50" /></a><br /> <a href="#" onclick="resizeImg('test1',1,1); imageSwap('test1','image/kuuhaku.gif');"> <img name="test1" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a> ---------------------------------------------------- よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
今回の場合はテーブル内に50ほど小画像がありましたので その中の一枚と置き換えた場合は レイアウトがうまくいきませんでした。 あらかじめ一枚の大画像がある場合に便利ですね。 回答ありがとうございました！