オンマウスで画像と背景色を同時に変化させるには?



0   名前: 進也 : 2007/03/20(火) 09:15  ID:ErURNxz. sub-99
a〜eのリンク箇所にジャンプするボタン画像を作り枠内に入れてあります。
そのボタン画像は色違い2種類を作り、オンマウスで変化をつけています。

外部cssで
.waku1{width : 500px;
text-align :left;
border-style : outset;
border-color : #66cc33;
background-color :#FFFFFF;
padding: 2px;
margin: 0px; }

html内で
<P class="waku1">
<A href="00.html#a"><IMG src="a.gif" onmouseover=this.src="aa.gif" onmouseout=this.src="a.gif"></A>
<A href="00.html#b"><IMG src="b.gif" onmouseover=this.src="bb.gif" onmouseout=this.src="b.gif"></A>
<A href="00.html#c"><IMG src="c.gif" onmouseover=this.src="cc.gif" onmouseout=this.src="c.gif"></A>
<A href="00.html#d"><IMG src="d.gif" onmouseover=this.src="dd.gif" onmouseout=this.src="d.gif"></A>
<A href="00.html#e"><IMG src="e.gif" onmouseover=this.src="ee.gif" onmouseout=this.src="e.gif"></A>
</P>

この上でさらに、枠内にカーソルが触れた時に枠内背景(background-color)色を
白#FFFFFF → 黄#FFFF00 のように変化させたいのですが・・・

http://www.tagindex.com/kakolog/q1bbs/1201/1362.html
等を参照し、色々やってみましたが枠が崩れたり、1画像=1枠になったりして
どうも上手く行きません。
因みにtableタグは別項でガチガチに記述を決めてしまっているので使えません。
どのようにしたら良いでしょうか?宜しくお願い致しますm(_ _)m

1   名前: 匿名 : 2007/03/20(火) 09:15  ID:zVbAQGuv sub-kJ
.waku1:hover { background-color: #ff0; }

IE6 以下に対応しなければならない不幸な事態なら、p.waku1 に (on)mouseover を付けてスクリプト制御せざるをえない。

# class 名の付け方として、waku1 なんて見た目だけの名前は避けよう。

2   名前: 進也 : 2007/03/20(火) 09:15  ID:ErURNxz. sub-99
ありがとうございました。
ですが、そのIE6以下に対応の不幸な事態なのです(汗)

このスレにあまり返答がないところを見ると
これはやはり不必要or面倒なアクションでしょうか?

p.waku1 に (on)mouseover を付けてスクリプト制御...というのが
具体的にどうやったらいいのかご教授頂けたら幸いです。

あるいは、そこまで凝る必要性はないでしょうか?
まだHP作りの駆け出しなので、なんでもてんこもりに
アクションをやってみたいと欲を出しすぎかしら...

3   名前: カヅサツ ◆ThCi95HEzw : 2007/03/20(火) 09:15  [URL]  ID:O5hEMlpW sub-r2
> p.waku1 に (on)mouseover を付けてスクリプト制御...というのが
> 具体的にどうやったらいいのかご教授頂けたら幸いです。

こちらはスタイルシート質問板ですので、スクリプト系のご相談は総合質問板かJavaScript質問板が宜しいと思います。

> あるいは、そこまで凝る必要性はないでしょうか?

個人的には、JavaScriptの練習という意味では良い素材であり、チャレンジしておくのも悪くないかとは思います。

4   名前: 進也 : 2007/03/20(火) 09:15  ID:ErURNxz. sub-99
ありがとうございました。
まぁ、ちょっと背伸びし過ぎましたかね^^;

同一質問を他に貼るのはマルチポスト?と躊躇してましたが
投稿者による削除機能がなさそうので、とりあえずココでの
質問を終えますm(__)m

良い素材とのお言葉を頂いて、少し元気が出ました^^
まだまだやりたいことが沢山ありますので、またこちらを
利用させて頂きたいと思います。
                 
                           進也 拝

5   名前: カヅサツ ◆ThCi95HEzw : 2007/03/20(火) 09:15  [URL]  ID:O5hEMlpW sub-r2
> 同一質問を他に貼るのはマルチポスト?と躊躇してましたが

http://www.tagindex.com/bbs/note.html#h203
ちゃんと配慮すれば何の問題もありません。

一覧へ戻る