画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい

質問

よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。

通常ならその画像をcssで背景画像に出来るのですが、
画像に順番ずつじんわり表示させるjavascriptの指示をしており、
その画像をcssで背景画像とするわけにいかないのです。

現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、
実際にブラウザで確認すると、何も表示されていないように見えます。

下記がソースです。
よろしくお願いします。
------------------------------------------------------------
【HTML】
<div id="containerTop">
<div id="titleTop">
<h1><a href="index.html">タイトル</a></h1>
<h2>サイト説明</h2>
<ul>
<li id="profile"><a href="#">プロフィール</a></li>
<li id="photo"><a href="#">写真</a></li>
<li id="blog"><a href="#">ブログ</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div id="topbgphoto" class="pics">
<img src="img/top/001.jpg" />
<img src="img/top/002.jpg" />
<img src="img/top/003.jpg" />
</div>
</div>

------------------------------------------------------------

【CSS】

/*
container [
----------------------------------------------------------- */
#containerTop {
width:1024px;
position:relative;
margin:106px auto auto 0;
}
/*
titleTop [
----------------------------------------------------------- */
#titleTop {
width:661px;
position: absolute;
top: 241px;
left: 0px;
height: 138px;
}
#titleTop h1 a{
display:block;
text-decoration:none;
text-indent:-7777px;
width:246px;
height:24px;
position: absolute;
top: 25px;
left: 370px;
padding:0;
font-size:12px;
}
#titleTop h2{
display:block;
text-decoration:none;
text-indent:-7777px;
width:310px;
height:16px;
position: absolute;
top: 70px;
left: 304px;
padding:0;
font-size:12px;
}

/*
menu [
----------------------------------------------------------- */
#titleTop ul {
position: absolute;
top: 87px;
left: 0x;
padding:0px;
list-style:none;
}
#titleTop li {
}
#titleTop li a {
display:block;
text-decoration:none;
text-indent:-7777px;
height:17px;
width:59px;
}
#titleTop li a:hover {
background-image: url(../img/top/menu_ov.jpg);
}
#titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;}
#titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;}
#titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;}
#titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;}

/*
ゆっくり表示させる背景画像 [
----------------------------------------------------------- */
.pics {
width:1024px;
height:587px;
padding: 0;
margin: 0;
}

回答No.4

kuzumiHK · ベストアンサー

:hoverに設定されている画像のパスは正しいでしょうか。
こちらで確認するかぎり、cssを変更してもリンク先に飛べますし、
ロールオーバーも問題なく動きました。

お礼

ありがとうございました。

まだ自分ではなぜか動作しないのですが、またやってみます！

回答No.3

kuzumiHK

jsを動かしてみてようやく理解できました。
.picsをz-indexを使って一番下の階層にします。

.pics{
position: absolute;
z-index:0;
}
#titleTop{
z-index:1;
}

を追加でいかがでしょうか。

お礼

/*
container [
----------------------------------------------------------- */
#containerTop {
width:1024px;
margin:106px auto auto 0;
height:587px;
}

/*
titleTop [
----------------------------------------------------------- */
#titleTop {
width:661px;
height:138px;
margin:241px auto 226px 0;
position:absolute;
top:106px;
left:0;
z-index: 1;
}
#titleTop h1 a{
display:block;
text-decoration:none;
width:246px;
height:24px;
margin:25px 0 0 370px;
padding:0;
font-size:12px;
}

#titleTop h2{
display:block;
text-decoration:none;
width:310px;
height:16px;
margin:21px 0 0 304px;
padding:0;
font-size:12px;
}
#titleTop h1 a span,
#titleTop h2 span {
display:none;
}

/*
menu [
----------------------------------------------------------- */
#titleTop ul {
margin:17px 0 0 0;
}
#titleTop li {
list-style:none;
float:left;
}
#titleTop li a span{
display:none;
}
#titleTop li a {
display:block;
text-decoration:none;
height:17px;
width:59px;
border:#FF3399;
}
#titleTop li a:hover {
background-image: url(../img/top/menu_ov.jpg);
}
#titleTop li#profile a{ background-position: 0 0; margin:0 0 0 343px;}
#titleTop li#photo a{ background-position: -70px; margin:0 0 0 11px;}
#titleTop li#blog a{ background-position: -140px 0; margin:0 0 0 11px;}
#titleTop li#contact a{ background-position: -210px 0; margin:0 0 0 11px;}

