CSSで2つのリンクで画像ロールオーバー

CSSで画像ロールオーバーのような事を実現しようとしています。

【画像】　　テキストリンク1、テキストリンク2
【画像2】　　テキストリンク3、テキストリンク4　以下同様に

テキストリンク1、テキストリンク2のどちらにマウスオンした時も【画像】を変化するようにしたいです。リンク1とリンク2のリンクURLは異なるものですが、画像の変化は同一です。
（これと同様な画像とリンクのセットを、ページ内にいくつも作ることを考えています。）

はじめは、以下のようにテキストリンク1にマウスオーバー→1枚の画像を左右に移動させて画像を変化させましたが、リンクが2つになるとうまく動作しなくなりました。
a タグではなく、画像にclassやidをふらないといけないのでは？と考え、いろいろ試してみましたが、うまく動作しません。

何か良い方法はありませんでしょうか？この方法では実現しないでしょうか？


＜CSS部分＞
a .gazoumenu {
background: url(gazou.gif) left top no-repeat;
display: block;
width: 20px;
height: 20px;
padding-right: 25px
}
a .gazoumenu :hover {
background-position: right top;
}


＜HTML＞
<p><a href="xxx.html" class="gazoumenu">テキストリンク1</a></p>

よろしくお願い致します。

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/12/26 20:17

　ちょっと変わったナビゲーションリンクですが、これに限らず、デザインを考えずにHTMLをきちんと書くことが重要です。

(ここでみんな失敗する。)
　明らかに数種類のリンクグループがあるのですから、文書構造上も２種類あるはずです。
★下記サンプルは画像が62px×50pxの手持ちのものを使いました。
★タブは全角スペースに置換してあります。

[HTML]デザインはまったく考えていません。文書構造だけ記述してある。
　<div class="nav">
　　<ul>
　　　<li class="a">
　　　　<ol>
　　　　　<li><a href="">リンクA-1</a></li>
　　　　　<li><a href="">リンクA-2</a></li>
　　　　</ol>
　　　</li>
　　　<li class="b">
　　　　<ol>
　　　　　<li><a href="">リンクB-1</a></li>
　　　　　<li><a href="">リンクB-2</a></li>
　　　　　<li><a href="">リンクB-3</a></li>
　　　　</ol>
　　　</li>
　　　<li class="c">
　　　　<ol>
　　　　　<li><a href="">リンクC-1</a></li>
　　　　　<li><a href="">リンクC-2</a></li>
　　　　　<li><a href="">リンクC-3</a></li>
　　　　　<li><a href="">リンクC-4</a></li>
　　　　</ol>
　　　</li>
　　</ul>
　</div>

[CSS]HTMLが文書構造に従っていたら、スタイルシートも簡単になります。

div.nav ul,div.nav ul li,div.nav ul ol{display:block;list-style:none;margin:0;padding:0;height:51px;}
div.nav ul li ol li{float:left;clear:none;}
div.nav ul li{clear:left;position:relative;padding-left:65px;}
div.nav ul li ol li a{display:block;margin-top:10px;}
div.nav ul li ol li{position:static;padding:0;margin-left:10px;}
div.nav ul li ol li:before{position:absolute;top:0;left:0;}
div.nav ul li.a ol li:before{content:url(image/a-1.gif);z-index:1}
div.nav ul li.a ol li+li:hover:before{content:url(image/a-2.gif);}
div.nav ul li.b ol li:before{content:url(image/b-1.gif);}
div.nav ul li.b ol li+li:hover:before{content:url(image/b-2.gif);z-index:1}
div.nav ul li.b ol li+li+li:hover:before{content:url(image/b-3.gif);}
div.nav ul li.c ol li:before{content:url(image/c-1.gif);}
div.nav ul li.c ol li+li:hover:before{content:url(image/c-2.gif);z-index:1}
div.nav ul li.c ol li+li+li:hover:before{content:url(image/c-3.gif);}
div.nav ul li.c ol li+li+li+li:hover:before{content:url(image/c-4.gif);}

:beforeという擬似要素を使ってます。親要素のliに対して絶対配置しています。
★後方互換を考えなければ、子供セレクタ>を使ってもう少し簡単になります。

この回答へのお礼

大変時間がかかり、いろいろ試行錯誤して、みなさまのおかげでなんとか解決しました！
みなさまにベストをつけたいのですが、おひとりしか選べないようですので
何度も書き込んでくださった方へ。

最終的には<span>を使って下の感じで解決できました。
HTMLは日々勉強ですね。。
おっしゃるとおりIE6はもう使わないようにしていきます。
ありがとうございました！

HTML
<ul>
<li><p id="linkA"><a href="">リンクA-1<span>リンクA-1</span></a></p></li><a href="">リンクA-2<span>リンクA-2</span></a></p></li>
</ul>

お礼日時：2012/11/26 18:24

No.6 回答者： ORUKA1951 回答日時： 2011/12/27 00:16

