画像がページによって表示されない!トラブル解決方法は?

このQ&Aのポイント
  • http://small-office.netのサイトで画像が表示されない問題について質問です。特にhttp://small-office.net/list/osaka.htmlのページで画像が表示されないそうです。
  • ジャバスクリプトで画像を切り替える機能を実装しているが、http://small-office.net/list/osaka.htmlのページでは画像が表示されない問題が発生している。
  • 質問者はJavaScriptの知識がなく、インターネットでソースコードを探して使用したが、表示されない原因がわからないとして相談している。
回答を見る
  • ベストアンサー

画像がページによって表示されません

http://small-office.net/のサイトの画像の表示で困っています。 ヘッター右上部分に、ジャバスクリプトで更新するたびに切り替わる画像を設置しました。 トップページやhttp://small-office.net/search.htmlのページではうまく画像が表示されるのですが、 http://small-office.net/list/osaka.htmlのページだと画像が表示されません。 階層が違うからなのか…。 JavaScript の知識がなく、JavaScript のソースはwebで調べてコピーして使いました。 下はジャバスクリプトのソースです。 // JavaScript Document <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://jishusitu.com/"; jmp[1] = "http://co-work-ing.com/"; jmp[2] = "http://thai-kosiki.net/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/common/bnr-ad-header1.png"; img[1] = "img/common/bnr-ad-header2.png"; img[2] = "img/common/bnr-ad-header3.png"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); http://small-office.net/list/osaka.htmlでも画像を表示するにはどうしたらいいのでしょうか? どうぞよろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数9

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

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

img[0] = "img/common/bnr-ad-header1.png"; 表示されているページでは、img/でいいですけど 表示されないページでは階層が違うから、/list/img/になってしまってます。 絶対アドレスで書くとかすれば表示されるのではないでしょうか。 img[0] = "/img/common/bnr-ad-header1.png";

emi-chan3
質問者

お礼

