Webサイトを作成中です。下記サイトのトップのメニューバーはオンマウスで色が変わるのですが、単なる画像の切替ではなく徐々にボタンの色が変わっています。このようなオンマウスの効果はどのように実装出来るでしょうか?


http://www.appcolle.jp/

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/07 08:10:11
  • 終了:2011/11/13 09:13:03

ベストアンサー

id:tdoi No.1

tdoi回答回数174ベストアンサー獲得回数752011/11/08 18:46:31

他にも色々方法はあるでしょうが、提示されたサイトの手法を解析してみました。

かなりシンプルにするとこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<style type="text/css">
<!--
ul li.mPhone span { height: 0px; width: 160px; padding-top: 49px; overflow: hidden; display: block; background-image: url(./btn_menu.png); }
ul li.mPhone      { position: relative; float: left; background-image: url(./btn_menu.png); }

ul li.mPhone span { background-position: -160px 0px; }
ul li.mPhone      { background-position: -160px -98px; }
-->
</style>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>
<script language="JavaScript">
<!--
$(function() {
	$("ul li span").hover(function() {
		$(this).fadeTo(200, 0)
	},function() {
		$(this).fadeTo(150, 1.0)
	});
});
-->
</script>
</head>
<body>
<ul>
<li class="mPhone"><span>iPhoneアプリ</span></li>
</ul>
</body>
</html>

このhtmlを適当なところにそのまま作成して、同じディレクトリに、http://www.appcolle.jp/common/img/header/btn_menu.pngをダウンロードしてきて置いておけば動作します。


ここでやっていたのは、liの中にspanがある状況ですが、liとspanのそれぞれに背景画像を設定しておき、マウスの動きに応じて、jQueryのfadeToを使ってspanの方の透過度を徐々に変えることによりこの目的を達成していました。

アルファブレンディングの関係で徐々に色が変わっているように見えるのでしょうね。

もちょっと込み入ったことになってますが、同サイトでは、

背景画像の設定を、common/css/import.cssから読み込まれる common/css/layout.cssに

fadeToの動作の定義を、common/js/common.jsに

記述されています。

何かの参考になれば。

id:koime_ryokutya

回答ありがとうございます。

2011/11/13 09:12:57

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません