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

質問

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

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

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

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

回答No.3

tomonori · ベストアンサー

JQuery ウィンク

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

お礼

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

JQueryを勉強していきます。

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

回答No.4

ORUKA1951

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

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

回答No.2

pasocom

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

お礼

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

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

回答No.1

neko-ten

おもくそJavaScriptです。
jQueryのanimate使ってますね。

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

って動作してます。

お礼

ありがとうございます。

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