ある要素の上にマウスポインタがきた時、その要素に対してドロップシャドウがかかったように見えるスクリプトを作ってみた。
昔は、例えば写真やイラスト等imgタグに対してこういう処理を行いたい時は通常表示用の画像と、マウスポインタが上に乗ったときに表示する「ロールオーバーイメージ」の２つの画像を作る事で対応していた。
最近ではCSSの:hover疑似クラスを使う方が多くなったが、いずれにしても2枚の画像を作らなければならない。
写真が増えたり変更されたりした時はその度にその作業は必要になってくる。
しかも画像によって陰の大きさや濃さがバラバラになるとみっともないので作った方法はしっかりメモしておかなくては駄目だ。
今回はシャドウ用のpng画像を6枚作り、それらをCSSの'position'プロパティや'top'、'left'（'bottom'、'right'）プロパティを使い、適切な場所に配置して実現させている。
ソースコードは以下のような感じだ（prototype.jsが必要）。
Webページを構成する各要素はドキュメントの流れに従い通常は上から下へ、左から右へと配置されていく。
そして要素の種類によって改行が入ったり入らなかったりする。
CSSを使う事でこの流れに逆らったレイアウトを実現する事が出来る。
どんな要素も（表示されている以上は）ドキュメント上でのX座標とY座標を持っているが、CSSでの'positionプロパティ'を'static'以外にする事でこれら座標を変える事が出来るようになる。
Javascriptから（prototype.jsを使い）要素をドラッグ可能にするスクリプトを書いてみた。
ソースは以下のような感じだ。
Webページ内である要素に透明効果を適用したい場合、CSSで調整する事が出来る。
ただし、ブラウザによってCSSのプロパティ名が異なってくるためそれらを考慮して記述していかなければならない。
Javascriptを使って同じように透明度を調節する事が出来るが、これらも結局はCSSの"opacity"プロパティや"-moz-opacity"プロパティ、もしくは"filter"プロパティをいじっているにすぎない。
prototype.jsを使うと同じ関数でこれらプロパティを操作できる。
RGBカラーを表現する時
CSSで"position"というプロパティがあるが、これはボックスを配置する時の基準位置を決める為のプロパティだ。
'static'、'relative'、'absolute'、'fixed'というプロパティ値がある。
ここを'static'以外の値にした時に今度は'top'、'right'、'bottom'、'left'というプロパティを指定できるようになる。
webページを作っている時、情報量が多くなるとどうしても縦にスクロールしなければならなくなる。
そんな時にある部分だけはスクロールした後も表示しておきたい時、
"フレームに分けてその部分だけは常に表示させておく"やり方や
"CSSのpositionプロパティをfixedにしておく"やり方があるが、
どちらも'なんだかなあ〜'という気がする。
特にIE6なんかはfixedをサポートしていなかったりするし。
というわけでJavascriptで要素をスクロールさせるスクリプトを書いてみた。
Javascriptの本を読んでいると'配列のようなオブジェクト'という文言をよく見かける。
関数の中で参照可能なargumentsというオブジェクトやdocument.getElementsByTagNameメソッド呼び出しによって得られる'NodeList'というオブジェクトなんかがそうだ。
例えばこれらのオブジェクトに対して
var ele = document.getElementsByTagName('li');
alert(ele instanceof Array);
こんな風にinstanceof演算子を適用しても'false'になってしまう。
なぜ'配列のような'と言われるかというと
