６

 　表示

basic.gif (3042 バイト)

４

 　好きなHTML文を入れたいPart1　IE.gif (941 バイト)4.0以上

前回とよく似た働きをする命令をやってみよう。
前回は文字列を入れたよね、だからタグを使いたくてもそのまま表示されてしまっていたよね。
画像を使いたいときや、フォントの色や大きさを変えたくても出来なかったよね。
今回はHTML自体を埋め込むので表示されるときはタグはきちんとHTML文として認識されるんだ。

★.outerHTML = "■";・・・・・★にHTML文■を挿入する。
■：表示させたいHTML文

前回の命令はtext.innerText=""という命令だったね。
今回の命令はtext.HTMLText=""という命令だよ。
違う部分は赤の部分だね、
つまり、挿入する文字列がHTML文になったんだね。

じゃあ、前回の命令と比較してプログラムを簡単に作ってみよう。

左側

<SPAN onmouseover="text.innerText='<B>ホームページ</B>を作るための言語'" onmouseout="text.innerText=''">
↑マウスが乗るとHTML文を挿入。離れるとHTML文を消す、つまり空文字を入れる。HTML文なのでいろいろなタグを使ってみた。
HTML講座
</SPAN><BR>
<SPAN onmouseover="text.innerText='<FONT color=red>ＨＴＭＬ</FONT>では出来ないデザインを担当する言語'" onmouseout="text.innerText=''">　←上に同じ
スタイルシート講座
</SPAN><BR>
<SPAN onmouseover="text.innerText='<I>動的なホームページ</I>を作るための言語'" onmouseout="text.innerText=''">　←上に同じ
JavaScript講座
</SPAN><BR>
<SPAN onmouseover="text.innerText='<IMG src=\'../../../sozai/minicon/computer/3.gif\'>上の３つを総合したような言語。'" onmouseout="text.innerText=''">　←上に同じ
DHTML講座
</SPAN><BR>

右側

<FONT color="green" id="text"></FONT>　　　　　　　←このように文字を入れる範囲を作っておく。入った文字は緑色になるように指定。

これを実行すると、

HTML講座
スタイルシート講座
JavaScript講座
DHTML講座

↑マウスが上に乗ると説明が表示される。		 　

　

↑前回と違いタグはHTML文として認識される。周りの<FONT color="green" id="text>はそのまま使われる。

このように、動的に表示させた結果にいろいろな効果をつけたいときは今の命令を使おう。
このinnerHTMLでinnerTextとほとんど同じ働きにもできるので、まずこのinnerHTMLを覚えておけばいいよ。

back.gif (1116 バイト)　好きな文字列を入れたいPart1
next.gif (705 バイト)　画像を切り替えよう