Livechu Browser 2.0 取扱説明書 for iAppli
前へ
ＦＡＱ		 目次

サンプル集

簡易なものから応用まで、使えるサンプルを御用意しました。
  1. イメージ画像とテキストの表示。
  2. イメージ画像表示処理を繰り返す。
  3. イメージ画像にフォーカスを当てる。
  4. フォーカスの応用。
  5. テーブルを使ってメニュー表示をする。

1. イメージ画像とテキストの表示。

【主な機能】
２種類の画像とテキストをレイアウトしています。テキストは表示効果を与えています。
【実行イメージ】
【詳細説明】
<body color="#0000ff" bgcolor="#ffffff">
<par>
　　<img region="A1:A1" src="img/img_sml_01.gif" />
　　<text region="2:2" style="static" >桜は、日本の象徴的な花の一つです。</text>
　　<img region="B3:B3" src="img/img_sml_02.gif" />
　　<text region="4:4" style="marquee" color="#ffffff" bgcolor="#000000" >チューリップ。 咲いた、咲いた．．で始まる歌でおなじみの花です。</text>
</par>
</body>
 並列処理を宣言します。
　　<img region="A1:A1" src="img/img_sml_01.gif" />
　　<text region="2:2" style="static" >桜は、日本の象徴的な花の一つです。</text>
　　<img region="B3:B3" src="img/img_sml_02.gif" />
　　<text region="4:4" style="marquee" color="#ffffff" bgcolor="#000000" >チューリップ。 咲いた、咲いた．．で始まる歌でおなじみの花です。</text>		 イメージ画像を任意の位置に配置する。
<body color="#0000ff" bgcolor="#ffffff">
<par>
　　<img region="A1:A1" src="img/img_sml_01.gif" />
　　<text region="2:2" style="static" >桜は、日本の象徴的な花の一つです。</text>
　　<img region="B3:B3" src="img/img_sml_02.gif" />
　　<text region="4:4" style="marquee" color="#ffffff" bgcolor="#000000" >チューリップ。 咲いた、咲いた．．で始まる歌でおなじみの花です。</text>		 固定テキストを任意の位置に配置する。
カラーおよびバックグラウンドカラーを省略した場合、<body>タグで指定したカラーをデフォルトカラーとして使用ます。
　　<text region="4:4" style="marquee" color="#ffffff" bgcolor="#000000" >チューリップ。 咲いた、咲いた．．で始まる歌でおなじみの花です。</text> １行に入りきらないテキストを表示させる効果としてスタイル属性にmarqueeを指定し、右から左へテキストを流します。また、テキストに固有の色を指定します。




2. イメージ画像表示処理を繰り返す。

【主な機能】
３種類の画像をそれぞれ違ったスタイルにより表示させ、それを繰り返す。
【実行イメージ】
ドアが左右に開くように表示する。 中央の小窓が徐々に大きくなるように表示する。 モザイク状のブロックが
徐々に消えて表示する。

自動進行
自動進行

【詳細説明】
<csmil>
<head>
　　<title>ＣＳＭＩＬサンプル４</title>
　　<layout bordercolor="1" cursorcolor="1" cursorline="2">
　　　　<region id="all" top="0%" left="0%" width="100%" height="90%"/>
　　　　<region id="text" top="90%" left="0%" width="100%" height="10%"/>
　　</layout>
</head>
 <region>タグを使用して、イメージ画像の表示領域（表示位置、幅、高さ）を指定します。
