リンク後のボタン画像が表示されません。。

質問

お世話になっております。

下記URLサイト
http://www.css-lecture.com/log/javascript/009.html
のプルダウンを行ないたく、実装してみたものですが、
メニューバーにある各ボタンにリンクを設置すると
ページ遷移後にメニューバーにあるボタンが？となって認識されません。。
表示されないボタンですが、
例えば、
5つのボタンで、
それぞれ、
Aボタン→01.html
Bボタン→02.html
Cボタン→03.html
Dボタン→04.html
Eボタン→05.html
リンクしているボタンがあるとしますと、
Aボタンを押して01.htmlに遷移した時は、Aボタンのみ表示されず、Bボタンを押して02.html遷移した時は、Bボタンのみ表示されません。

ソースはそのimgファイルをとって来ているのですが、なぜ表示されないのかがわからず、困っています。

どうか、ご教授お願い致します。

回答No.1

fujillin · ベストアンサー

ご質問文からだと事象だけしかわかりませんので…

＞ページ遷移後にメニューバーにあるボタンが？となって認識されません
ということは、最初のメニュー（？）はちゃんと動作しているのですよね？

遷移後のページを直接開いても同じ、状態でしょうか？（多分そうだと思いますが）
スクリプトの問題というより、設定の問題のように思われます。
最初のページと、遷移後のページのメニュー部分を比較して、同じになっているかを確認してみてください。

あるいは遷移後のページの階層が深くなっていたりすると、画像の相対URLが変わるなどするはずですが、きちんと合っていますか？

「？」表示になるということなので、画像のURLが間違っている可能性が大だと想像されますが、構成など不明なので、あくまでも想像です。

お礼

どうもありがとうございました！！

補足

お返事ありがとうございます。
01～5.htmlまでは同階層にあり、再読込みなどでも表示されないままです。
なぜだか、ローカルテストをすると、ボタンが消えてしまう現象はおきません。
以下は01.htmlのメニュー部分のソースになります。
<div class="menu_navi">
<ul id="globalNavi">
<li><a href="01.html"><img src="img/btn/menu/css.gif" alt="CSS" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="01.html">CSS テクニック</a></li>
<li><a href="01.html">CSS ハック</a></li>
<li><a href="01.html">CSS テンプレート</a></li>
<li><a href="01.html">CSS レイアウト</a></li>
</ul>
</li>
<li><a href="02.html"><img src="img/btn/menu/web_design.gif" alt="Web Design" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="02.html">アイコン素材</a></li>
</ul>
</li>
<li><a href="03.html"><img src="img/btn/menu/javascript.gif" alt="Javascript" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="03.html">ロールオーバー</a></li>
</ul>
</li>
<li><div><img src="img/btn/menu/flash.gif" alt="Flash" class="btn" width="180" height="40" /></div>
<ul>
<li class="first"><a href="03.html">Action Script </a></li>
</ul>
</li>
<li><a href="03.html"><img src="img/btn/menu/mt.gif" alt="Movable Type" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="03.html">プラグイン</a></li>
<li><a href="03.html">テンプレート</a></li>
</ul>
</li>
</ul>
</div>

以下は遷移後の03.htmlのソースになります。
<div class="menu_navi">
<ul id="globalNavi">
<li><a href="01.html"><img src="img/btn/menu/css.gif" alt="CSS" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="01.html">CSS テクニック</a></li>
<li><a href="01.html">CSS ハック</a></li>
<li><a href="01.html">CSS テンプレート</a></li>
<li><a href="01.html">CSS レイアウト</a></li>
</ul>
</li>
<li><a href="02.html"><img src="img/btn/menu/web_design.gif" alt="Web Design" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="02.html">アイコン素材</a></li>
</ul>
</li>
<li><a href="03.html"><img src="img/btn/menu/javascript.gif" alt="Javascript" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="03.html">ロールオーバー</a></li>
</ul>
</li>
<li><div><img src="img/btn/menu/flash.gif" alt="Flash" class="btn" width="180" height="40" /></div>
<ul>
<li class="first"><a href="03.html">Action Script </a></li>
</ul>
</li>
<li><a href="03.html"><img src="img/btn/menu/mt.gif" alt="Movable Type" class="btn" width="180" height="40" /></a>
<ul>
<li class="first"><a href="03.html">プラグイン</a></li>
<li><a href="03.html">テンプレート</a></li>
</ul>
</li>
</ul>
</div>

仮に01.htmlから、<a href="03.html">のリンク先へ飛ぶと
<a href="03.html"></a>部分で囲まれた画像が表示できなくなってしまいます。