TITLEカスタマイズ方法    赤字削除変更不可青字設定箇所、グレーは必要のない部分(解説)です。



<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>タイトル浮遊</TITLE>
<STYLE type="text/css">
.time{behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>

<BODY id="body">
id="body" BODYに任意のIDをつけます。これは、浮遊には直接関係ありません。タイトルにマウスが乗ったときに背景色をグラデ変化させるためにつけています。

<TABLE border="0" width="100%" cellpadding="0" cellspacing="0" height="100%"><TR><TD align="center">

<!--画像ファイル指定-->
<IMG id="title1" src="title.gif" border="0" style="width:0;height:0;position:relative;top:0;left:0;">
id="title1" 動かしたい画像に任意のIDをつけます。他と重複しないように注意。
width:0;height:0; これはページ読み込み時は画像を見えないようにするために(大きくなるわけだから)縦横ともに0(ピクセル)と指定しています。
position:relative; 相対位置に指定しています。わからない人は、posisionについての項を見てください。
top:0;left:0; 相対位置0ピクセル、0ピクセルに指定しています。


<!--画像を浮遊させる-->
<t:animateMotion targetElement="title1" path="m 0 0 c 0 300 0 300 0 0" begin="0" dur="1" repeatCount="2" fill="hold"/>
targetElement="title1" 動かす対象のIDを指定します。
path="m 0 0 c 0 300 0 300 0 0" 動かしかたの指定です。この値を変えてみると浮遊になったり、バウンドになったり、他にも様々な動きに変化します。
begin="0" 動きの開始する時間です。0、つまり、ページロードと同時にスタートします。
dur="1" 動きの始まりから終わりまでにかかる時間です。ココでは1秒に指定しています
repeatCount="2" 動きを繰り返す回数の指定です。ココでは2回に指定しています。
fill="hold" 動きが終了した際に、対象となるもの(ココではtitle1)を動きが終了した位置にとどまらせるか、最初の位置に戻すかという指定です。
ココでは終了した位置にとどまらせるように指定しています。


<!--画像を大きくする-->
<t:animate targetElement="title1" attributeName="width" begin="0" from="0" to="1200" dur="3" autoreverse="false" fill="hold" />
<t:animate targetElement="title1" attributeName="height" begin="0" from="0" to="400" dur="3" autoreverse="false" fill="hold" />
targetElement="title1" 動かす対象のIDを指定します。
attributeName="width"
attributeName="height"
何を変化させるのかの指定です。上が横幅、下が高さになります。
begin="0" 動きの開始する時間です。0、つまり、ページロードと同時にスタートします。
from="0" 大きさを変化させる際の、開始時の大きさです。ココでは0、つまりありません。
to="1200" 大きさを変化させる際の、終了時の大きさです。ココでは横幅の終了を1200ピクセルに指定しています。
dur="3" 動きの始まりから終わりまでにかかる時間です。ココでは3秒に指定しています
autoreverse="false" 動作終了後に、巻き戻しで、動作を戻すかの指定です。ココではなしに指定しています。
fill="hold" 動きが終了した際に、対象となるもの(ココではtitle1)を動きが終了した位置にとどまらせるか、最初の位置に戻すかという指定です。
ココでは終了した位置にとどまらせるように指定しています。
以下はここまでで既に説明しています。設定してみてください。

<!--画像を最後に少しだけ揺らす-->
<t:animate targetElement="title1" attributeName="width" begin="3.1" from="500" to="600" dur=".2" autoreverse="true" fill="hold" repeatcount="2" />
<t:animate targetElement="title1" attributeName="height" begin="3.1" from="160" to="200" dur=".2" autoreverse="true" fill="hold" repeatcount="2" />

<!--画像にマウスが乗ったら背景色をグラデ変化させる-->
<t:animateColor targetElement="body" attributeName="backgroundColor" values="black;red;yellow;blue;lime;green;gold;white;" dur="3" autoReverse="true" repeatCount="indefinite" begin="title1.mouseover" end="title1.mouseout" />

</TD></TR></TABLE>

</BODY></HTML>