マウスロールオーバーイベントに連動して、小さめのオーバーレイ画像(240x150)をその場で回転させるサンプルです。

サンプルで利用している画像ファイル

定義例

sample001_normal.jpg
image_overlay/sample001_normal.
sample001_over.jpg
image_overlay/sample001_over.
a001.jpg
image_overlay/a001.
a002.jpg
image_overlay/a002.
a003.jpg
image_overlay/a003.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<!-- コモンセクション設定 -->
<common>

    <copyright>elz.jp</copyright>

    <!-- ボタン個別定義モード宣言 -->
    <button_mode>1</button_mode>

    <!-- ボタン画像指定 -->
    <button_normal>image_overlay/sample001_normal.jpg</button_normal>
    <button_over>image_overlay/sample001_over.jpg</button_over>

    <!-- エフェクト指定 -->
    <over_effect>3212</over_effect>
    <over_time>3</over_time>

    <!-- 背景初期表示エフェクト指定 -->
    <init_effect>2</init_effect>
    <init_time>6</init_time>

    <!-- 初期アクション指定 -->
    <init_action>init</init_action>

</common>


<!-- エキスパートセクション設定 -->
<expert>

    <!-- ボタン1定義 -->
    <button x="10" y="10"  w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act1</over_action>
    </button>

    <!-- ボタン2定義 -->
    <button x="220" y="10" w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act2</over_action>
    </button>

    <!-- ボタン3定義 -->
    <button x="430" y="10" w="200" h="30">
        <!-- ロールオーバー時のアクション指定 -->
        <over_action>act3</over_action>
    </button>

</expert>


<!-- アクションセクション設定 (画像とエフェクトの関連付け)-->
<action>
    <event group="act1" target="photo1" effect_type="in_photo,out_photo" effect_time="6" />
    <event group="act2" target="photo2" effect_type="in_photo,out_photo" effect_time="6" />
    <event group="act3" target="photo3" effect_type="in_photo,out_photo" effect_time="6" />
</action>


<!-- オーバーレイセクション設定 (画像登録)-->
<overlay>
    <img id="photo1" base_mode="5" src="image_overlay/a001.jpg" />
    <img id="photo2" base_mode="5" src="image_overlay/a002.jpg" />
    <img id="photo3" base_mode="5" src="image_overlay/a003.jpg" />
</overlay>


<!-- エフェクトセクション設定 (カスタムエフェクト登録)-->
<effect>
    <in_photo  x="0,320,0" y="21,240,315" ys="11,100,0" bright="11,0,-100" />
    <out_photo             y="11,165"     ys="21,0"     bright="21,-100"   />
</effect>

</pagedata>