IE6では未確認です。

　他にも色々書き方があると思います。空の　spanをつかったり、IE6用も書けるかも。
　古いIEは、Element:hoverはダメでa:hoverのみ有効だったりするので、あえてa内に<img>いれてます。


　<div class="nav">
　　<ul>
　　　<li class="a">
　　　　<ol>
　　　　　<li class="pre"><a href=""><img src="image/a-1.gif" width="60" height="50" alt="">リンクA-1</a></li>
　　　　　<li><a href=""><img src="image/a-2.gif" width="60" height="50" alt="">リンクA-2</a></li>
　　　　</ol>
　　　</li>
　　　<li class="b">
　　　　<ol>
　　　　　<li class="pre"><a href=""><img src="image/b-1.gif" width="60" height="50" alt="">リンクB-1</a></li>
　　　　　<li><a href=""><img src="image/b-2.gif" width="60" height="50" alt="">リンクB-2</a></li>
　　　　　<li><a href=""><img src="image/b-3.gif" width="60" height="50" alt="">リンクB-3</a></li>
　　　　</ol>
　　　</li>
　　　<li class="c">
　　　　<ol>
　　　　　<li class="pre"><a href=""><img src="image/c-1.gif" width="60" height="50" alt="">リンクC-1</a></li>
　　　　　<li><a href=""><img src="image/c-2.gif" width="60" height="50" alt="">リンクC-2</a></li>
　　　　　<li><a href=""><img src="image/c-3.gif" width="60" height="50" alt="">リンクC-3</a></li>
　　　　　<li><a href=""><img src="image/c-4.gif" width="60" height="50" alt="">リンクC-4</a></li>
　　　　</ol>
　　　</li>
　　</ul>
　</div>

[CSS]
div.nav ul li{clear:left;position:relative;height:54px;list-style:none;padding-left:65px;line-height:50px;}
div.nav ul li ol li{list-style:none;display:block;float:left;clear:none;position:static;padding-left:0;margin-right:10px;}
div.nav ul li ol li a img{position:absolute;left:0;top:0;border:none;display:none;/* またはvisibility:hidden;*/}
div.nav ul li ol li.pre a img{position:absolute;left:0;top:0;display:block;/* またはvisibility:visible;*/}
div.nav ul li ol li a:hover img{display:block;/* またはvisibility:visible;*/}

この回答へのお礼

ありがとうございます！
これから、教えていただいたものをもとにがんばってみます。
手も遅く、調べながらのため、きっと時間がかかってしまいますので、
まずはお礼を書かせてください。

お礼日時：2011/12/27 19:08

No.5 回答者： ORUKA1951 回答日時： 2011/12/26 20:26

IE7以前に有効な方法は画像自体を書かなけりゃならないので、ちょっと保留。

時間があるとき考えて見ます。
　HTMLをデザインのために書かなけりゃならないので「しんどい」
なお、IE6はそろそろ除外しましょう。マイクロソフト自身も抹殺のためのキャンペーンをしている。協力しましょう。
マイクロソフト、IE6撲滅に向けた一大キャンペーン始める | スラッシュドット・ジャパン Submission ( http://slashdot.jp/submission/41710/%E3%83%9E%E3 … )

No.3 回答者： tracer 回答日時： 2011/12/24 11:30

やろうとしていることも、やり方も問題ありませんよ。

また、すべてのaタグに対して同じ挙動を与えたいのであれば、IDやClassを付与する必要もありません。
aタグがひとつしかない時に正常に動いているのであれば、おそらく記述ミスや基本的な文法に誤りがあるのだと思います。ひとまず提示されたサンプルに問題はないように見受けられるので、問題があるとしたら、その記述自体の部分的なものではなく、HTMLやCSS全体に関与する部分じゃないでしょうかね。

この回答へのお礼

ありがとうございます！
1箇所だけでしたら動くのでもう少し、いろいろ調べたりこちらでうかがったりしてがんばってみます。

お礼日時：2011/12/26 18:08

No.2 回答者： ORUKA1951 回答日時： 2011/12/22 23:42

　意味がわからないのですが、一つ一つのリンクについて背景画像が変化すると言うことですか？

「テキストリンク1、テキストリンク2のどちらにマウスオンした時も【画像】を変化するようにしたい」
　この文章からは、別のところにある画像で
「【画像】　　テキストリンク1、テキストリンク2
【画像2】　　テキストリンク3、テキストリンク4　以下同様に」
　からは、ふたつずつセットで、それぞれ画像が変化するとも読める

【画像】がA画像　リンク1:hover
↓
【画像】がB画像　リンク2:hover

【画像2】がA画像　リンク1:hover
↓
【画像2】がB画像　リンク2:hover

　そもそものHTML・・・デザインは一切考えずに、きちんと文書構造に従ったHTMLを示してください。
　そして、デザイン・挙動をわかりやすいように説明してください。
例)
[HTML]
<ul>
　<li><a href="index.html">トップ</a></li>
　<li><a href="page1.html">１ページ</a></li>
　<li><a href="page2.html">２ページ</a></li>
</ul>
とか、
<p>
　くわしくは<a href="./newProduct/">新製品のページ</a>に掲載してあります。
</p>
とか・・
　そのうえで
・リンクにフォーカスが当たると、そのブロックの右側に置かれたスペースに、画像を貼り付ける。
・リンクのある項目にフォーカスが当たると、目印の画像が変化する
・リンクの背景を変化させる。普段はA画像を背景、フォーカスやマウスオーバーでB画像、アクティブになったときC画像、訪問済みはD画像

