GIFイメージのアイコンの背景色を変える

質問

Dreamweaverで初めてサイトを作っています。初心者です。
あるサイトで見たのですが、テキストのメニューの左側に三角のアイコンがあってテキストのメニューにカーソルを載せたりクリックするとアイコンの色が変わりました。
スワップイメージでできているのかと思いましたが、アイコンを持ち帰って見てみると三角の部分がくりぬかれて透明になっていました。
なのでアイコン自体のイメージが変わるのではなくて、背景色が変わっているようです。
これはどのようにして作ってあるのでしょうか?
そしてこのようにして作ってあるのは、軽くするため、とかなにか意味があるのでしょうか。
わかり難い説明で申し訳ありませんがよろしくお願いします。

回答No.1

dezimac · ベストアンサー

CSSで実現しています。
利点と言えば、複数の画像を用意したり、長いJavascriptを書く必要がないとかですね。
欠点は、古いブラウザでは動かない（色変わらないだけ）ことですね。

↓に具体的な説明載っているので参考にして下さい。
ページ作成実践講座［６］　お手軽ロールオーバーを作ろう！ - ［ホームページ作成］All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20020114A/

参考URL：

http://allabout.co.jp/internet/hpcreate/closeup/CU20020114A/

お礼

回答ありがとうございます。
大変参考になりました。是非活用したいと思います。
もうすこし疑問が残るのですが、テキストのリンク文字にカーソルを乗せると、横にあるイメージが変わるのはどう作ってあるのでしょうか？

回答No.2

三郷北 M君（@mkun55555）

＞テキストのリンク文字にカーソルを乗せると、横にあるイメージが変わるのはどう作ってあるのでしょうか？

■CSSファイルを使う方法
そのサイトのソースファイルを良く見てください。
<a ・・・>リンク文字<img　・・・></a>
これだと、リンク文字の背景色も変わってしまうでしょう。

■JavaScriptを使う方法
●CSSファイルの　a:hover {background:#ｘｘｘｘｘｘ;}は削除しておいて、HTMLファイルを以下のようにすれば、
リンク文字の背景色を変えずに、画像だけ変わります。

●<a href="リンク先アドレス">
<img name="aaa" src="元画像ファイル名" alt="ｘｘｘ" onmouseOver="this.src='変更後画像ファイル名'" onmouseOut="this.src='元画像ファイル名'" />
</a>
★name="aaa"で画像に名前をつけておきます。
★thisの所はaaaでもかまいません。

●<a href="リンク先アドレス" onmouseOver="aaa.src='変更後画像ファイル名'" onmouseOut="aaa.src='元画像ファイル名'">リンク文字（アンカーテキスト）</a>
★onmouseOver="aaa.src='変更後画像ファイル名'"で
aaaという名前の画像のソースを変更します。
★「"」と「'」が見にくいとおもいますが、この位置を間違えると動きません。
★JavaScriptが使える環境でないと動きません。

お礼

詳しく解説して下さりありがとうございます。大変参考になりました。
私がしたい事をしようとするとJavaScriptを使用する事になるんですね。
CSSを使う方法の利点に惹かれますが、デザインとどちらをとるかよく考えてみようと思います。