<body color="#0000ff" bgcolor="#ffffff">
<par>
　　<text region="text" style="marquee" repeat="100" color="#65fe67" bgcolor="#ff9933">パラパラかわる画像をお楽しみ下さい。</text>
　　<seq>
　　　　<img region="all" style="barnDoor" src="img/img_big_01.gif" dur="5s"/>
　　　　<img region="all" style="irisWipe" src="img/img_big_02.gif" dur="5s"/>
　　　　<img region="all" style="mosaic" src="img/img_big_03.gif" dur="5s"/>
　　</seq>
</par>
</body>
</csmil>		 画像とテキストを並列に表示する為の宣言します。
<par>タグ内にrepeat属性を指定することにより、全体の表示回数を指定できます。
また、その他、begin、end、endsync属性により開始点や終了点の指定ができます。
<body color="#0000ff" bgcolor="#ffffff">
<par>
　　<text region="text" style="marquee" repeat="100" color="#65fe67" bgcolor="#ff9933">パラパラかわる画像をお楽しみ下さい。</text>
　　<seq>
　　　　<img region="all" style="barnDoor" src="img/img_big_01.gif" dur="5s"/>
　　　　<img region="all" style="irisWipe" src="img/img_big_02.gif" dur="5s"/>
　　　　<img region="all" style="mosaic" src="img/img_big_03.gif" dur="5s"/>
　　</seq>
</par>
</body>
</csmil>		 イメージ画像を順次表示するための宣言をします。
ここでは、３つのイメージ画像を指定しています。全てのイメージ画像が表示し終わるとまた先頭のイメージ画像に戻ります。
<seq>タグ内にrepeat属性を指定することにより、全体の表示回数を指定できます。
また、その他、begin、end属性により開始点や終了点の指定ができます。
　　<seq>
　　　　<img region="all" style="barnDoor" src="img/img_big_01.gif" dur="5s"/>
　　　　<img region="all" style="irisWipe" src="img/img_big_02.gif" dur="5s"/>
　　　　<img region="all" style="mosaic" src="img/img_big_03.gif" dur="5s"/>
　　</seq>		 region属性により表示位置情報を指定し、style属性により表示効果を付けます。
src属性により表示するイメージ画像（ここでは、GIFファイルを使用しています。）を指定し、dur属性によりイメージ画像の表示時間を指定しています。
style属性にbarnDoorを指定した場合は、画像の中央からドアが左右に開くような表示効果が与えられます。
irisWipeを指定した場合は、画像の中央から小窓が徐々に大きくなるような表示効果が与えられます。
mosaicを指定した場合は、モザイク上のブロックが徐々に消えていきます。




3. イメージ画像にフォーカスを当てる。

【主な機能】
イメージ画像にフォーカスを当てる
イメージ画像とフォーカスを使用して、イメージ画像（フォーカス）をクリックしたらリンク先へジャンプするページを作って見よう。
【実行イメージ】

クリック
【詳細説明】
<img region="A3:B4" src="img/img_sml_01.gif" fill="freeze"/>
<focus region="A3:B4" style="click"><do href="list01.csmil"/></focus>
 イメージ画像を配置し、それに合わせてフォーカスを作成します。
クリック時に動作する様にフォーカスのstyle属性にclickを指定します。
<img region="A3:B4" src="img/img_sml_01.gif" fill="freeze"/>
<focus region="A3:B4" style="click"><do href="list01.csmil"/></focus>		 フォーカス内では、<do>タグを使用しジャンプするリンク先をしていします。




4. フォーカスの応用。

【主な機能】
フォーカスを使用する。
イメージ画像とフォーカスを使用して、イメージ画像（フォーカス）が当ったら上段にテキストを表示させ、クリックしたらリンク先へジャンプするページを作って見よう。また、フォーカスが当った時に表示するテキストは、外出しにして見よう。
【実行イメージ】

カーソル移動
カーソル移動

クリック
【詳細説明】
<body align="center|grid" color="#0000ff" bgcolor="#fff97f">
<par>
　　　<text region="header" bgcolor="#00f970">僕の家族</text>
　　　<img region="A3:B4" src="img/img_sml_01.gif"/>
　　　<focus region="A3:B4" style="auto" href="list01.csmil">
　　　　　<text region="2" src="name01.txt"/>
　　　</focus>
 イメージ画像を配置し、それに合わせてフォーカスを作成します。
ここでは、フォーカスが当った時にイメージ画像の上部に指定テキストを表示し、クリックしたときにリンク先へジャンプする様に<focus>タグのstyle属性にautoを指定しています。また、<focus>タグ内にhref属性を使用しジャンプ先のリンクを指定します。
<body align="center|grid" color="#0000ff" bgcolor="#fff97f">
<par>
　　　<text region="header" bgcolor="#00f970">僕の家族</text>
　　　<img region="A3:B4" src="img/img_sml_01.gif"/>
　　　<focus region="A3:B4" style="auto" href="list01.csmil">
　　　　　<text region="2" src="name01.txt"/>
　　　</focus>		 フォーカスが当った時にイメージ画像の上に表示するテキストを指定します。
ここでは、表示するテキスト文字列をsrc属性を使用することにより、外部参照しにしています。
　また、テキストのカラーおよびバックグラウンドのカラーは、<body>タグで指定したデフォルトカラーを使用します。




5. テーブルを使ってメニューを表示する。

【主な機能】
テーブルとワークシートを使う
テーブルとワークシートを使用して指定領域にテーブルを作成し、ワークシートの内容を表示してみよう。
【実行イメージ】

カーソル移動
クリック
カーソル移動
【詳細説明】
<layout basecols="12" baserows="12" cursorcolor="d" cursorline="2">
　　<region id="map" top="0%" left="0%" width="100%" height="90%"/>
　　<region id="tt" top="91%" left="0%" width="100%" height="10%"/>
　　<region id="p01" top="20%" left="14%" width="31%" height="10%"/>
　　<region id="p02" top="20%" left="76%" width="21%" height="10%"/>
　　　　　　　　　　　　　　　　　　　　　　．
　　　　　　　　　　　　　　　　　　　　　　．
　　　　　　　　　　　　　　　　　　　　　　．
　　<region id="m08" top="38%" left="43%" width="21%" height="37%"/>
　　<region id="m09" top="25%" left="25%" width="31%" height="65%"/>
</layout>
 <region>タグを使用して表示領域を作成します。
