- ベストアンサー
画像の大きさが変わってしまいます
- 画像の拡大領域と小さな画像の表示方法について質問があります。
- 拡大領域には一つ目の画像を正しく表示できるが、2個目以降は大きく表示されてしまう問題があります。
- 画像の元々のサイズがばらばらなために、大きさが変わってしまう現象を防ぐ方法はあるのでしょうか?
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- onclickで画像と文字を別々の場所に表示したいのですが...
onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。 (例えば:「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはOK、 その下に「富士山」の文字を表示したい←これです。) 下記のようにしています。 <script language="javascript"> <!-- function Image(img){ document.getElementById("image").src=img} //--> </script> </head> <table> <tr> <td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td> <td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td> <td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td> <td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td> </tr> <tr> <td colspan="4"><img src="sample1.jpg" name="image"></td> </tr> <tr> <td>***ここに文字を表示させたいのです***</td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- 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
- 画像拡大で不具合発生
画像をクリックすると拡大するという設定をした所、htmlファイルだと何も問題なく拡大できるのですが、HP上だと拡大できるヤツと出来ないヤツが発生しました。 漠然と質問ですが何が原因か分かる範囲でいいので教えてください。 <table> <tr style="font-size:8pt"> <td><img src="http:***1.gif" align="left" onClick="this.width=200" onMouseout="this.width=80">あ</td> <td><img src="http:***2.gif" align="left" onClick="this.width=200" onMouseout="this.width=80">い</td> <td><img src="http:***3.gif" align="left" onClick="this.width=200" onMouseout="this.width=80">う</td> </tr> </table> *文章が長くなるので省略しましたが実際は画像100枚分あります。 *元の画像サイズは80x80ピクセルで、ブラウザはIE6です。 (念のため、画像は著作権の無い物です)
- ベストアンサー
- HTML
- 背景画像が反映されない
以下スタイルシートとHTMLを記入しましたが背景画像が反映されません。 CSS .ta1 { background-image: url(../images/staff.jpg); } HTML <table class="ta1"><tr><td>aaaaaaaa</td></tr></table> 何がまちがっているんでしょうか? 画像の位置は間違っていません。
- ベストアンサー
- HTML
- javascript オセロ
javascriptでオセロを作ろうと思っています。 初めに「クリックしたtdタグの背景色を、クリック数が奇数回なら白、偶数なら黒にする」コードを書きたいのですが、 変数とthis(クリックされたtdタグ)の使い方がいまいち分かりません。 ご教授いただければと思います。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } td { width: 100px; height: 100px; } .green { background-color:#093; } .black { background-color:#333; } .white { background-color:#CCC; } </style> <body> <table> <tr> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="black" onClick="osero(this)"></td> <td class="white" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="white" onClick="osero(this)"></td> <td class="black" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> </table> <script type="text/javascript"> <!-- c_count = 0;//tdをクリックした回数 //tdクリックで黒 function kuro(i){ document.i.style.backgroundColor = "#333"; c_count=c_count++ } //tdクリックで白 function siro(i){ document.i.style.backgroundColor = "#ccc"; c_count=c_count++ } //クリック交互に黒白 function osero(i){ if(c_count % 0){ siro(i); }else{ kuro(i); } } --> </script> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- テーブルタグ表示が上手くいかない(html・CSS
下のタグを使うと、ブログに下記画像上部のように表示されているのですが 理想としては画像の下部分のように綺麗に表示したいです。 自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい ムキー!っとなってます。 大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。 何卒お願いします。 画像内のピンクの部分は実際には<img src="で指定された画像になります。 使ったタグ <table border="1"> <td><table id="table-03"> <colgroup> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV>
- ベストアンサー
- ブログ
- 別窓で画像を表示する場合に余白が…
大量に画像を扱って居るのですが、タイトルをクリックすると、別窓でそれぞれの画像が開く様にしています。 サイズは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
- javascriptを使い、サムネイル表示
サンプルHP⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript
- ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ
ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか? ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>
- ベストアンサー
- ブログ
- エクセルVBAでのWeb画面の操作方法について
現在エクセルVBAでWeb画面(社内イントラネット)を、navigateを使って開くところまではできております。 しかし、開いた画面で、「イメージ」という個所をクリックさせる方法がわかりません。 HTMLはほとんどわからないのですが、ソースを見ると、多分このあたりだとおもいます。 <tr><td colspan="2"> </td></tr><tr><td colspan="2" id="ImageButton" class="Button" onclick="toImage(this, 'INTRA');" onmouseover="BigOn(this);" onmouseout="BigOff(this);">イメージ</td></tr><tr><td colspan="2" id="KakoButton" class="Button" onclick="toKako(this, 'INTRA');" onmouseover="BigOn(this);" このうち、多分、onclick="toImage(this, 'INTRA');" を実行させればいいのではないかと想像します。 どのような記述になるのか、ご教示いただけましたら幸いです。
- ベストアンサー
- その他MS Office製品
お礼
丁寧に説明いただきありがとうございました。回答が来るまで、思考錯誤して、色々いじっていたところ、ただ単に拡大領域の大きさを指定していなかっただけでした。こんな根本的な所を見落とすとはまだまだですね。 説明も参考になり、勉強になりました。感謝いたします。ありがとうございました。