画像の大きさで文字と画像がアンバランスになる問題

2023/08/01 06:46

このQ&Aのポイント

IEで文字のサイズを変更すると、文字と画像がアンバランスになる問題が発生しています。
文字の大きさを固定したくない場合に、文字の横に1文字の大きさ程度の画像を表示させたいと考えています。
単純に考えて、特定の条件下で画像のサイズを変更することは可能ですが、具体的な方法がわかりません。

ベストアンサー

画像の大きさ

2005/05/15 22:34

文字の横にちょっとした目印に1文字の大きさ程度の画像を表示させたいのですが、IEで文字のサイズを変更すると文字と画像がアンバランスになってしまいます。文字の大きさを固定したくないと思っています。単純に考えて、下のようなことができればと思っていますが、無理だと思っています。（???が埋まれば出来そうですが・・・）参考になるサイトなどがありましたら教えてください。 <body> <img id="img" src="abc.gif" width="15" height="15" border="0" style="float:left;"><span>aaaaa</span> </body> <script> a = new Array("0.8","1.0","1.2"); if(??? == ???){i = 0;} else if(??? == ???){i = 1;} else if(??? == ???){i = 2;} document.getElementById("img").setAttribute('width',15*a[i]); document.getElementById("img").setAttribute('height',15*a[i]); </script>

cyokokichi
お礼率54% (55/101)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

T0ngT0ng
ベストアンサー率40% (8/20)

2005/05/16 08:43 回答No.1

画像のサイズをスタイルシートでem単位(em=1文字分の大きさだったと思います。)で指定する、ではだめですか？たとえば、 <img id="img" src="abc.gif" border="0" style="width:1em;height:1em;float:left;"> とか。

質問者

お礼 2005/05/16 17:52

ありがとうございます。画像サイズ指定でemが有効とは考えもしませんでした。

関連するQ&A