とか・・

この回答への補足

ありがとうございます！
言葉が足りませんでした。すみません。
こういった感じでうまく伝えられるといいのですが。
ご指摘ありがとうございました。

デザインは以下のように並んでいます-----------
【画像1(1-a表示)】　テキストリンクあ テキストリンクい
【画像2(2-a表示)】　テキストリンクう テキストリンクえ
【画像3(3-a表示)】　テキストリンクお テキストリンクか
---------------------------------------------

＜動作＞
「テキストリンクあ」に
マウスオン→【画像1】が［画像1-a] → [画像1-b] に変化、
クリック→あああ.htmlへジャンプ。
「テキストリンクい」にマウスオン→［画像1-a] → [画像1-b] に変化、
クリック→いいい.htmlへジャンプ。
同じように、
「テキストリンクう」にマウスオン→【画像2】が [画像2-a] → [画像2-b] に変化、
クリック→ううう.htmlへジャンプ。
「テキストリンクえ」にマウスオン→【画像2】が、[画像2-a] →[画像2-b] に変化、
クリック→えええ.htmlへジャンプ。

このように、マウスオンによってある箇所の画像が変化し、マウスアウトで元の画像に戻る。クリックするとジャンプするリンクを、いくつか作りたいと考えています。
【画像1】の変化は、1箇所の画像枠に対して1-a→1-bの一種類変化のみですが、その動作のきっかけとなる、マウスオンのリンクは、2箇所になります。
同様の動きをする、【画像2】枠に対し画像2-aから2-bへの変化・リンク2箇所、【画像3】枠に対し～、といように複数作ろうとしています。

はじめ、1-aと1-bにあたる2つの画像をくっ付けた状態1-abで作成し、左右に移動させる形で、画像の変化がでるように作りはじめました。
画像一箇所に対し「テキストリンクあ」のみでであれば、動作したのですが、「リンクい」を追加、または複数のセットになると、画像が2箇所(よく考えると当然なのかもしれません)表示されたり、動かなくなりました。

＜CSS部分＞
a .gazoumenu {
background: url(gazou1-ab.gif) left top no-repeat;
display: block;
width: 20px;
height: 20px;
padding-right: 25px
}
a .gazoumenu :hover {
background-position: right top;
}

a .gazoumenu2 {
background: url(gazou2-ab.gif) left top no-repeat;
display: block;
width: 20px;
height: 20px;
padding-right: 25px
}
a .gazoumenu2 :hover {
background-position: right top;
}

同じようにgazoumenu3を作成。

＜HTML＞
<div class="menu">
<ul><li>
<p><a href="あああ.html" class="gazoumenu">テキストリンクあ</a>　＜＜マウスオンで画像1-bに変化
<a href=いいい.html" class="gazoumenu">テキストリンクい</a></p>　＜＜マウスオンで画像1-bに変化
</li>
<li>
<p><a href="ううう.html" class="gazoumenu2">テキストリンクう</a>　＜＜マウスオンで画像2-bに変化
<a href="えええ.html" class="gazoumenu2">テキストリンクえ</a></p>　＜＜マウスオンで画像2-bに変化
</li>
<li>
<p><a href="おおお.html" class="gazoumenu3">テキストリンクお</a>　＜＜マウスオンで画像3-bに変化
<a href="かかか.html" class="gazoumenu3">テキストリンクか</a></p>　＜＜マウスオンで画像3-bに変化
</li>
</ul>
</div>

調べていて、javascriptのリモートマウスオーバーというものに似た動きをすると思ったのですが、別の場所の画像を変化させるのは動的なものなのでしょうか。cssでは難しいでしょうか。。

補足日時：2011/12/26 18:25

No.1 回答者： noname#158634 回答日時： 2011/12/22 21:30

そういうのは一般的にJavascriptでやる。

「そういうの」っていうのはロールオーバー自体ではなく
＞テキストリンク1、テキストリンク2のどちらにマウスオンした時も【画像】を変化するように
のこと。

この回答へのお礼

ありがとうございます！
javascriptではなんとか実現したのですが(IE6でうまく動かなかったため、また調べ途中ですが）、そちらの方がシンプルなのでしょうか。

お礼日時：2011/12/26 18:26