スタイルシートでのマウスオーバー時の画像について

質問

久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって
色々見てみたんですが、解決しなかったので教えて下さい。

indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssという
カスケードスタイルシートを作りました。
"mouse_over.css"の内容は
a:link.link1{
width:100px;
height:25px;
background-image:url(./pic/home.png);
}
a:hover.link1{
width:100px;
height:25px;
background-image:url(./pic/home_over.png);
}

です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に
<link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、
body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。

上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで
画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。

何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、
困っております。

どうか智恵をお貸し下さい。宜しくお願いします。

回答No.2

sech1152 · ベストアンサー

No.1です。

HTMLファイルがあるディレクトリの中に、designとpicがあるということでいいですか？
──htmlファイル
├─design─CSSファイル
└─pic─画像ファイル

それなら、
background-image:url(./pic/～
とあるところを、
background-image:url(../pic/～
にすれば、いいと思います。

お礼

有難う御座います。書いて下さった方法で、表示され、すっきりしました。
有難う御座いました。

回答No.1

sech1152

CSSでURLを相対パスで指定するときは、HTMLファイルからではなく、CSSファイルからの相対パスになります。
ディレクトリの位置は大丈夫ですか？

http://www.htmq.com/csskihon/012.shtml

補足

自分が、質問させてもらった際に書いたのが、たぶん、
この、htmlと、cssに関する部分の、全文だと思うんですが、
具体的に、どこどの様に訂正するのか、教えて下さい。