今回は 色んな変化を与えるHTML+TIMEのなかの<t:set>の使い方をやりました。
次回も 同じく 様々な変化を与える <t:animate /> をやりたいと思います。

 (≧m≦)ぷっ! また いつになるかわかりませんが どうぞ よろしくね クッピー

(^o^)/ CM ひな形MLは 当サイトの管理人 哲パパまで お申し込みください (*^.^*)エヘッ 

画像:
写真 哲パパ mairryちゃん
    公さん
. ( ̄ー|電柱|- ̄)ソーッ こんにちは またまた すっかりご無沙汰しています (;^_^A アセアセ・・・
皆さんからメールを頂きありがとうございます。 励ましのメール また この講座を楽しみにしてくださってとっても嬉しいです。


(^_^)/ クッピー  皆さん こんにちは。 クッピーほんと ご無沙汰だわね。 もう終わったのかと思ったわ ヾ(≧▽≦)ノギャハハ☆
でさ σ(^_^)アタシも わからないこと ちょっと 質問しようかなと思っていたのですが  あのね ひな形を作っていて ちょっと お祝いに カード形式でメールしようかなと思ったんですけどね。  画像を上において 下から横に移動でメッセージが出るようにしたのです。
それは 上手くいったのですが。   なななんと OEで 開いたら 画像の下に メッセージが来て入力することが出来ないの
/(-_-)\ コマッタァ・・・ と 



  オオーw(*゜o゜*)w なんたる 偶然 エル  今日のタイトルを見て!!! 色々な動き HTML+TIMEの<t:set>をつかってです。
それはすぐに解決するわよ。 ('-'*)(,_,*)('-'*)(,_,*) ウンウン σ(^_^)アタシのひな形も HTML+TIMEの<t:set/> は必ず 使っています


それでは まず エルが困っているから それから 解決しましょう。 解決方法は 色んなやり方があるのですが ひとつのやり方として
<t:set>をつかって 位置関係を変えましょう。 まずは いつものとおり サンプルを出しましょうね。  ・・・サンプル1

でっ そのサンプル画像の中から 彼岸花を使わせていただきました  エルが作ったひな形です。  サンプル2
IEで見る限りは なんら問題はないのですよね。


 そそ そうなんです。 ところがいざ OEで使おうとすると開いてみてわかったのですがメッセージがかけない。


  ('-'*)(,_,*)('-'*)(,_,*) ウンウン  ここにソースを書き出してみましょう。

<TABLE class="time" id="t1" begin="5" style="position: absolute; left : 31px; top : 60px;"><TBODY><TR>
<TD width="482" height="352">
<DIV align=center style="OVERFLOW-Y:scroll; width:482; height:352; FONT-SIZE: 11pt; COLOR: #006600;
background-color:#f7f9f4; scrollbar-face-color:#f7f9f4; scrollbar-track-color:#f7f9f4;
scrollbar-arrow-color:#a9a9a9; scrollbar-highlight-color:#f7f9f4; scrollbar-darkshadow-color:#f7f9f4;
scrollbar-3dlight-color:#f7f9f4; scrollbar-shadow-color:#f7f9f4">
<BR>☆<BR><BR><FONT size="+1"><B>入力できない</B></FONT><BR><BR><BR>

。・゜゜・(>_<;)・゜゜・。 メッセージが<BR>

入力できないよ<BR>
<BR>
<BR>

</DIV></TD>
</TR></TBODY></TABLE>
<t:animateMotion id="am1" targetElement="t1" from="0,0" to="450,0" begin="5" dur="3"fill="hold" />


<IMG src="higannbana.jpg" style="position:absolute; left : 25px; top : 52px;">

なるほどね メッセージ入力の時は 1番最初の位置に画像やメッセージが表示されるから これでは 入力できないわね。 メッセージが画像の下にいきますものね。

じゃあ どうしたらいいかといいますと ここで <t:set/>を使います。

<t:set id="" targetElement="" attributeName="" to="" begin="" />
これが <t:set/>の基本タグですね

上のタグに入れていきますと 次のようになりますね

<t:set attributeName="left" targetElement="t1" to = "31" begin="1"></t:set>

こういう風にして テーブルの位置を OEで入力できる場所に移動しましょう
どこがいいでしょうか? そうですね  画像写真から 出てきた位置だったら 大丈夫ということですよね

そうしますと 次のようになります

<TABLE class="time" id="t1" begin="5" style="position: absolute; left : 481px; top : 60px;"><TBODY><TR>
<TD width="482" height="352">
<DIV align=center style="OVERFLOW-Y:scroll; width:482; height:352; FONT-SIZE: 11pt; COLOR: #006600;
background-color:#f7f9f4; scrollbar-face-color:#f7f9f4; scrollbar-track-color:#f7f9f4;
scrollbar-arrow-color:#a9a9a9; scrollbar-highlight-color:#f7f9f4; scrollbar-darkshadow-color:#f7f9f4;
scrollbar-3dlight-color:#f7f9f4; scrollbar-shadow-color:#f7f9f4">
<BR>☆<BR><BR><FONT size="+1"><B>入力できない</B></FONT><BR><BR><BR>

。・゜゜・(>_<;)・゜゜・。 メッセージが<BR>

入力できないよ<BR>
<BR>
<BR>

</DIV></TD>
</TR></TBODY></TABLE>

このテーブルタグに先ほどの<t:setをつけて エルのひな形に貼り付けてみましょう ・・・ サンプル3


復習しますと <t:set id="" targetElement="" attributeName="" to="" begin="" /> を 置く
そこに必要なものを書き込む

<t:set attributeName="left" targetElement="t1" to = "31" begin="1"></t:set>

ようは 見えない部分にプレビューされてから1秒後に戻すということですね
まだ テーブルは表示されていませんから プレビューではテーブルが見れない時間ですね

そうしますと 入力するときは left481pxのところにあるわけですから なんら問題なく入力できます



 ほんとだわ 今まで 悩んでいたのが嘘みたい。  他にも 方法があるの?


 はい それぞれに z-index をつけて そのz-index の変化でも 同じようにできます。

その場合は まず テーブルの方が z-index:1 画像の方が z-index:2 となっていますね。 それでは 入力できませんので
最初は テーブルを z-index:3 としておきます


<t:set で 変化します。

<t:set attributeName="z-index" targetElement="t1" to = "1" begin="1"></t:set>

とすれば いいわけですね。

 なるほど ('-'*)(,_,*)('-'*)(,_,*) ウンウン  わかってきたわ そういえば クッピーも t:set をつかって テーブルの背景色を
透明にしたりしているわね


 
('-'*)(,_,*)('-'*)(,_,*) ウンウン 魅せられたでアップされている 皆さんのひな形のソースを覗いてみてください。  結構 
<t:set を 利用して 色んな変化を与えているひな形が 沢山あります。

クッピーとエルの超ビギナーのための


          ひな形講座



第25章  TIMEをつかって 色々な動き <t:set/>