１
4.0以上６ |
表示 |
１ |
オブジェクトの表示/非表示Part1 4.0以上 |
今回はオブジェクトの表示/非表示についてやってみよう。
今回の命令ではあるオブジェクト（文字や画像）を表示させるか表示させないかということを指定するんだ。
まず、命令を見てみよう。
■にはvisibleかhiddenのどちらかが入るんだ。
visibleにした時は表示が見える状態になる、またhiddenにすると表示が見えない状態になるんだ。
| visible （見える状態） |
 |
| hidden （見えない状態） |
トップページで使っているような、マウスにカーソルが合わさるとその説明が現われるというプログラムは、
マウスが上に乗ったときに(onmouseover)表示をvisibleにして、離れたときに(onmouseout)表示をhiddenにすればいいよね。
その前に、ここでもスタイルシートが必要になってくるので、
まずは復習としてここを見ておこう。
スタイルシート講座（配置：表示部分を指定したい！）
じゃあ、このプログラムを簡単に作ってみよう。
| <SPAN onmouseover="com.style.visibility='visible'"
onmouseout="com.style.visibility='hidden'"> ←マウスの状態により表示/非表示を切り替える ヨッシーの”ホームページを作ろう！” </SPAN> <P> <FONT color="green" id="com" style={visibility:hidden;}> ←始めは表示をhiddenにして隠しておく あなたもホームページを作ってみませんか？<BR> ホームページの作り方をわかりやすく解説しています。<BR> また、素材集もあります。<BR> </FONT> |
これを実行すると、
|
ヨッシーの”ホームページを作ろう！”
あなたもホームページを作ってみませんか？ |
このようにトップページで使っていた技術もこんな簡単に実現することができるんだよ。
（※説明が入る部分は初めからスペースが空いているね。この命令では、表示か非表示かを切り替えているだけなので、表示されていないときも実際はそのぶぶんに透明な文字があるので、スペースはとられたままなんだ。ちなみに、次にやるPart2ではこのスペースもなくなる。つまり、オブジェクト自体がなくなるんだ。）
表示
オブジェクトの表示/非表示 Part2