cssとjavascriptを使って画像の一部をロールオーバー

以下の条件でロールオーバーをさせることが可能かどうか、また可能な場合はどのようにしてやるのか教えていただきたいです。

(1)1枚のgif画像がある。画像内にいくつか文字があり、文字の上にカーソルが上がった時に文字の色を変えたい。

(2)文字がすべてロールオーバーしていない元画像と、文字がすべてロールオーバーした画像の2枚を用意。

(3)CSSとjavascriptを駆使して作りたい。

元画像を背景に設定し、その上にロールオーバー後の画像を配置し、隠す。→文字の上にカーソルが来たら、隠していたロールオーバー後の画像の一部をその同じ場所に表示させる
というような考え方でやってみたのですが、どうもうまくいきませんでした。Flashでやった方が簡単なのですが、Flashは使わずに作るということになっているので困っています。

何卒、よろしくお願いいたします。

No.1 ベストアンサー 回答者： aqucent 回答日時： 2006/08/07 08:05

CSSとJavaScript、両方使うのが前提ですか？

CSSだけでも実現できるので、用途に合わせて使い分けた方がよいかもしれません。

参考URL：http://www.stylish-style.com/csstec/csstec-top.h … http://java.misty.ne.jp/rollover.html

この回答への補足

すいませんが、http://www.stylish-style.com/csstec/csstec-top.h …
のどこに説明が書いてあるのでしょうか。単純なロールオーバーの説明しか見つけられませんでしたが・・・。教えていただければ幸いです。

補足日時：2006/08/08 11:01

No.2 回答者： NYOI 回答日時： 2006/08/07 10:16

"画像の文字部分にカーソルが乗った場合だけ"ロールオーバさせるなら、No.1さんの回答＋Mapを使うといいと思います。

ex)
a.gif/文字がすべてロールオーバーしていない元画像
b.gif/文字がすべてロールオーバーした画像
として、
【javascript】
<script language="JavaScript">
function RollOver (name,val) {
document.all.item(name).src = val;
}
</script>

【html】
<map name="map">
<area noref shape="rect" coords="0,0,50,50" alt="test" onmouseover="RollOver('img1', 'b.gif');"
onmouseout="RollOver('img1', 'a.gif');">
</map>
<img src="a.gif" name="img1" usemap="#map" border="0">

この例ですと、画像の左上からサイズ50*50の四角形のエリアにカーソルが載った場合のみ画像が指し代わります。
画像の文字の位置にあわせて適当に変更してください。

またnorefにしてリンクしていない状態にしていますが、そこをhref="○○.html"にすれば、リンクにすることも可能です。

この回答へのお礼

mapもjavascriptも使わずにできました。ありがとうございました。

お礼日時：2006/08/09 01:31