html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
jquery cycleで画像リサイズ
jquery cycle pluginを使用して、画像のスライドをしています。画像を画面中央に全画面表示をしたいのですが、スライドする画像のサイズがそれぞれ異なるため、画像の比率を固定して、縦横のサイズで大きい方を画面に合わせて表示したいのです。私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。みなさんお力お貸しください！！
- ベストアンサー
- JavaScript
マウスオーバーで複数の画像を切り替える
こんにちわ、お知恵を拝借させて下さい。 1週間以上探していますが、なかなか答えに結びつきません。現在下記の内容で<div id="photoAlbum"></div>内の二つの画像の同時切替を行なおうとおもっております。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript" src="main.js"></script> </head> <body> <table width="570"> <tr> <td><div id="photoAlbum"><img src="19.jpg" width="280" height="280"><img src="19pt01.jpg" width="280" height="280"></div></td> </tr> <tr> <td align="center"><img src="19.jpg" width="80" height="80" id="changeButton1"> <img src="26.jpg" width="80" height="80" id="changeButton2"> <img src="33.jpg" width="80" height="80" id="changeButton3"> <img src="40.jpg" width="80" height="80" id="changeButton4"> <img src="57.jpg" width="80" height="80" id="changeButton5"> <img src="64.jpg" width="80" height="80" id="changeButton6"></td></tr> <tr> <td align="center"> </td> </tr> <tr> <td><table width="438" border=0 cellpadding=3 cellspacing=1 bgcolor="#999999" style="FONT-SIZE: 9pt; LINE-HEIGHT: 100%"> <tr bgcolor=#e6e6e6> <td width="30%" nowrap><SPAN style="FONT-SIZE: 8pt"> JAN</SPAN></td> <td width="46%" nowrap><SPAN style="FONT-SIZE: 8pt"> 型番</SPAN></td> <td width="24%" nowrap><SPAN style="FONT-SIZE: 8pt"> カラー</SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 19</SPAN></td> <td><SPAN> BK</SPAN></td> <td><SPAN> <a href="#" id="changeButton7">ブラック</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 26</SPAN></td> <td><SPAN> GY</SPAN></td> <td><SPAN> <a href="#" id="changeButton8">グレー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 33</SPAN></td> <td><SPAN> NV</SPAN></td> <td><SPAN> <a href="#" id="changeButton9">ネイビー</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 40</SPAN></td> <td><SPAN> GR</SPAN></td> <td><SPAN> <a href="#" id="changeButton10">グリーン</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 57</SPAN></td> <td><SPAN> OR</SPAN></td> <td><SPAN> <a href="#" id="changeButton11">オレンジ</a></SPAN></td> </tr> <tr bgcolor=#ffffff> <td><SPAN> 64</SPAN></td> <td><SPAN> RD</SPAN></td> <td><SPAN> <a href="#" id="changeButton12">レッド</a></SPAN></td> </tr> </table></td> </tr> </table> </body> </html> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－ window.onload = function(){ document.getElementById("changeButton1").onmouseover = function() { album2.change(["19.jpg","19pt01.jpg"]); } document.getElementById("changeButton2").onmouseover = function() { album2.change(["26.jpg","26pt01.jpg"]); } ～中略～ document.getElementById("changeButton12").onmouseover = function() { album3.change(["64.jpg","64pt01.jpg"]); } } var album2 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } var album3 = { change : function(imageArray){ var imgTag = document.getElementById("photoAlbum.mainbody").getElementsByTagName("img"); for (var i=1; i<imgTag.length; i++){ imgTag[i].src = imageArray[i]; } } } －－－－－－－－－－－－－－－－－－－－－－－－－－－－上記内容で試していますが、changeButton7～12が入っているテーブルを削除すると動作するのですが、この状態ではどうしても動作させることができません。何か、良い方法はないでしょうか
- ベストアンサー
- JavaScript
HPに写真を載せる方法
HPに写真を載せるに当たって、アクセスのたび４枚の写真を順番に表示させたいのです。写真をA～Dとした場合、ランダムならば <SCRIPT Language="JavaScript">  </SCRIPT>　ここまでは判ったのですが・・・・ A⇒B⇒C⇒D　Aに戻る　に、変更するにはどうしたらよいのでしょうか？初心者で、専門用語は判りませんが宜しくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
jqfloat.jsを複数の画像に適用したい
javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。ランダム配置まではうまくいったのですが jqfloatが７枚のうち１枚にしか適用されず困っております。（最後のid='fuwa'のところ） jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが… どなたか対処法を教えていただけませんでしょうか。どうぞよろしくお願い致します！ <script type="text/javascript"><!-- $(document).ready(function() { $('#fuwa').jqFloat({ width: 50, height: 50, speed: 2500 }); }); var images = [ {img : "1.png" , url : "http://1.com"}, {img : "2.png" , url : "http://2.com"}, {img : "3.png" , url : "http://3.com"}, {img : "4.png" , url : "http://4.com"}, {img : "5.png" , url : "http://5.com"}, {img : "6.png" , url : "http://6.com"}, {img : "7.png" , url : "http://7.com"} ]; images.sort(function(){return Math.random() - Math.random();}); function getBrowserWidth ( ) { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function getBrowserHeight ( ) { if ( window.inneHeight ) { return window.innerHeight; } else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; } else if ( document.body ) { return document.body.clientHeight; } return 0; } Imgn=7; for (i=0; i < Imgn; i++){ xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>"; document.write(thumbs); } </script>
- 締切済み
- JavaScript
画像のロールオーバー
画像のロールオーバーで下記のスクリプトを教えてもらいました。画像aをマウスオーバーで画像a2に変わるクリックでオーバーした状態を保持（画像a2のまま）さらに、画像bをマウスオーバーで画像b2に変わりクリックでオーバーした状態を保持（画像b2のまま）そのクリック時、画像a2が画像aに変わる実装できたのですが。下記のソース２つテーブルが１つのhtml上にあり a～fまでg～iまで画像が分かれていて a～fをクリックし画像が変わった後 g～iをクリックするとa～fの画像が変わらないようにしたいのです。二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？よろしくお願いします。 <html> <head> <style type="text/css">  </style> <script type="text/javascript"></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
Javascript画像切り替えIEでしか動かない
Javascriptで画像を切り替えています。 IEでは動くのですが他のブラウザだと動きません。 FirefoxやChromeは何か特殊なのでしょうか？わかる人いたら教えてください。 <script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">
- ベストアンサー
- JavaScript
クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript">  </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
画像縮小プログラムが、最初に読み込んだ時（再読み込みしない場合）動きません。
今javascriptを使って、縦横比を固定したまま画像を縮小するプログラムを作っています。ソースコードは function keep_max() { for (i in document.images) { if (document.images[i].className == 'small_sale_thumb') { max_width = 100 ; max_height = 110 ; }else { continue; } if ( document.images[i].height > max_height) { now_width = document.images[i].width; now_height = document.images[i].height; factor = max_height/now_height; document.images[i].height = max_height ; document.images[i].width = now_width * factor; } } } それで、このようにして画像を表示しようとします。 <img width="100" class="small_sale_thumb" src="http://hogehoge.co.jp/bc11/u3785993.jpg" /> <script type='text/javascript'> keep_max(); </script> このようにして、他のドメインのサイト（楽天など）の画像を読み込み、縮小して表示しようとしているのですが、最初に読み込んだ場合、このプログラムが作動しません。しかも何故か、二回目に読み込んだ場合（同じページを再読み込みした場合等）作動します。これはいったいどういうことでしょうか？ちなみに今妥協策として、bodyのonloadタグにもこれを仕込んでいますが、この場合、画像表示から縮小までにタイムラグがあります。このプログラムを上手く動かす方法or他のクライアントサイドでの縮小の仕方はありませんでしょうか？？ちなみに縮小したい画像の件数が多いので、負荷対策のためGD等のサーバーサイドでの縮小は考えないようにしています。
- ベストアンサー
- JavaScript