Webデザイン12回目 JavaScriptとCSSでページを操作
要素の表示・非表示
CSSのdisplay属性を使って表示・非表示を制御できる。
<p style="display : block">これは表示される</p> <p style="display : none">これは表示されない</p>
DOMを使ってJavaScriptからスタイルシートを制御するときは次のように記す。
D = document.getElementById('体表要素のid属性値'); D.style.CSSの属性名 = 属性値;
例題の内容と動作を確認する。
list.html(211)
このプログラムでは対象のHTML要素の状況によって処理を分けている。この間数は受け取った値をid属性の値として扱っている。
function dsp(FLG){ obj = document.getElementById(FLG); if(obj.style.display=="block") // 表示されているか? obj.style.display="none"; // 非表示にする。 else obj.style.display="block"; // 表示する }
要素をクリックしたときだけ処理させるためにonclick属性を使用する。
<li onclick="dsp('lst0')">impress watch <ul id="lst0"> <li><a href="http://www.watch.impress.co.jp/pc/">PC Watch</a> <li><a href="http://www.watch.impress.co.jp/internet">Internet Watch</a> </ul> ....
イベント処理
マウスポインターの動きに合わせてHTML要素内の表示をJavaScriptで操作したいときは次の属性にじっこうしたいJavaScriptのコード化関数を記せばよい。
- ポインターが要素上に入ったときはonmouseover属性
- ポインターが要素の上から離れたときはomouseout属性
次のファイルにはマウスポインターの動きに合わせて画像や文章を変更するコードが記されている。
onmouse.zip(169)
次のコードは上記リンクのファイルの一部でマウスポインターの位置によって表示する画像ファイルを
<img src="home.jpg" name="home" onmouseover="document.images['home'].src='home1.jpg'" onmouseout="document.images['home'].src='home.jpg'">
演習 フォトアルバムを作る
マウスイベントを利用してフォトアルバムを作る。各自でがJPEG形式の画像ファイルを6つ用意し、ファイル名をphoto00.jpgからphoto05.jpgに変えておく。
ex_photoalbum.html(227)