-DHtml Tips-

-DHtml Tips-

NN4.0のタグ操作について[NN4]
hoverについて[IE4]
positionについて[IE4/NN4]
cursorについて[IE4]
page-enter[IE4]
Fullscreen[IE4] -new

NN4.0では、<LAYER>の座標を自由に配置できることは有名ですが、その他のHTMLタグについても操作出来ることはあまり知られていません。 NN4.0ではタグにIDとスタイル属性"position"を付けることによって、そのタグを操作することが可能になります。

<SPAN ID="TAG1" STYLE="position:absolute"> Dynamic HTML </SPAN>
上記の様に記述すると、上記のタグ"TAG1"は、レイヤーオブジェクトを通してコントロールする事が出来ます。つまり、NN4.0においてはIDとポジション指定を付けたタグは、 <LAYER>と同じようにコントロール出来るのです。
これによって、同じタグをIE4.0とNN4.0で共有できるようになります。

■ hoverについて[IE4]

意外と知られてないスタイル属性ですが、これはかなり便利です。
これは、<A>タグに対して持つ属性ですが、 <HEAD>内でA:hoverと宣言することにより、マウスがリンクの上を通過したときのSTYLEを設定できます。
つまりJavaScriptを使わずに、リンクの上にマウスが乗ったときに、リンクのテキストの色を変えたり、サイズを変えることが出来ます。
<STYLE TYPE="text/css">

</STYLE>
こう記述することにより、<A>がhover状態の時に、リンクの色が赤となります。マウスが離れたときは元の状態に戻るので、いちいちonMouseoutを付けたりしなくていいのも便利です。それにJavaScriptを使わないので、エラーの心配もないですし、「JavaScriptが無効」の状態でも動くという、いいこと尽くめなのでお勧めです。
また、A.class:hover { }とも出来ますのでリンクタグ毎にClassを設定したりすることもできます。
ちなみにJavaCのページの各所で使われていますので参考にして下さい。
[追記]副作用
A:hoverを設定すると、IE3.0の場合バグのため、リンクの色がそのhoverで設定したものになってしまいます。つまり、上記のようにA:hover { color:red; }とした場合、そのページのリンクの色は赤色になってしまいます。これを防ぐには、スタイルシート内で、A:linkを追記すればＯＫです。(A:visitedなども)
もう一つ、ページ内でのローカルリンクというのがありますが、あれの<A NAME="name"> というとこに閉じタグ(</A>)を入れないと、後の文章が赤色になっちゃったりします。(IE3.0)

■ positionについて[IE4/NN4]

Dynamic HTMLでは、Style Sheetのpositionが非常に重要です。アニメーションする時などは特にです。 IE4.0では必ず必要な知識ですし、NN4.0では<LAYER>タグを使わない時などにも必要な知識です。
positionには、absolute,relative,staticがあります。

absolute:絶対的なポジションです。この属性が付いたタグはページの構築デザインに関係なく、自由なポジションを保持します。<LAYER>と同じ様なものです。
relative:相対的なポジションです。この属性が付いたタグはページの構築デザインと相関関係を持ちます。<ILAYER>と同じ様なものです。
static:静的なポジションです。この属性が付いたタグは、座標を移動させることが出来ません。普通のタグはこれです。
ここで重要なのは、absoluteとrelativeなので、この２つの違いについて。
absoluteの時、top,leftを指定してないと、その属性が付いたタグは、後に書いた、HTMLとページのデザインと一部重なってしまいます。よって、absoluteの時は座標(top,left)をしっかり指定する必要があります。
一方relativeの場合は普通のHTMLタグと同じように、ページのデザインにマッチして表示されます。つまりabsoluteと違い座標を気にする必要はありません。ただし、relativeな状態でtop,leftを指定すると、ページのデザインにマッチした場所からの座標となります。つまりabsoluteの場合は、top,leftイコール(=)ページ左上からの座標でしたが、 relativeの場合は、ページ左上からではなく、タグが表示された位置からの座標となります。
よって、より自由なポジショニングを行いたいときはabsoluteにして、簡単なアニメーションなどを行うときは、relativeがお勧めです。

■ cursor[IE4]

IE4.0のスタイルシートには、cursorという属性があります。これは、マウスのカーソルの設定をします。
<A href="http://www.yahoo.com" STYLE="cursor:help"> Yahoo </A>
上記の例だと、リンクに触れたとき、マウスカーソルが「？」なカーソルに変化します。他にも、「cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help」、などがあるので試してみて下さい。

■ page-enter[IE4]

ＭＯＰＡさんから教えていただいたものです。
これは、<META>タグで特定の記述をすることにより、ページロード時、ページアンロード時などに、ページ全体にFilter効果を付けられるようになります。
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=11)">
こう記述することにより、ページロード時にTransition filtersの効果がかかって表示されます。 http-equiv=のところには、以下のパターンがあります。
　Page-Enter：同サイト内から来たときのonLoad時
　Page-Exit：同サイト内の他ペ－ジへ行くときのonUnLoad時
　Site-Enter：別のサイトから来たときののonLoad時
　Site-Exit：別のサイトへ飛ぶときのonUnLoad時
そして、content=のところにFilterを記述すればいいわけです。
なお、ここで使用できるFileterは、Transition filtersとBlendです。

■ フルスクリーン[IE4]

完全なフルスクリーン表示を実現する方法です。 IE3.0ではある方法で実現出来たのですが、セキュリティーバグのため使えなくなってしまいました(^^;
IE4.0では従来と別のやり方でフルスクリーンでの表示が可能になりました。やり方は、windows.openメソッドの引数で、fullscreen=1と指定して渡せばフルスクリーン表示で新しいWindowが開く事になります。但し、注意が必要なのは一度Fullscreeでウインドウを開いた場合、 JavaScript側でウインドウを閉じてやらないと、ブラウザを終了しない限りフルスクリーン表示のままになり、ブラウザを強制的に終了させないと(ALT+F4)、手も足も出ない状態になります(^^;。

example: window.open(location,_name,"fullscreen=1");

-- Speciai Thanks Mr.Yokota

[ Back ]