背景画像上に複数枚の画像配置について

質問

お世話になります。
まだまだcss勉強中なので教えて頂きたいことがございます。

１枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。
しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず
余計な画像も出てきてしまいます。
おそらく間違ったcssを記述していると思うので
ご指摘いただけると助かります。

--------------------------------------------------------------
【html】
<div class="demo">
<div class="demo1"><a href="#"></a></div>
<div class="demo2"><a href="#"></a></div>
<div class="demo3"><a href="#"></a></div>
<div class="demo4"><a href="#"></a></div>
<div class="demo5"><a href="#"></a></div>
</div>

【css】
.demo {
background: url("../img/imgbg.jpg") no-repeat;
display: block;
width: 800px;
height: 1108px;
}

.demo1 a {
width: 800px;
height: 1108px;
background: url("../img/imgbg.jpg") no-repeat;
display: block;
position:absolute;
}

.demo1 a:hover {
background-image: url("../img/img1.png");
position:relative;
top:475px;
left:635px;
display:block;
}

.demo2 a {
width: 800px;
height: 1108px;
background: url("../img/imgbg.jpg") no-repeat;
display: block;
position:absolute;
/*text-indent: -9999px;*/
}

.demo2 a:hover {
background-image: url("../img/img2.png");
position:relative;
top:469px;
left:480px;
display:block;
}

.demo3 a {
width: 800px;
height: 1108px;
background: url("../img/imgbg.jpg") no-repeat;
display: block;
position:absolute;
}

.demo3 a:hover {
background-image: url("../img/img3.png");
position:relative;
top:477px;
left:322px;
display:block;
}

.demo4 a {
width: 800px;
height: 1108px;
background: url("../img/imgbg.jpg") no-repeat;
display: block;
position:absolute;
/*text-indent: -9999px;*/
}

.demo4 a:hover {
background-image: url("../img/im4.png");
position:relative;
top:477px;
left:167px;
display:block;
}

.demo5 a {
width: 800px;
height: 1108px;
background: url("../img/imgbg.jpg") no-repeat;
display: block;
position:absolute;
/*text-indent: -9999px;*/
}

.demo5 a:hover {
background-image: url("../img/img5.png");
position:relative;
top:477px;
left:10px;
display:block;
}

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

a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い
消してみたら画像が表示されなくなってしまったので
そのまま記載しています。

上記の記述のままですと、マウスオーバーが正しく反応しないですし
マウスオーバー時に別箇所に背景画像が表示されてしまいます。

やりたいことは画像にしましたのでご確認ください
黒○は背景画像内にある形で、その上に同じ形の赤○を
マウスオーバー時の画像として表示したいです。
（図が下手ですみません）

わかる方、ご教示をお願いします。

回答No.3

noname#206842

クリカブルマップにリンクをかけたいのかな？・・・

回答No.2

DrFell

よくわからないのですが、図だけ見ると以下の感じでしょうか？

html----------------------------
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>

css------------------------------
li{
float:left;
list-style:none;
}
li+li{
margin-left:20px;
}
li a{
display:block;
width:100px;
height:100px;
border-radius: 50px;
line-height:100px;
border:1px solid #999999;
height:100px;
display:block;
text-align:center;
}
li a:hover{
background:#f00;
border-color:#fff;;
}

画像でとのことなので、backgroundやborderでの指定をbackground-image関係に変更すれば、できると思います。

回答No.1

tkmojo

正直パッとコードを見ただけでは何をやろうとしてるのか分かりません。
.demoが大枠で.demo1～5が画像だと思うんですが、なぜ.demo1～5を背景画像でやろうとしているんですか？
普通にimgで画像を配置してロールオーバーをjsで実装したほうがよっぽど楽だと思うんですけど。

.demo1～5のaタグの縦横のサイズが.demoと同じなのも理由がわかりません。
これを見るだけでは「demo3を押したい」とかいう行動は不可能ですよね。
.demoの上に同じサイズのリンクが5つ重なってる状態です。

:hoverの際にだけ急にpositionがrelativeになってleftとtopの指定が出てくるのも謎ですね。
ロールオーバーしたとたんにaタグが逃げて行っちゃうんだから、変な挙動になって当然かと。

個人的には背景ではなくimgでの画像配置をお勧めしますが、
このままどうしても背景と空のリンクでやるなら、下記の様にすればいいと思います。

.demo1～.demo5のaタグのwidthとheightはそれぞれの画像のサイズに設定し、hoverする前からleftとtopを設定
hover時には背景画像を置き換えるだけ。position:relative;やleft、topの指定はしない
hover時に画像の位置をずらしたいなら、最初にwidthとheightをずれた分を含めて大きく計算しておいて、background-positionで位置をずらす