• ベストアンサー

画像をサイトで使うには?

よろしくお願いします。 【質問】どこかおかしいところはありますか? サイトに画像を載せて、リンクを挿入したいと思います。  ※掲載場所は、商品の詳細ページです。 <a href="リンク先"><img src="../../image/画像" width="幅" height="高さ" alt="マウスを当てた時に出る文章" />  ※img src="../../image/画像"   この部分が間違っているとは思いますが、   imageというフォルダに画像が入っています。

  • basuku
  • お礼率87% (214/245)

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

  • ベストアンサー
noname#235092
noname#235092
回答No.4

要は、「そのhtmlが入っているフォルダ」と「imageフォルダ」の階層の関係がどうなっているかということです。 (ヒント) 0.「そのhtmlファイル」が「imageフォルダ」と同じ階層にあるならさかのぼる必要はないので「../」はひとつもいらない。 1.「そのhtmlが入っているフォルダ」と「imageフォルダ」が同じ階層にあるならひとつさかのぼればよいので「../」は1個でよい。 2.「そのhtmlが入っているフォルダ」がさらに別のフォルダに入っていて、その「別のフォルダ」と「imageフォルダ」が同じ階層にあるならふたつさかのぼらなければならないので「../」は2個必要。 ・・・・・・・・・・・・・・・・・・・・・ あとはこれを参考に考えてみてください。 ※「imageフォルダ」の方は名称の付け方から判断して、たぶん複雑な構成にはなっていないようなので考えなくていいかと。

basuku
質問者

お礼

有難うございます。 回答遅れて申し訳ございません

その他の回答 (4)

noname#100277
noname#100277
回答No.5

画像ファイルを「相対パス」で参照させるなら「../../image/画像.拡張子」の記述方法で問題無いでしょう。 (ディレクトリの関係をちゃんと調べて下さいね。) 質問者が折角xhtmlでの記述で書いてるのでエラーの無い記述方法を心掛けて下さい。 <a href="ターゲットするパス" title="ターゲット先の説明"><img src="ファイルのパス" alt="代替テキスト" title="ファイルの説明" width="横幅" height="高さ" /></a> 画像LINKなら「title="ターゲット先の説明"」は省略しても構わないでしょう。 此の場合「 title="ファイルの説明"」に追加で記述する必要が出て来ます。 その反対でも大丈夫。 本来は「全て」が望ましいのですが。 マウスカーソルを重ねた場合に出るのは「title」ですから間違わない様に。

basuku
質問者

お礼

有難うございます。 回答遅れて申し訳ございません

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.3

altの使い方が誤り。 altは代替えテキストであってツールチップ用の属性じゃない。 じゃぁ何ていう属性がそうなのかって?それは調べようね。せっかく便利なインターネットが有るんだし http://www.google.com/search?lr=lang_ja&q=img%E3%82%BF%E3%82%B0%20%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97%20%E5%B1%9E%E6%80%A7 あとNo1の指摘は「xhtml」の場合は「/」が無いとだめだからそこは注意。 件のimageというフォルダがそのリンク記述している場所から見てどこにあるのかが問題になるね。 http://www.google.com/search?lr=lang_ja&q=%E7%9B%B8%E5%AF%BEURL

basuku
質問者

お礼

有難うございます。 回答遅れて申し訳ございません

noname#235092
noname#235092
回答No.2

「../」が2つあるので1つ取ってみたらどうなりますか?

basuku
質問者

お礼

有難うございます。 回答遅れて申し訳ございません

  • asora
  • ベストアンサー率37% (117/308)
回答No.1

../../image/画像の部分を絶対パス(httpから始まる画像のアドレス)に変えてみましょう。 あと、imgタグの最後に書いている/は必要ありません。

basuku
質問者

お礼

有難うございます。

関連するQ&A

  • 画像切り替え

    <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> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。

  • 【HTML】画像と画像の間に「_」が入ってしまう

    画像のように勝手に画像と画像の間「_(アンダーライン)」が入ってしまいます。どのようにすればこのアンダーラインを消せますか? ■HTML■ <div id="imglink"> <a href="hogehoge1"> <img src="hogehoge1" width="88" height="31" alt="okwave"> </a> <a href="hogehoge2"> <img src="hogehoge2" width="88" height="31" alt="okwave"> </a> <a href="hogehoge3"> <img src="hogehoge4" width="88" height="31" alt="okwave"> </a> </div>

    • ベストアンサー
    • HTML
  • 複数の画像を連動してロールオーバーさせたいのですが

    宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか? (3つの画像のリンク先は全て同じです) どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>

    • ベストアンサー
    • HTML
  • ウインドウを狭めてもレイアウトが崩れない方法

    ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を3列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>

    • ベストアンサー
    • HTML
  • 画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化

    画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化が現れるようにしたいのですが方法がわかりません。どなた様かご指導のほどよろしくお願いいたします。 今回画像を以下に掲載させて頂きました。よろしければ見てみてください。 http://desktop10.web.fc2.com/11.gif 上記を見て頂くと、HOMEの下に赤い線が入っています。マウスポインタを合わせたときに上記のようにしたいと考えております。よってマウスポインタをあわせないときは、赤い線が表示されないようにしたいと考えております。このような場合はどのような記述が必要なのでしょうか? 私はhtmlには以下のような記述をしました。 <a href="http://index.html"><img src="img/test.gif" alt="ボタン" width="115" height="48" /></a> どなた様か、ご指導のほどよろしくお願いします。

    • ベストアンサー
    • HTML
  • 1つの画像オンマウスで3つの画像を切り替えたい!

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか? 助けてください!

  • 画像のフェードインについて・・・。

    現在のホームページですが、サムネイル画像(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終了 -->

  • Macのxamppでの画像表示について

    Macのxamppでweb作成をしています。 その際に画像が表示されず困っています。 <img src="image/1.png" width="217" height="70" alt=""/> というパス指定で画像を表示させようとしているのですが、 ブラウザ上で表示することができません。 ※index.phpと同じフォルダ内にimageというフォルダを作り、そこに画像を入れています。 一方で、 <img src="image/logo.png" width="200px" height="80px" alt=""> と指定した、logo.pngに関しては表示することができています。 質問内容に過不足等あるかと思いますが、教えていただければ幸いです。

  • 画像を縦に並べたら隙間ができることについて

    画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。

    • ベストアンサー
    • HTML