ふむふむブログ fmfmBLOG

暑さにやられてボンヤリしていたら夏が終わっておりました。
皆様いかがお過ごしでしょうか？
「CHIZTEK（チズテク） 手描き地図検索」の開発チームです。

個人的な話でとても恐縮なのですが、弊社代表取締役の飯島 進仁が
来る8/29、Tech・Ed 2008 YOKOHAMAにて
「ライトニングトーク」という場で発表をさせて頂くことになりました。

Birds of a Feather & ライトニング トーク

5分という小さなステージではありますが、Windows Live Platformに関する
面白い情報をお伝えできれば・・・と思います。
もしお時間にゆとりがあるようでしたら、お立ち寄りくだされば幸いでございます。

それでは失礼致します。

若干過ごしやすい日が続くと思えばまたまた暑くなったり・・・
皆様いかがお過ごしでしょうか。
「CHIZTEK（チズテク） 手描き地図検索」の開発チームです。

またまたWindows Vista Sidebar gadgetの話です。

実行中のSidebar gadgetにマウスカーソルが当たった時に
ふんわりと画像を浮かび上がらせて、
gadgetからマウスアウトした時にふんわりとそれがきえる・・・といった
アニメーションを割り振りたいなぁ、ということがよくあります。

その場合『そのgadgetのどこでもいいからカーソルがあたれば』
そのアニメーションを開始するきっかけとなります。
なので素直にbodyのonmouseoverやonmouseoutに記述するのではと思います。

しかし、そのbodyの上にdivタグなど、他の要素が配置されている場合はどうでしょうか？
実はちょっぴりうまくいかないのです・・・。
ざっくりご説明いたします。

要素Ａに配置されている要素Ｂがあるとします。

カーソルが図のようにスーッと移動した場合、
どういった流れでイベントが発生するでしょうか？

1.要素Ａonmouseover
2.要素B onmouseover
3.要素B onmouseout
4.要素Ａonmouseout

となりそうですが、実際にはこういう流れでイベントが発生します。

1.要素Ａonmouseover
2.要素Ａonmouseout
3.要素B onmouseover
4.要素B onmouseout
5.要素Ａonmouseover
6.要素Ａonmouseout

要素Ｂに入るときに要素Ａからカーソルが外れた、という扱いになるようです。

これはタイヘン！と思いきや、便利なイベントがありました。

onmouseenterとonmouseleave

この「onmouseenter」「onmouseleave」というイベントを使えば、
要素Ａから要素Bに入る時に要素Ａのマウスアウトが発生せず、当初想定していたような動きになります。

onmouseenterとonmouseleaveはIEでのみ使用できるイベントなので、
使えるチャンスが限定されてしまうのが残念なのですが、
幸いなことにVista Sideber gadgetでは使えます！

動作タイミングですが、gadgetにマウスをホバーした時に
普段は非表示になっているガジェットのハンドルが
ふんわりと表示されますがそのタイミングに近いと思います。
なにかと便利なイベントですので、是非試してみてくださいね！