ホームページの写真が映らない

前へ 次へ
このQ&Aのポイント
  • ホームページに写真が表示されない問題について相談です。自作のJavaScriptを使い、写真をフラッシュさせるつもりでしたが、意図しない複数の写真が表示されています。また、写真ファイルの置き場所にも疑問があります。現在、写真ファイルはUbuntu16.04の/var/www/html以下に配置しており、ホームページも同じ場所にありますが、写真が表示されません。正しい写真の置き場所や設定方法を教えていただきたいです。
  • ホームページで写真が正しく表示されない問題が発生しています。JavaScriptを使用して写真をフラッシュさせるためのコードを作成したのですが、思った通りの動作になっていません。写真のサイズや配置に関する疑問もあります。現在、写真ファイルはUbuntu16.04の/var/www/htmlディレクトリ以下に配置していますが、正しく表示されません。正しい写真の配置方法や設定を教えていただきたいです。
  • ホームページに写真が表示されません。JavaScriptを使用して写真をフラッシュさせるためのコードを試した結果、思った通りの動作にならず困っています。具体的には、意図しない複数の写真が表示されてしまい、写真の配置場所にも疑問があります。現在、写真ファイルはUbuntu16.04の/var/www/html以下に配置していますが、正しく表示されません。適切な写真の配置方法や設定についてアドバイスをいただきたいです。
回答を見る
  • ベストアンサー

ホームページ。写真が映りません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ setInterval(function(){ $('.blink').fadeOut(1200, function(){$(this).fadeIn(200)}); }, 1400); }); </script> <img src="/img/4673.jpg" "/img/8040.jpg""/img/8006.jpg""/img/2582.jpg" "/img/6920.jpg""/img/0036.jpg""/img/1943.jpg""/img/0840.jpg""/img/0127.jpg" "/img/3783.jpg""/img/9118.jpg""/img/9365.jpg""/img/4392.jpg" "/img/6805.jpg" "/img/9374.jpg" "/img/7303.jpg" "/img/3879.jpg""/img/5934.jpg""/img/9364.jpg"alt="" width="990" height="660" class="blink"> http://klutche.org/archives/1612/ いつも教えて下さり有難うございます。 上記URLを見て、JavaScriptを試したのですが、１つの写真サイズでフラッシュさせるには？ のつもりが、990*660が１０枠以上出てきましたので、上記のような不自然なJavaScriptになりました。 １番の疑問点が写真ファイルの置くところです。 ワタシはUbuntu16.04で/var/www/htmlの下に置いてます。 ホームページも同じ場所です。 全く映りません。 写真ファイルはどのように置くべきですか？ ご回答の程、宜しくお願い申し上げます。

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

  • ベストアンサー
  • szk9998
  • ベストアンサー率45% (1024/2232)
回答No.1

状況がよくわからないので推測です。 まず、「img」フォルダというのはどこにあるのですか？ あなたのディレクトリ構造がどうなっているのかわからないので、 相対指定で話しますが、htmlファイルと同じ階層に「imgフォルダ」 があるのならば、 "./img/ファイル名" または "img/ファイル名"のようにしないとダメです。 また、一つのimgタグ内に複数のファイル名を記述するのを初めてみ ましたが、何を参考にしたのでしょうか？ 最新規格を確認したわけではないのですが、たぶんダメです。 （おそらく最初のファイル名だけ表示される） <img src=ファイル名1> <img src=ファイル名2> <img src=ファイル名3>・・・・ のようにタグを分けるべきだと思いますよ。 いずれにせよ、htmlの基本的なお約束事なのですが・・・ 基礎から体系的に学習されることをおすすめします。

abe022315
質問者

お礼

ご回答有り難うございます。 すみません、疲れました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. ITシステム運用・管理
  4. ハードウェア・サーバー

