AppleのHPのヘッダーのように、マウスを合わせると色が変わるようにするには、どのようにすれば良いでしょうか?
参考URL http://www.apple.com/jp/
使用ソフトは、dream weaver CS4になります。
お手数ですが、初心者のため、
1,KKKKK
2,XXXXX
3,LLLLLL
4,完成
のような形でご教示いただくと嬉しいです。
宜しくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.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
No.2
- 回答日時:
通常時に表示する画像と、マウスを重ねたときに表示する画像の2つを用意して下さい。
1, HTMLページに通常時に表示する画像を置く
2, その画像を選択し、プロパティインスペクタ(プロパティウインドウ)からIDを付ける
3, ビヘイビアウインドウを開き、onmouseoverに「スワップイメージ」を割り当て、2のIDの画像に、マウスを重ねたときに表示する画像を指定する。
No.1
- 回答日時:
ご提示のアップルサイトの「ヘッダー」とは実は「文字」ではなく、画像です。
通常時の画像とマウスを当てたときの画像の2種類を用意して、Javascriptで切り替えているのです。下記サイトの「JAVATEA12:マウスを当てただけで画像を切り替えます」を参照下さい。通常の赤い正方形画像がマウスを当てたときだけピンク色の画像に変わります。
http://www.geocities.jp/digitwland/javatea/javat …
解説文を読み、また「サンプルの表示」で出現した小窓のソースを読んで下さい。(ただし<!-- text below generated by server. PLEASE REMOVE -->以下はプロバイダが勝手に付け加えたもので関係ありません)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- クレジットカード 楽天カードに、身に覚えのない請求が来ている。 1 2022/07/11 21:44
- マウス・キーボード 無線マウスが反応しない 3 2022/05/08 22:22
- iCloud Apple Watch とiPhone のカレンダー同期 1 2022/12/09 22:12
- その他(プログラミング・Web制作) プログラミング言語について 2 2023/06/04 01:39
- Visual Basic(VBA) VBA 画面上のカーソルに文字数字を入力するコードを教えて下さい 1 2022/10/30 10:31
- ノートパソコン マウスの問題 2 2022/07/30 18:33
- 画像編集・動画編集・音楽編集 簡単な画像処理ソフトを探しています 5 2023/02/20 17:53
- マウス・キーボード PC画面に表示されているHPなどを上下にスライドさせたい 7 2023/03/17 11:05
- その他(パソコン・周辺機器) 呪われた様な.......様々な不具合について 2 2022/08/26 15:52
- デスクトップパソコン デスクトップPCの具合いが悪い ヤフオクで富士通FMVD16010Z Window11を購入したので 9 2023/08/13 16:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSでの動画のマスク処理
-
WEB上でディレクトリ内の画像を...
-
【至急お助け!】チェックボッ...
-
ひとつの画像をWEBで異なる小さ...
-
フッターの背景に色を指定した...
-
<hr>の縦バージョンはありますか?
-
IMGタグで画像の繰り返し使用は…
-
背景画像の上に透過GIF背景...
-
サファリで背景画像が1ピクセ...
-
画像の背景を透明にしたい
-
見出しの複数行の対応について
-
jQuery背景画像動かすパララックス
-
ホームページの背景画像を画面...
-
gif画像でたまに背景がグレーに...
-
WEbサイトの背景画像にメッシ...
-
文字列の後に中央線を引きたい...
-
横棒GIF左右ぴったしにするタグ...
-
htmlかcssで背景の白い枠をなく...
-
文字列の下に点線を出す
-
HPのナビゲーションと<UL><LI>
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報