プロが教える店舗&オフィスのセキュリティ対策術

AppleのHPのヘッダーのように、マウスを合わせると色が変わるようにするには、どのようにすれば良いでしょうか?
参考URL http://www.apple.com/jp/

使用ソフトは、dream weaver CS4になります。

お手数ですが、初心者のため、
1,KKKKK
2,XXXXX
3,LLLLLL
4,完成

のような形でご教示いただくと嬉しいです。

宜しくお願いします。

A 回答 (3件)

あれはjavascriptなんか使いません。

CSSだけでやります。具体的には
http://images.apple.com/jp/global/styles/base.css の150行目あた
りからですが、http://images.apple.com/jp/global/nav/images
/globalnavbg20080609.png のどの部分を表示するのかを、background-
positionで指定するんですよ。たとえば「ストア」ってところでは、

通常
前略 li#gn-store a {background-position: -117px 0pt;}
ポインタが重なったとき
前略 li#gn-store a:hover {background-position: -117px -38px;}
リンクがアクティブになったとき
前略 li#gn-store a:hover {background-position: -117px -76px;}
ストアの中にいるとき
#globalheader.store 中略 a {background-position: -117px -114px;}

これだけ。似たような画像を用意して、コードをいじりながら
試してみてください。

この回答への補足

ありがとうございます。

いくつか質問があります。

>​http://images.apple.com/jp/global/styles/base.css​ の150行目
ちなみに、このようなcssの表示はどのようにされたのでしょうか?
(どのようにすれば、上記urlがわかるのでしょうか?)

また、画像の作り方での質問ですが、このような画像はどのように作れるかご存知でしたら、ご教示ください。(特にわかりやすい回答でしたので。。)
参考URL http://okwave.jp/qa5229469.html

補足日時:2009/08/24 07:08
    • good
    • 0

通常時に表示する画像と、マウスを重ねたときに表示する画像の2つを用意して下さい。



1, HTMLページに通常時に表示する画像を置く
2, その画像を選択し、プロパティインスペクタ(プロパティウインドウ)からIDを付ける
3, ビヘイビアウインドウを開き、onmouseoverに「スワップイメージ」を割り当て、2のIDの画像に、マウスを重ねたときに表示する画像を指定する。
    • good
    • 0

ご提示のアップルサイトの「ヘッダー」とは実は「文字」ではなく、画像です。

通常時の画像とマウスを当てたときの画像の2種類を用意して、Javascriptで切り替えているのです。
下記サイトの「JAVATEA12:マウスを当てただけで画像を切り替えます」を参照下さい。通常の赤い正方形画像がマウスを当てたときだけピンク色の画像に変わります。
http://www.geocities.jp/digitwland/javatea/javat …
解説文を読み、また「サンプルの表示」で出現した小窓のソースを読んで下さい。(ただし<!-- text below generated by server. PLEASE REMOVE -->以下はプロバイダが勝手に付け加えたもので関係ありません)
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!