人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

http://www.appcolle.jp/


●質問者: koime_ryokutya
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● tdoi
ベストアンサー

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

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

<!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に

記述されています。

何かの参考になれば。


koime_ryokutyaさんのコメント
回答ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