CSSで透明度変更。

　エロゲーっぽくしてみました。

• サンプル：CSSで透明度変更。

　スタイルシートをいじってエロゲーっぽい構成に。

index.html

<DIV class="background"> </DIV>
<DIV class="caracter">
<IMG ID="character" SRC="e.jpg"><BR>
</DIV>
<DIV class="message_window_background"> </DIV>
<DIV class="message_window_frame">
    <DIV ID="maintext">このへんクリックしてね</DIV><BR>
</DIV>
<DIV class="topscreen" onClick="next( 'character', 'maintext' ); return false;"> </DIV>

　メッセージウィンドウの透明度は、IEとFireFoxで違うので両方設定。

main.css

/** メッセージウィンドウ（背景） */
div.message_window_background
{
    position: absolute;

    left: 20px;
    top: 300px;

    width: 600px;
    height: 100px;

    filter: alpha( style=0, opacity=70 );
    -moz-opacity: 0.70;

    z-index: 2;
    overflow: visible;

    background: #FFFFFF;
}

　IEはfilterで、FireFoxは-moz-opacityで設定。

　あと、「ゲーム画面全体のどこでクリックしてもテキストが進む」ように、<DIV class="topscreen">を全体にはっつけました。

main.css

/** トップスクリーン（クリック用） */
div.topscreen
{
    position: absolute;

    left: 0px;
    top: 0px;

    width: 600px;
    height: 400px;

    z-index: 5;
    overflow: visible;
}

　これをonClickにしてるんで、ゲーム画面のどこをクリックしても進みます。将来的にはキーを押した時にも進めるようにしたいな。