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

画像にマウスオーバーすると、png画像が吹き出すようなアニメーションをやりたいのですが、
以下サイトは どうやって実装しているのでしょうか?

http://www.nagashima-resortkohosuishin.jp/

こちらのサイトの中腹の丸いボタンが4つ並んでいるやつです。

●質問者: hashimajc
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● Slight_Bright
●20ポイント

jQueryによる実装でしょう。この例では、common.jsというリンクファイルに具体的なプログラムが記載されています。


2 ● snow0214
●20ポイント

そのサイトで使っているものとは少し違うのですが、jQueryとtooltipsterプラグインを使うと簡単に実現できます。

詳しい手順は下の記事を読んで下さい。
http://javatechnology.net/jquery/tooltipster/


3 ● ぽけっとしすてむ
●20ポイント ベストアンサー

ちょっと書きますね。
http://jsfiddle.net/nS376/

jQuery 2.1.0
jQuery Easing v1.3
を使ってアニメーションさせています。


4 ● POGPI
●20ポイント

onmouseoverで、関数を呼んで、style.visibilityがhiddenだったのをvisibleにすれば、できそうですね。
onmouseooutで、逆にhiddenにすればいいですね。
動きも、style.topをsetTimeoutで変えればできますね。
微妙な動きなのでどうすでばできるか、ちょっと考えないと難しいですが、Math.sinとかを使っていると思います。


5 ● エネゴリ
●20ポイント

吹き出しの画像がgifですがこちらが参考になると思います。
http://www2s.biglobe.ne.jp/~nkazu/hpmethod/item10.html#

関連質問

●質問をもっと探す●



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