　　<region id="m09" top="25%" left="25%" width="31%" height="65%"/>
</layout>
　　<worksheet id="l01">
<cell href="hokaido01.csmil"/>道北・道東
<cell href="hokaido02.csmil "/>道央・道南
　　</worksheet>
　　　　　　．
　　　　　　．
　　<worksheet id="l04">
<cell href="Tokyou01.csmil "/>東京
<cell href="Tokyou02.csmil "/>群馬
<cell href="Tokyou03.csmil "/>埼玉
<cell href="Tokyou04.csmil "/>栃木
<cell href="Tokyou05.csmil "/>茨城
<cell href="Tokyou06.csmil "/>千葉
<cell href="Tokyou07.csmil "/>神奈川
<cell href="Tokyou08.csmil "/>伊豆
　　</worksheet>
　　　　　　．
　　　　　　．
　　</worksheet>
</head>
<body align="center|grid" color="9" bgcolor="7">
<par>
　　<img region="map" src="img/japan01.gif" fill="freeze"/>
 <worksheet>タグを使用してテーブル内に表示するデータを定義します。
また、テーブル内のデータをクリックしたときにジャンプするリンク先も指定します。
<body align="center|grid" color="9" bgcolor="7">
<par>
　　<img region="map" src="img/japan01.gif" fill="freeze"/>
　　<text region="p01" color="b" bgcolor="clear" z-index="2">北海道</text>
　　<text region="p02" color="0" bgcolor="clear" z-index="2">東北</text>
　　<text region="p03" color="a" bgcolor="clear" z-index="2">北陸</text>
　　<text region="p04" color="9" bgcolor="clear" z-index="2">関東</text>
　　<text region="p05" color="6" bgcolor="clear" z-index="2">中部</text>
　　<text region="p06" color="3" bgcolor="clear" z-index="2">近畿</text>
　　<text region="p07" color="4" bgcolor="clear" z-index="2">中国</text>
　　<text region="p08" color="5" bgcolor="clear" z-index="2">四国</text>
　　<text region="p09" color="2" bgcolor="clear" z-index="2">九州</text>
　　<text region="p10" color="1" bgcolor="clear" z-index="2">沖縄</text>
　　<text region="tt" style="marquee" bgcolor="#00FFE0">日付を指定したら地域にカーソルを合わせて実行してください。格安宿のリストが表示されます..日付を指定したら地域にカーソルを合わせて実行してください。格安宿のリストが表示されます..日付を指定したら地域にカーソルを合わせて実行してください。格安宿のリストが表示されます..</text>

 イメージ画像やテキストをregion属性を使用して配置します。
　　<focus region="p01" style="hold">
　　　　<table region="m01" src="ws:l01" cellcolor="7" style="select"/>
　　</focus>

　　<focus region="p02" style="hold">
　　　　<table region="m02" src="ws:l02" cellcolor="7" style="select"/>
　　</focus>
　　　　　　　．
　　　　　　　．
　　　　　　　．
　　<focus region="p09" style="hold">
　　　　<table region="m09" src="ws:l09" cellcolor="7" style="select"/>
　　</focus>

　　<focus region="p10" style="hold"><do href="sub11.txt"/></focus>
</par>
</body>
</csmil>		 フォーカス元とクリックしたフォーカス内以外にカーソルが移動しないようにstyle属性をholdにします。
　　<focus region="p01" style="hold">
　　　　<table region="m01" src="ws:l01" cellcolor="7" style="select"/>
　　</focus>

　　<focus region="p02" style="hold">
　　　　<table region="m02" src="ws:l02" cellcolor="7" style="select"/>
　　</focus>
 <table>タグを使用して指定位置にワークシートの内容を表示させます。位置、幅、高さは、region属性で指定します。
src属性でテーブル内で表示する<worksheet>を指定します。
callcolor属性でテーブル内のカーソルカラーを指定し、ここでは、その他のバックグラウンドカラーおよびテキストカラーは、<body>タグで指定した、デフォルトのカラーを使用しています。
スタイル属性をselectにすることにより、テーブル内でゆいつ一つだけを選択できるようにします。

前へ
ＦＡＱ		 ページの先頭へ
インフィニティ・インターソリューション株式会社
Copyright © 2001-2002 Infinity InterSolutions Inc. All Rights Reserved.