- ベストアンサー
ホームページの画像がUPされないのですが・・・。
最近何とかホームページの作成＆アップが出来ました！ ですが、サイトのヘッダをはじめ、 その他の画像がすべて掲載できません。 どんな原因があるのでしょうか？？ 自分なりに調べると、サーバーにアップ出来てないのでは？ と思ったんですが、一応、FFFTPでは画像も一緒に転送しました。 ソースはこんな感じです。 <img src="images/ファイル名.png" alt="" width="860" height="110" /> お詳しい方、よろしくお願いします。
- toppy22
- お礼率85% (61/71)
- レンタルサーバ・ASP
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
A No3です。 (1) 記載したのは、 ＜アップ前のプレビューでは表示されるのに＞Serverへ転送すると、表示されないことを意味しています。 (2) 日本語.png との事なら、これが原因の可能性大。 ファイル名 日本語を＜日本語.png → nihongo.png ＞に、2～3ヶ所 代えてテストされたらと思います。
その他の回答 (3)
- Calm Trip（@CalmTrip）
- ベストアンサー率41% (511/1244)
再度 ソースとファイル名の、確認をお勧めします。 ソース <img src="images/ABCD.png" alt="" width="860" height="110" /> イメージファイル abcd.PNG とか、ソースと、イメージファイル名の 違いと思います。 ソース、イメージファイル共、ファイル識別を含め、全て 英半角・小文字＜ abcd.png ＞で書く事を習慣にされたららと思います。 理由：Pc上では、小文字 と 大文字が異なっていても、同じとファイルと見做されますが、 Unix＜Server＞では、違うファイルとされるため。
お礼
ご回答ありがとうございます！ そうですね。何度か確認しましたし、アップ前のプレビューでは表示されるので、 ソースの記入ミスではない気がします。 一応、ファイル名は間違えにくいようにと思って日本語で作ってます。 日本語.png
- Gletscher
- ベストアンサー率23% (1525/6504)
●可能性１ サーバにアップロードした時にアスキーモードになっていませんか？ 画像はバイナリーモードでやりましたか？ ●可能性２ アップロード先のディレクトリは合っていますか？ そのソースでは「images」というディレクトリを作って、そこの下に入れないといけないですね。 ●可能性３ ファイル名が違っていませんか？ 特に、大文字/小文字が間違っていませんか？ また、HTMLをその１行だけ書かれても、ヘッダーとか他の部分がおかしいかも知れませんね。
お礼
ご回答ありがとうございます！ (1)はい、そのモードのことは知らないのですが、転送時にバイナリと表示されてましたので バイナリモードなのだと思います。 (2)これの可能性があるかもしれません！ 転送先は「/public_html」の中の対象ドメインのフォルダ(？)の中に一括して転送しました。 もともと空だったフォルダの中に次の４つを転送して完了しました。 「css」「images」「index」「link」 この場合そのドメインの中にファイルか何かを作る必要があるのでしょうか？ (3)ファイル名は確認したので大丈夫だと思います。
- te2kun
- ベストアンサー率37% (4557/12166)
imagesフォルダーに、その目的の画像はありますか？ なければ、目的の場所にその画像がないとなり、表示されていません。 画像の直リンクを防ぐために、Referの送信を求めるサイトがありますので。 あなたがお使いのところは、Referを求めるところではありませんか？ また、Referを送信されていますか？ 一部セキュリティーソフトなどでReferを送信しないものがあります
お礼
ご回答ありがとうございます。 ファイルはあります。 FFFTPで転送完了した際、右側のウインドウに移行された物を確認したので。 Referの送信というのは初めて聞きました！ よく分からないですが、サーバーはxreaの無料サーバーです。 どこを確認すればいいのでしょうか？
関連するQ&A
- 交互に入れ替わる画像を複数配置
画像名が変わっても、プログラムは変更しないで、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
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- Webの表で画像を並べたい
テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル（今後増やす予定です）を作り、画像を並べたいと思っています。 が、左の画像と右下（2つ）の画像、右下（2つ）の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか？どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>
- ベストアンサー
- HTML
- 画像切り替え
<div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006"> <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- FFFTPでアップロードして画像が一部だけでません
FFFTPでアップロードしましたが、画像が一部だけでません。(二つの画面だけです) FFFTPでアップロード画面で、左側pcから、右側サーバへエラー無く転送されました。 しかし、○○.htmフアィルの中の文章が <img src="images/kou.jpg" border="2" width="300" height="250"> IntermetExplorerでみると画像が出ません。このimg文がソースの中でありません。消えてしまっています。 このimg文を別の所へ移してやって見ましたが、やはりおなじです。jpg画像がでません。不思議なことに別のものは出ます。 教えてください。
- ベストアンサー
- その他（インターネット接続・通信）
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- 締切済み
- JavaScript
- IE6、7で途切れてしまう画像
分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？） 高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。
- 締切済み
- HTML
お礼
解決しました！！ はい、これでした。日本語.png こんな簡単なことだったんですね。 間違えにくいようにと日本語にしたのが原因だったとは！！ 助かりました。 ありがとうございます＾＾