やっほー、光だよ！
みんな、もう 台湾の公式サイト は見に行ってくれたかな？　こんなページだよ！

Silverlightっていえば、やっぱ動きがないとね。
今回は、ちょっぴり動きを入れてみました。
気になる赤マルのところを・・・って、どこにマル付けてんのよっ！
な〜んか、「業界の人」の下心を感じるわね〜、、、
と、とにかく、こんな風にすればマウスの動きに反応するコンテンツができちゃうわけ。
　　 >> サンプルをダウンロード
今回のサンプルは、「４つのファイル＋画像データ」からできてまーす。

最初の２つ、hajimete02.html と Silverlight.js は、前回とほとんど同じだね。
大きな違いは、HTMLファイルの最初の方に、
っていう１行が追加されてるってこと。
ここに、今回新しく加わった myScript.js が埋め込まれてるね。

次に、Xamlファイル、hikaru1.xaml の中身を見てみると、画像の表示の仕方が書いてありまーす。

こんな風に、Image の後に、幅、高さ、ファイル名を書くと、画像が表示できるの。

その下に、 <Ellipse で始まるタグがあるでしょ。

これは、円を描くやり方なんだ。そのまんま日本語に直すと、
ざっとこんな意味。幅と高さを変えると楕円になるよ。
ここで大事なのは、
ってところ。
この、マウスが入ったときと、マウスが離れたときのことは、どうなっているのかな〜っていうと、
実は、今回新しく増えた myScript.js ってところに書いてあるんだ。

myScript.js の中身を見ると、

っていうのと、
っていうのがあるよね。
これが、それぞれマウスが入ったときと、離れたときの動きになっているんだ。

さて、サンプル画面には上と下の、２つの赤マルがあるよね。
Xamlファイルを見ると、

ってなってるよ、わかるかな〜。
ここで１つ問題、
「マウスが入ったときに、上のマルに入ったのか、下のマルに入ったのか、どうやって見分けているのでしょうか？」
答、「名前で見分けている」。
上のマルには"top"っていう名前が付いていて、下のマルには"under"っていう名前が付いているよね。
myScript.js の中を見てみると、
ってあるでしょ。
これは、「もし名前が"top"だったら」っていう意味なんだよ。
つまり"sender.Name"っていうところに、実際にマウスが入ったマルの名前が入ってくるんだね。

じゃあ、もう１つ問題。
「マウスが入ってきたとき、どうやって、ロゴマークやプンスカを表示しているの？」
実はこれも、名前を使っているんです。
ロゴマークには"silver_logo"って名前が、プンスカには"punsuka"っていう名前が付いてまーす。

そんでもって myScript.js の中で「ロゴマークさん、出てきてくださ〜い！」って呼び出すのは、
って感じにするんだ。
こうすると、img のところにロゴマークさんが入ってくるの。
で、ロゴマークさんを出したり引っ込めたりするには、「Opacity」ってのを使います。
「Opacity」っていうのは、透明度のこと。
Opacity = 1.0 で 100% 見えていて、
Opacity = 0.5 なら半分シースルー、
Opacity = 0.0 で全然見えなくなっちゃいます。
・・・ってことは〜、
こんなことをしてたんだ！

マウスにあわせた動き、わかってくれたかな〜？
こんなちょっとした仕掛けでも、案内板とか、コメントのポップアップとか、工夫次第でいろいろ使えるよね。
でも、Ｈなところに使うのは、どうかと思うなぁ・・・