- ベストアンサー
同じ画像 複数回使用
htmlでの画像使用についての質問です。 サイト内で同じ画像を複数回使うとき（背景repeat等ではなく）、 いちいち<img ｓｒｃ>で同じ画像をダウンロードさせるのは 記述が面倒だし、パフォーマンスも低下すると思うのですが、 何か良い方法はありませんでしょうか。 知っている方がいらっしゃったら教えていただけるとうれしいです よろしくお願いします。
- のぶ（@hyugazin）
- お礼率100% (54/54)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- tkmojo
- ベストアンサー率50% (105/207)
一度ダウンロードした画像ファイルはキャッシュに残りますので、 <img ｓｒｃ>を書くたびにダウンロードしているわけではないですよ。
お礼
そうなんですね！ 全ていちいちダウンロードしているものと思っていました。 それなら同じ画像であればいくらすかってもパフォーマンスには あまり影響はでないですね。 ありがとうございました。
記述はコピー＆ペーストすればいいだけ パフォーマンスは1つの画像なんで低下しない
お礼
ご回答ありがとうございました
補足
ご回答ありがとうございます。 画像は複数使いたいと思っています。 同一の画像（同一ＵＲＬの画像）であればいくつ使ってもサーバーへのリクエストは一回ですむということでしょうか。
関連するQ&A
- 1箇所に複数画像を別々に配置は可能でしょうか？
出来ないのかも知れませんが、もし可能かつご存知の方いらっしゃいましたらアドバイスをお願いいたします。 行いたいことは、1つの場所に複数の画像を配置し、それぞれの配置を異なる場所へ置きたいということです。具体的には…、 <div id="hoge"> ←このコンテナ内に画像を複数配置 <img src="img001.jpg" /> ←この画像はセンタリング <img src="img002.jpg" /> ←この画像は右寄せ </div> 1つのDIV内にセンタリングと右寄せで画像を配置という事です。 positionにて相対的に試してみたのですが、中央の<img src="img001.jpg" />のサイズによって<img src="img002.jpg" />の配置が変わってしまうので断念しました。その時は <div id="hoge"> <img src="img001.jpg" /><span id="hage"><img src="img002.jpg" /></span> </div> という感じで、<span id="hage">に相対positionでした…。駄目でしたが。。 条件としてはそれぞれにリンクを定義したいので背景ではなく画像として配置したいと思います。 どなたかアドバイスのほどよろしくお願いします。
- ベストアンサー
- CSS
- javascript/画像複数表示について
初めまして。 javascriptは何も知らないのですが、 業務で必要となり、困っております。 どなたかご教示下さい。 ■動かない 下記※の記述をしたのですが、 一つだけだと動くのですが、複数同じものを何個もhtml内に記述すると、 動作しません。 察するにファイル名等の指定が必要なのかな… なんて思うのですが、その方法がわかりません。 WEBサイト内でサムネイルをクリックすると、 大きな画像が選定するファイル毎に切り替えるスクリプトです。 ■現状の記述内容 <html> <head> <title></title> <script type="text/javascript"> <!-- function Imgche(ado) { document.space.src=ado; } // --> </script> </head> <body> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> <center> <p style="border: ridge 10 #cccc66; width: 300; height: 300; background-color: #cccc66; "> <p> <img src="小さな画像ファイル名1" onClick="Imgche('大きな画像ファイル名1')"> <img src="小さな画像ファイル名2" onClick="Imgche('大きな画像ファイル名2')"> <img src="小さな画像ファイル名3" onClick="Imgche('大きな画像ファイル名3')"> </p> <img src="最初に表示されている画像" width="300" height="300" name="space"> </p> </center> </body> </html>
- 締切済み
- ネットトラブル
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。
- 締切済み
- CSS
- 外部ＣＳＳで画像の挿入は出来ますか？
外部ＣＳＳで、背景画像ではなく、「画像」の挿入は出来ますか？ <IMG SRC="●●">をＣＳＳで。 もし出来ましたら、外部ＣＳＳとHTML両方の記述を教えていただけると助かりますm(_ _)m
- ベストアンサー
- CSS
- 画像が表示されません。（IE以外）
前回背景画像が映らなかったことを質問して解決したのですが 今度は普通の画像が映りません。記述はこうです。 <img src="ロゴ.gif" width="500" height="140"> 普通基本はこれでしたよね（本にも載っていますが。。。） 僕のPCが古いのでしょうか。また記述が間違っているのであれば 正しい記述を教えてください。
- ベストアンサー
- HTML
- GDを使って画像の背景を透過させたい
画像の背景を透過させたいと思い下記コードを実行してみたのですが、期待通りの状態になりませんでした。（体の周りに白が残ってしまう） $src = 'http://ec2.images-amazon.com/images/I/41VI47EYcaL.jpg'; $img = imagecreatefromjpeg($src); $color = imagecolorallocate($img, 255, 255, 255); imagecolortransparent($img, $color); imagepng($img); imagedestroy($img); そこで、255, 255, 255だけではなく250, 250, 250くらいも透過してみようと思い $color = imagecolorallocate($img, 255, 255, 255); imagecolortransparent($img, $color); $color = imagecolorallocate($img, 250, 250, 250); imagecolortransparent($img, $color); と、透過処理を二回続けてみました。すると、最初の状態よりも透過が上手く行われていない結果となってしまいました。 複数色を透過処理することはできないのでしょうか。 imagealphablending, imagesavealphaや、透過するごとに画像を保存して読み込んで…ということをしてみたのですがそれもやはり同じような結果でした。 255～250くらいまで、複数色を透過したとしても綺麗に背景だけ透過されるという結果は得られないかもしれませんが、もしよろしければ複数色の透過を行うコードを教えて頂ければ幸いです。 複数色を透過させる方法、もしくは他の方法でも良いので綺麗に背景だけ透過させる方法がありましたら教えて下さい。 宜しくお願い致します。
- ベストアンサー
- PHP
- 複数の画像を1つの画像として出力したい
例えばサイトのカウンタです。 表示させたい画像を1つの画像として処理させるのはどうすれば良いのでしょうか？ HTML側では<img src="～.php">とするのは分かりますが、 phpファイルの中身が分かりません。
- ベストアンサー
- PHP
- 交互に入れ替わる画像を複数配置
画像名が変わっても、プログラムは変更しないで、html内のソースの画像名のみを変更するだけでいいようなjavascriptを探していたところ、下記のサイトを発見しました ◆画像を交互に入れ替える (title属性を利用して入れ替える) http://www.openspc2.org/reibun/javascript2/image/change/0002/index.html やりたいことは上記のものでいいのですが、1ページ内に、交互に入れ替わる画像を複数配置する場合は、どのようにしたらいいでしょうか？ 上記のものですと、「photo01」をidに指定した画像１つしか動作しません。 最初にも申しました通り、プログラムは変更したくないので、できれば、1つのIDで画像名を変更するだけにしたいのですが・・・ 以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？ <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon01.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon02.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon03.png"> よろしくお願い致します
- ベストアンサー
- JavaScript
- Javaの画像切り替え、同一ページに複数設置する
同一ページ内の複数の場所に、外部のファイルで数秒毎に画像が切り替わる動作を指定したスクリプトを読み込ませたいのですが上手くいきません。 Java初心者で、いろいろ検索して回ったのですが、見当たらなく、ご検討よろしくお願いします。 以下、実装したい内容 <body> <img src="img/1.jpg" name="img1"> // 画像(1)（2秒毎に、(2)、(3)に画像が切り替わる） <img src="img/4.jpg" name="img4"> // 画像(4)（2秒毎に、(5)、(6)に画像が切り替わる） 以下、上記の動作をする画像を複数設置。 </body> 外部Javaソース chgCount = 0; mypic = new Array ( "img/1.jpg", "img/2.jpg", "img/3.jpg"); function imgChanger() { chgCount++; chgCount %= 3; document.img1.src = mypic[chgCount]; } setInterval("imgChanger()",2000);
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ このような方法は初めて知りました。 これなら自分が問題としてとらえていることが見事に 解決されます。 めからうろこです。 この度はありがとうございました。