関連するQ&A

  • アニメーションをループさせたい

    すみませんjquery初心者です。 下記の様な簡単なスライドショーを作りたいのですが、 ---------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script> <script> setTimeout(function() { $(".slide01").hide(); $(".slide02").show(); }, 3000); setTimeout(function() { $(".slide02").hide(); $(".slide03").show(); }, 6000); setTimeout(function() { $(".slide03").fadeOut(2000); $(".slide04").fadeIn(2000); }, 9000); setTimeout(function() { $(".slide04").fadeOut(2000); $(".slide01").fadeIn(2000); }, 15000); </script> <style> p.slide01, p.slide02, p.slide03, p.slide04 { position: absolute; } </style> <div class="slide"> <p class="slide01"><img src="images/image01.jpg" alt="" /></p> <p class="slide02" style="display:none;"><img src="images/image02.jpg" alt="" /></p> <p class="slide03" style="display:none;"><img src="images/image03.jpg" alt="" /></p> <p class="slide04" style="display:none;"><img src="images/image04.jpg" alt="" /></p> </div> ---------------------------------------------------------------- 下記の様にループさせようとすると何やら挙動がおかしくなってしまいます。。 ---------------------------------------------------------------- setInterval( function () { setTimeout(function() { $(".slide01").hide(); $(".slide02").show(); }, 3000); setTimeout(function() { $(".slide02").hide(); $(".slide03").show(); }, 6000); setTimeout(function() { $(".slide03").fadeOut(2000); $(".slide04").fadeIn(2000); }, 9000); setTimeout(function() { $(".slide04").fadeOut(2000); $(".slide01").fadeIn(2000); }, 15000); },0); ---------------------------------------------------------------- どのようにすればループさせることが出来るのでしょうか？ ご教授頂けると非常に助かります。 よろしくお願いします。

  • 【jQuery】setInterval

    jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>

  • jqueryのスライドショー。htmlに画像1枚で

    jquery-1.5.1.min.jsを使ってjpg画像を ランダムにスライドショーさせるプログラムで、 下記ポイントを満たしたプログラムへ変えたいです。 ・scriptが機能しない場合には画像がちゃんと表示される ・html上にスライドショーに使う画像を並べない（下記コード参考＝【画像多いバージョン】） ・修正するコードは【画像1枚バージョン】 よろしくお願いします。 【画像1枚バージョン】 <script type="text/javascript"> $(function(){ 　var elm = $(".fadein"); 　elm.children("img").hide(); 　(function(){ 　　var img = elm.children("img:hidden"); 　　elm.children("img:not(hidden)").fadeOut(1000); 　　$(img.get(Math.floor(Math.random() * img.length))).fadeIn(500); 　　var id = setTimeout(arguments.callee, 5000);　　 　})(); }); </script> <div class="fadein"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> 【画像多いバージョン】 <script type="text/javascript"> imgLength = 20; firstInt = 1; imgChangeSpeed = 5000; imgExtension = ".jpg"; imgDirectory = "img/"; randomInt = firstInt + 1; $(function(){ var t = setInterval(loadImg, imgChangeSpeed); function loadImg(){ $("#gallery").children("img").animate({'opacity':'0'}, 0) $("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 1000); if(randomInt < imgLength){ randomInt = parseInt(randomInt) + 1; } else{ randomInt = 1; } } }); </script> <div id="gallery"> <img src="img/1.jpg" /> </div>

  • フェイドインしながら移動させたい

    下記の様にスクリプトを書いているのですが、 ------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="common/js/rollover.js" type="text/javascript"></script> <script> var i = 0; var int = 0; $(window).bind("load", function() { $('#box01').fadeIn(1000).animate({'marginTop': '-20px'}); // box01のフェードインの実行 var int=setInterval("sFade(i)",1000); // 1000ミリ秒ごとにフェードインの処理の実行 }); function sFade() { if (i >= 1) { clearInterval(int); // setIntervalの解除 } if (i == 0) { $('#box02').fadeIn(1000).animate({'marginTop': '-20px'}); // box02のフェードインの実行 } if (i == 1) { $('#box03').fadeIn(1000).animate({'marginTop': '-20px'}); // box03のフェードインの実行 } i++; } ------------------- フェイドインした後に上に移動してしまいます。 フェイドインしながら移動させるにはどのように書けば良いのでしょうか。 ご教授頂けると非常に助かります。

  • 複数jQueryの配置で干渉　設置位置

    Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？

  • ランダムなフェードインを作りたいです。

    jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>

    • ベストアンサー
    • AJAX
  • 指定時間経過後に画像を一定時間で切替

    Javascriptで指定時間経過後に画像を一定時間で切替したいと思っています。 一定時間の画像切替は以下のように実現しています。このJavascriptにさらに”指定時間経過後”という条件を付けたいのですがどうしたらよいでしょうか？ ■Javascript <script> $(document).ready(function(){ $('.slideImg img:gt(0)').hide(); setInterval(function() { $('.slideImg :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.slideImg '); },5000); }); </script> ■HTML <div class="slideImg "> <img src="img1.jpg" alt="" /> <img src="img2.jpg" alt="" /> <img src="img3.jpg" alt="" /> </div> ■CSS .slideImg{ position:relative; width: 100px; height: 100px; } .slideImg img{ position:absolute; left:0; top:0; }

  • jQueryにて背景のURLを取得

    jQueryにて背景のURLを取得しimgを表示する場合で背景を縦横の倍率を50％に縮小するにはjavascriptをどうすればいいのでしょうか？ 【javascript】 jQuery(function($){ var ori_img = $("#crop_img"); crop_window.css({'background-image': 'url('+ori_img.attr('src')+')'}); }); 【HTML部分】 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="crop"> <img src="./test.jpg" id="crop_img" alt="" > <div id="crop_window"></div> </div>

    • ベストアンサー
    • AJAX
  • ライブドアブログでlazyloadが使えない

    ご覧頂きありがとうございます。 早速の質問ですが、ライブドアブログでjQueryのlazyloadが動作しません。どうしたものでしょうか。 目標としては、ブログ内の画像をスクロールと同時に読み込み、フェードインさせたいです。 行った手順としては、 jsファイル、画像ファイルをアップした後、 管理ページ＞デザイン設定＞カスタムJS から</head>直前に以下のコードを書きました。 <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./jquery.dimensions.min.js"></script> <script type="text/javascript" src="./jquery.lazyload.js"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ placeholder : "./img/loading.gif", effect : "fadeIn" }); }); </script> jsファイルや画像ファイルのパスは間違っていないことは確認しました。

  • <hoge />と<hoge></hoge>の違い

    現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。 具体的には <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/> <script type="text/javascript"> function show() { } </script> こんなソースを書いていましたが、showメソッドが認識されていませんでした。 そこで <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script> とかくと、後ろのメソッドも認識されました。 ここで疑問なのは</>と</script>の違いです。 この２つは何がちがうのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する