| ポイント |
<![CDATA[
txt = document.myFORM.inText.value;
img = "";
for (i=0; i<txt.length; i++) img += "<img src='img/"+txt.charAt(i)+".gif'>";
if (document.all) document.all["outText"].innerHTML = img;
if (document.layers)
{
document.layers["outText"].document.open();
document.layers["outText"].document.write(img);
document.layers["outText"].document.close();
}
<div id="outText" style="position:absolute;top:50px;left:5px;">
]]>
|
| 説 明 |
画面上にグラフィック文字を出力するには、あらかじめ１文字づつgif画像を作成しておきます。画像名をa.gifのように「アルファベット.gif」としてa〜zまで（必要な分だけ）用意します。画面上に出力するためにdivタグで表示位置をスタイルシートで指定しておきます。フォームに入力された文字列をforを使って１文字づつ抜き出し出力するIMGタグデータを作成します。IE4以降では「document.all["オブジェクト名"].innerHTML」でタグを出力し、NN4ではdocument.open()、document.write()、document.close()を使ってレイヤーに出力します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>テキストフィールドに入力された文字を画像で画面上に出力する</title>
<script Language="JavaScript"><!--
function setText()
{
txt = document.myFORM.inText.value;
img = "";
for (i=0; i<txt.length; i++) img += "<img src='img/"+txt.charAt(i)+".gif'>";
if (document.all) document.all["outText"].innerHTML = img;
if (document.layers)
{
document.layers["outText"].document.open();
document.layers["outText"].document.write(img);
document.layers["outText"].document.close();
}
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="text" name="inText">
<input type="button" onClick="setText()" value="画面に出力">
</form>
<div id="outText" style="position:absolute;top:50px;left:5px;"></div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
テキストフィールドに入力された文字を画像で画面上に出力する