できました! 階層ごとにアドレスを書き換えるのは大変だと思い、絶対アドレスで書くことにしました。 勉強になりました。本当にありがとうございます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

 画像があるべき場所で、右クリックして[画像だけを表示]もしくは画像の情報を確認すると、想定とは異なった画像のパスになっているはずです。  javascriptを使用すると、そのページの位置からのパスになりますから階層が変わると当然見つけられない。画像へのパスをサーバーのルートから、あるいはネット上のパスにすれば良いのでは  ='img/*** ↓  ='/img/*** または  ='/http://hoge.com/*** スタイルシートを利用するのでしたらスタイルシートからのパスになる。  

emi-chan3
質問者

お礼

できました! 本当にありがとうございます。

関連するQ&A

  • 画像をランダムに表示し、リンクもランダムにしたい

    下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか? 例えば、img[2] の画像が表示された場合、jmp[2] ではなく 5つのアドレスの中からランダムにリンク先が決まる、 というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【1】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか? JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://~" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像3枚)にしたいのですが。 【1】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • ランダム表示

    某サイトで このようなスプリクトを手に入れたのですが 設置した際に 横310X縦190と言う 表示画像サイズの指定の仕方が わかりません いろいろ 試したのですが 素人のため なかなか うまくいきません 下のスプリクトにどこにどのようなタグを入れていいのか教えてください  皆様お力を貸してください <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img0.jpg"; img[1] = "img/img1.jpg"; img[2] = "img/img2.jpg"; img[3] = "img/img3.jpg"; img[4] = "img/img4.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>

  • ランダム表示画像へ説明文を表示したい。

    ランダムな画像表示に対しそれぞれへの個別リンク設定をし、 個々の画像にカーソルを重ねた時に説明文を表示するようにしようと思っています。 画像とリンクはうまくいっているのですが説明文が表示されません 記述は下記のようにしました。 間違っているところを訂正していただけないでしょうか、 お願いします。 <script language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.marucho-powertec.com/contents/powercool.html"; jmp[1] = "http://www.marucho.co.jp/mbs/cnts/option1/?c=seakayak"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "image/k_imgae/index/event/h23powercool.gif","遮熱塗料パワークール"; img[1] = "image/k_imgae/index/event/h23.08.18.jpg","シーカヤックガイドツアー"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); //--> </script>

  • サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

    お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか? ■記述1(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述2(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述3(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述4(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ   | ̄ ̄ ̄ ̄ ̄ ̄ ̄|   |  拡大画像  |   |_______|   | ̄|| ̄|| ̄|| ̄|   |_||_||_||_|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

  • 画像がうまく表示されないのですが

    ページを見るごとにランダムで画像が変わるタグを書き込んだのですが・・・ タグ1 <script language="JavaScript"> <!-- var simg=new Array(5); simg[0]="icon1.png"; simg[1]="icon2.png"; simg[2]="icon3.png"; simg[3]="icon4.png"; simg[4]="icon5.png"; var Myimg=Math.floor(5*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </script> タグ2 <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(2); simg[0]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; simg[1]="<a href="XXX" target="_blank"><img src="XXX.jpg" border=0></a>"; Myimg=Math.floor(2*Math.random()); document.write("<img src='"+simg[Myimg]+"'>"); //--> </SCRIPT> タグ1はインフォシークのサーバーでは表示されたのですが、A-RINGSのサーバーでは表示されなかったので、サーバーの問題で表示されないのでしょうか? 表示されないとしたらどのようにしたら表示されるものなのでしょうか? タグ2はどちらのサーバーも表示されませんでした。 どうしたらちゃんと表示されますでしょうか?

  • 外部ファイルにしたら文字化けしてしまいました

    FC2ブログで下記【1】を <script type="text/javascript"> <!-- 【1】 // --> </script> で囲んで直接プラグインに書き込んだら 文字化けせずに表示されたのですが、 外部ファイルにして <script type="text/javascript" src="【1】のJSファイルのパス"></script> をプラグインに書き込んだら、 画像リンクはうまく表示されたのですが、 文字化けしてしまいました。 文字化けしない方法はないでしょうか? 【1】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://~"; jmp[1] = "http://~"; jmp[2] = "http://~"; jmp[3] = "http://~"; jmp[4] = "http://~"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • JSを用いてサイトを開いた際にランダムでバナー表示する仕組みを作りたい

    JSを用いてサイトを開いた際にランダムでバナー表示する仕組みを作りたいと思っているのですが、 2のバナーの時には別窓で開き1のバナーの時はセルフで開くような設定を施す場合は どの用に書けばいいでしょうか? 一応いろいろと調べて下記までは書いてみたのですが。。。 うまく動きません。。。 どなたか助けていただけませんでしょうか? よろしくお願いします。 <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する jmp = new Array(); img = new Array(); tgt = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "wwwwwww.com"; jmp[1] = "wwwwwww.com"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/01.jpg"; img[1] = "img/01r.jpg"; // ブランクの指定 tgt[0] = "_self"; tgt[1] = "_blank"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' target='"+tgt[n]+"' border='0'>"); document.write("</a>"); //--> </SCRIPT>

  • 一定時間で画像とリンク先を変換する

    DreamWeaverCS3でHPを製作しております、まだ初心者です。 リンクが設定してある画像を一定時間で変換していき、なおかつリンク先のページをポップアップウィンドウで開こうとしています。 下記コードでポップアップウィンドウは開くのですが一定時間での変換がうまくいきません。 どなたかご教授頂けませんでしょうか。 宜しくお願い致します。 <SCRIPT language="JavaScript"> <!-- var interval = 5000; //切り替わる時間(1000=1秒) jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "00000.html"; img[0] = "00000.jpg"; jmp[1] = "11111.html"; img[1] = "11111.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' onClick=\"javascript:window.open('"+jmp[n]+"','','width=400,height=380'); return false;\">"); document.write("<img src='"+img[n]+"' border='0' width='300' height='25' />"); document.write("</a>"); setInterval(function(){ //--> </SCRIPT>

  • javascriptで画像を表示する

    javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。

専門家に質問してみよう