メニューボタンをウィンクさせる方法

ロゴにマウスを乗せるとウィンクするような瞬きするような効果を見せるものがあります。

例
http://www.ikiiki-cl.com/
のトップページの左上ロゴやメニュー

上記エフェクトってどのように実現されてるのでしょうか？

cssとgifのみで実現しているように推測しているのですが
この方面に詳しい方おられましたらよろしくお願いします。

No.1 回答者： neko-ten 回答日時： 2011/05/25 09:11

おもくそJavaScriptです。

jQueryのanimate使ってますね。

ボタンにマウスが乗る（イベント発生）
↓
対象要素の不透明度を40%にする
↓
アニメーションで不透明度を100%に戻す

って動作してます。

この回答へのお礼

ありがとうございます。

jQueryは守備範囲外だったので勉強していきます。。

お礼日時：2011/05/25 11:29

No.2 回答者： pasocom 回答日時： 2011/05/25 09:11

CSSというよりもJavascriptで実現されます。

下記サイトの「JAVATEA12:マウスを当てただけで画像を切り替えます 」を参照下さい。
ここではマウスを当てたときの一回だけ画像を切り替えていますが、ご提示のサイトのように「ウインク」させるなら、数秒後に元の画像に戻すように設定（スクリプト）を書くだけです。
http://www.geocities.jp/digitwland/javatea/javat …

この回答へのお礼

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

ご紹介いただいた頁のスクリプト導入してみます。

お礼日時：2011/05/25 11:30

No.3 ベストアンサー 回答者： tomonori 回答日時： 2011/05/25 09:53

JQuery ウィンク

で検索すると、解説したサイトがでてきます。
僕も勉強になりました。ありがとうございます。

この回答へのお礼

JQueryというのがポイントのようですね。
てっきりcssのみでいけるのかと思っていました。

JQueryを勉強していきます。

みなさん、丁寧かつ迅速なご返答をいただきありがとうございました。

お礼日時：2011/05/25 11:35

No.4 回答者： ORUKA1951 回答日時： 2011/05/25 11:40

　javascriptですが、javasciptだと、画像にリンクをかけていますのでサブリスト個別にはリンクができません。

　HTML的には、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
*・・・【中略】・・・
* テキストを画像に置き換えて表現する。
* 余白制御のために画像を用いる。
・・・【中略】・・・
　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　で、CSSとgif(またはpng)で簡単に実現できるのでそのほうが良いでしょう。
<ul>
　<li></li>