リンクが表示されないトップページでの問題と解決方法
- サイト内のリンクを設定したトップページで画像が表示されない問題が発生しています。
- 他のページでは同じリンク設定が正常に機能しているため、問題の原因はトップページに特有のものと考えられます。
- 一時的な解決策として、リンクのURLを「#」にすることで画像が正常に表示されるようになりますが、本来のリンク先に飛ばす方法を知りたいと考えています。
- ベストアンサー
どういうわけかリンクしません
どういうわけかリンクしません ので、教えていただきたくて質問させていただきます。 数ページあるサイトを製作したのですが、 ページ内にメニューボタンを配置し、 それぞれサイト内のリンク先に飛ぶように設定しました。 その内のボタン(sample_btn)にトップページ(index.html)自身に再ジャンプするようなかたちをとろうと思い、 <div id="sample_btn"><a href="index.html"><img src="sample.gif" /></a></div> 上記のxhtmlを書きました。 ところがローカルでは、sample.gifという画像が見えるのですが サーバーにアップすると見えなくなってしまいます。 他のページでは、 <div id="sample_btn"><a href="index.html"><img src="sample.gif" /></a></div> の、index.htmlの部分の名前だけを変えて使用していますが、 問題なく表示されています。 表示されないトップページでも、index.htmlの部分を#に変えると表示されます。 現在は#で問題を回避していますが、 どうにかリンクさせたいというのと、 なぜこうなるのか知りたくて質問させていただきました。 質問に関し情報が少ない場合は指摘がございましたら 追記させていただきます。 リンクする必要が無いかとは思いますが、 今回はどうしてかを知りたい為 どうかご回答よろしくお願いいたします。
- yujiyamasa
- お礼率84% (11/13)
- HTML
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
画像へのパスが間違っている。 画像のあるべき位置にポインターを合わせて「画像を表示」させると、画像のURLが場所欄に表示されるはず。それが見えているページとそうでないページで同じか確認しよう。 本題には関係ないが、ここはdivの必要ないと思う。 <p><a href="index.html"><img src="sample.gif width="80" height="36" alt="トップへ"/></a></p>
関連するQ&A
- テキストのリンクをON/OFFする
Javascriptでテキストをクリックすると2箇所の画像を同時に変更することができたのですが、表示されている画像のテキストのリンクをはずす方法がわかりません。はじめは「ページ３＋４」のテキストのみがクリッカブルで、「ページ３＋４」のテキストをクリックすると、「ページ１+２」のテキストのみがクリッカブルになるようにしたいのです。表示されていない画像のテキストのみをクリッカブルにする方法をどなたか教えていただけますでしょうか？ <script language="JavaScript"> <!-- function swapImg(imgfile1,imgfile2) { document.swpimg1.src = imgfile1; document.swpimg2.src = imgfile2; } // --> </script> <div><img src="sample1.gif" name="swpimg1" /><img src="sample2.gif" name="swpimg2" /></div> <div><a href="javascript:swapImg('sample1.gif','sample2.gif')">ページ１+２</a> <a href="javascript:swapImg('sample3.gif','sample4.gif')">ページ３＋４</a></div>
- ベストアンサー
- JavaScript
- 【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
- オンマウス時の画像表示がおかしい
作成中のホームページのボタン表示を 左側に縦に10個ほどな食べ CSSを使用してマウスを乗せた時にJPG画像を切り替えるように していますが、マウスを乗せた時に 本来表示されないはずの画像ボタンが一瞬表示されてしまいます。 トップページボタンの上にマウスを乗せたあとマウスをサイトマップボタンの 上に移動するとまたトップページの画像が一瞬表示されてしまう どうやら直前に表示した画像が表示されているみたいです どうしたらこの不具合が解消できるのでしょうか？ どなたかお力添えお願いいたします HTML <div id="navibar"> <ul> <li> <div id="btn00"><a href="index.html">Top</a></div> </li> <li> <div id="btn01"><a href="contents.html">システム</a></div> </li> <li> <div id="btn02"><a href="ryoukin.html">料金</a></div> </li> <li> <div id="btn03"><a href="shiryou.html">資料請求</a></div> </li> <li> <div id="btn04"><a href="privacy.html">プライバシーポリシー</a></div> </li> <li> <div id="btn05"><a href="hyouji.html">会社概要</a></div> </li> <li> <div id="btn06"><a href="sample.html">サンプル</a></div> </li> <li> <div id="btn07"><a href="merit.html">メリット</a></div> </li> <li> <div id="btn08"><a href="yougo.html">専門用語</a></div> </li> <li> <div id="btn09"><a href="syoukai.html">紹介制度</a></div> </li> <li> <div id="btn10"><a href="map.html">サイトマップ</a></div> </li> </ul> </div> CSS #navibar #btn00 a { height: 28px; width: 180px; display: block; text-indent: -9999px; background-image: url(btntop.jpg); margin-bottom: 1px; }
- ベストアンサー
- HTML
- スライド部分のリンクが貼れない・・・
トップページスライダー部分のリンクが貼れなくて困っています。 原因を探しているのですがわかりません・・・解る方教えてください。 スライド部分のHTML <div id="window"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://blackartcard.com/slider1/images/sliderimg1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://blackartcard.com/slider1/images/sliderimg2.jpg" alt="" /></a></div> <div><a href="/?p=542"><img src="http://blackartcard.com/slider1/images/sliderimg3.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> </div> </div>
- ベストアンサー
- CSS
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryのclickイベントハンドラ
最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。
- ベストアンサー
- JavaScript
- セレクトボックスで、リンクバナーを表示するには
ブログのサイドバーがかなり長いので短くしたいと考え、リンクバナーをセレクトボックスで表示したいのです。 例えば <P><a href="http://www.kyoraku.co.jp/"><img height="37" alt="kyoraku_京 楽_TOP" src="http://www.kyoraku.co.jp/img/kyoraku.gif" width="99" border="0" name="image" /> <P><a href="http://www.kyoraku.co.jp/"><img height="37" alt="kyoraku_京 楽_TOP" src="http://www.kyoraku.co.jp/img_up/ms_17.gif" width="99" /> <P><a href="http://www.kyoraku.co.jp/"><img height="37" alt="kyoraku_京 楽_TOP" src="http://www.kyoraku.co.jp/img_up/ms_19.gif" width="99" /></P> この様なリンクバナーをセレクトボックスで表示する方法はないのでしょうか。 入れたいリンクバナーは、複数です。 個別リンクの許可は取ってあります。
- ベストアンサー
- JavaScript
- マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。
マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。 <img src="images/aaa.jpg" usemap="#map" /> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> </map> kan.html <div align="center" id="3"><img src="images/bar_3.jpg"></div> 以上のようにマップを使ってリンクページの更にページ内リンク先に飛ばそうとしても そのページに飛ぶだけで、飛ばしたい位置まで行きません。 <a name="3"><img src="images/bar_3.jpg"></a> でもダメです。 どうしてでしょうか？
- ベストアンサー
- HTML
- プルダウンメニューの表示
+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、 表示された後で閉じると、その+のgifが再表示されません。 何が足りなくてそうなってしまうのでしょうか？ また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。 よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>
- ベストアンサー
- HTML
- CSSで、リンクに触れると一部ボックスが消えてしまう
http://www.stylish-style.com/gallery/base-temp/2-center-head/index.html 上記のサイトのようなページを作りました。 このページでいうところのIDがrightの部分に、ボックスを入れてあります。 ヘッダーの部分にさらに <div id="headerBox"> <!-- 名前 始まり --> <span id="nameBox"> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr> <td class="nameTD"><img src="face.jpg" alt="" class="nameImg" /></td> <td class="nameTD"><font class="nameBoxText">●●<br /></font></td> </tr> </tbody> </table> </span> <!-- 名前 終わり --> <!-- メニュー --> <span id="mainMenu"> <ul id="menu"> <li id="toppage"><a href="top.html">ホーム</a></li> </ul> </span> <!-- メニュー 終わり--> </div> というボックスを下に入れたとき、既にヘッダーに入れてあった <a href="top.html"><img src="img/logo.gif" /></a> というリンク部分にマウスが触れたときだけ（まるでオンマウスで指定したかのように）、leftとrightの下部分がごっそり消えてしまいます。 リンクの指定は、外部からまとめて呼び出しているため、上記のリンクだけ別に指定はしていません。リンク画像に触れたときだけ、leftとrightの下一部だけ消えます。フッターは表示されていて、繰り上げて表示されます。 タグはすごく長いので、すべては表示できませんが、原因にお心あたりのあるかた、よろしくおねがいいたします。
- ベストアンサー
- HTML
お礼
すいません、ありがとうございました！