/*
ゆっくり表示させる背景画像 [
----------------------------------------------------------- */
.pics {
width:1024px;
height:587px;
padding: 0;
margin: 0;
position:absolute;
z-index: 0;
}
.pics img {
width:1024px;
height:587px;
top: 0;
left: 0;

}

補足

ありがとうございます。
結果は、うまくいきませんでしたが、ドラッグでグーっと画面を選択すると、h1やh2の位置やリンクボックスの位置は存在するようになりました。

しかし、ご指導いただいたもの以外にCSSをいじりました。
というのも、私のほかのCSSが悪いのかと、いったんjs関連をすべて削除し、正しく表示するのか確認してみたら、マウスオーバー等きかなくなっていたりしていたので、改めてノーマルで表示出来るようにしました。
その上に、教えていただいたのをいれてみました。
その結果が上記です。

修正したCSS含め、また記載いたします。
また何かご存知な方法がありましたら、よろしくお願いします。

回答No.2

kuzumiHK

No.1です。
表記されているソースのどのidに、
背景画像が反映されるのかがよくわからないため、
あくまで予測ですが、
#containerTopに背景画像が表示される場合、
positionが設定されているようですので、
#containerTop{
z-index:0;
}
#titleTop ul {
z-index:1;
}
#titleTop li {
z-index:2;
}
を追加しても無理でしょうか。

お礼

ありがとうございます。
やってみましたが、だめでした。

CSSはお伝えしているのがほとんどで、あとはbodyやリンク色などです。
背景画像は指定していません。
背景画像の変わりに、imgを使っています。

改めて説明させてください。

http://malsup.com/jquery/cycle/
現在、上記URLで紹介されているjsのfadeというのを使って大きな写真画像を表示させています。（そのHTMLは<div id="topbgphoto" ～　/div>です）
この大きな写真画像にはタイトルやメニューも描かれていて、
そこをクリックしたら各ページへ飛ぶようにしたいです。
その為に、CSSのposition: absolute;を使っているのですが、jsが圧勝でして、写真画像がフェードアウトした瞬間の一瞬に、CSSが見えます（borderをやってみたので見えました。枠が見えるだけでリンク等は有効でありませんでした）。
しかし、また写真画像がはっきり表示し始めると、CSSはその影にかくれてしまいます。

FLashなら簡単なものですが、jsとCSSで実現させたいです。
また何か良い方法がございましたら、よろしくお願いいたします。

回答No.1

kuzumiHK

#titleTop li aに、border:1px solid #f00;を入れてみてください。
それで現在、どの位置にliがあるのかが確認できます。
そのうえでpositionの数値を調整してみてはいかがでしょうか。

また、下記のように画像とテキストをaタグ内に入れてしまい、
テキストだけをdisplay:noneするのはいかがでしょうか。

#titleTop li a span{
display:none;
}

<ul>
<li id="profile"><a href="#"><img src="img/top/001.jpg" /><span>プロフィール</span></a></li>
<li id="photo"><a href="#"><img src="img/top/002.jpg" /><span>写真</span></a></li>
<li id="blog"><a href="#"><img src="img/top/003.jpg" /><span>ブログ</span></a></li>
<li id="contact"><a href="#"><img src="img/top/003.jpg" /><span>お問い合わせ</span></a></li>
</ul>

お礼

ありがとうございます。

＞#titleTop li aに、border:1px solid #f00;を入れてみてください

これで確認できましたが、正しい位置に存在するようなのですが、
画像が表示されるとそっちが勝ってしまって、liが消えてしまいます。

<span>のもやってみましたが、同じ結果でした。

jqueryの画像が表示されるものを使っているのですが、CSSを無視して動いてしまうものなのでしょうか。。。

また何かありましたら、宜しくお願い致します。