工房瓦版

創作関係の趣味ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【onenter】リンクにマウスを乗せた時に何か表示する【onleave】

 KAGではリンクにマウスを乗せた時に文字列を表示させたい場合、linkタグのhint属性を指定すれば簡単に実装できます。

[link hint="あいうえお"]ああああ[endlink]


 というような感じですね。「ああああ」にリンクが貼られて、マウスを乗せるとツールチップヒントで「あいうえお」が表示されます。

 また、文字列を改行させたい場合、「\n」を書けば、その位置で改行されます。

[link hint="あいうえお\nかきくけこ"]ああああ[endlink]


 文字だけならこれらの応用でいいですが、マウスを乗せた時に画像を表示したかったり、もっと複雑な文字列を表示したい場合は、hint属性だけでは足りません。

 そういう場合のためにonenter属性が用意されています。
 onenterはリンク内にマウスカーソルが入ってきたときに実行される TJS 式を 指定します。
 初心者のうちは、tjs式の指定というところが意味不明だと思います。
 しかし、リンクにマウスをあわせると画像が表示されるようにしたいというような目的のために使うには、tjs式でレイヤーを表示できるようにならないといけません。ここは避けて通ることが出来ないので覚えるしかないです。

 例えば以下のように書くとtjs式で「画像.png」が表示できます。

@iscript
var my_layer = new Layer(kag,kag.fore.base);//レイヤーを作ります
my_layer.loadImages('画像.png');//画像を読み込みます
my_layer.setSizeToImageSize();//レイヤーサイズを調整します
my_layer.visible = true;//レイヤーを見えるようにします
@endscript


 このようにしてtjs式で画像を表示できるようになれば、あとはこの一連の処理を関数にしてしまえば、onenterで使えるようになります。

@iscript
function layer_wo_hyojisuru(){
   var my_layer = new Layer(kag,kag.fore.base);//レイヤーを作ります
   my_layer.loadImages('画像.png');//画像を読み込みます
   my_layer.setSizeToImageSize();//レイヤーサイズを調整します
   my_layer.visible = true;//レイヤーを見えるようにします
}
@endscript


 こうやって関数を用意しておいて、次に下のようにタグの中に指定します。

[link onenter="layer_wo_hyojisuru()"]ああああ[endlink]


 これで、「ああああ」のリンクにマウスを重ねると「画像.png」が表示されるようになります。

 ただし、このままでは、一度表示した後、マウスをリンクから離しても画像が残ってしまいます。
 ですから、今度は、onleave属性、つまり、マウスがリンクを離れた時に実行される処理に、レイヤーを消す関数を作って指定しておきます。

@iscript
function layer_wo_kesu(){
   my_layer.visible = false;//レイヤーを見えなくします
}
@endscript


 こんな感じで関数を作ってから、下のようにonenterとonleaveに指定してやります。

[link onenter="layer_wo_hyojisuru()" onleave="layer_wo_kesu()"]ああああ[endlink]


 これで、「ああああ」にマウスが入った時に画像が表示され、マウスが離れた時に画像が消去される記述が出来ました。

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kuonkobo.blog82.fc2.com/tb.php/952-6ff3ff0e
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

まとめ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。