JavaScriptでCSSのスタイルを変更するには?

KSX [E-Mail] 2000/05/19(金) 03:15:17
どうも、こんにちは
今、ホームページをリニューアルしようと思っているのですが、
メニューのリンクを、変化させようと思っています。
どのように変化させようかというのは、マウスのカーソルが
リンクのテキストの上に乗っかると、CSSのSTYLEを変化させて
見え方を変化させようと思っています。
つまり、Mouseのイベントハンドらを用いて、HTMLのソースの部分を
切り替えようと思っています。

本や、ページをいろいろとチェックしたのですが、ロールオーバーで
イメージをきりかえるのはたくさん載っているのですが、ソースをきり
かえるのはなくて困っています。
また、JavaScript自体が表示することを前提として作ってるようで
表示されないところを変化させる方法が、わかりません。
まだまだ勉強不足なのですが、よろしくお願いします。

偽 2000/05/19(金) 04:07:22
＞マウスのカーソルが
＞リンクのテキストの上に乗っかると、CSSのSTYLEを変化させて
＞見え方を変化させようと思っています。
これを実現するだけならば、CSS2のhover疑似クラスを使った方が簡単ですが。
＃今のところ、IEしか対応してないのが残念。(Mozilla5,Netscape6はOK?)

dddd 2000/05/19(金) 05:50:27
>(Mozilla5,Netscape6はOK?)
OKだけどZDNetとか文法違反で反応しなくてZiff Davisも大喜び(謎)。

Syn [E-Mail] 2000/05/19(金) 14:31:46
あえて hover 擬似クラスを使わないのも一興ですか :-)
IE 限定でよければ、

<script type="text/javascript">

</script>

(…中略…)

<span onmouseover="changestyle('color: #0000FF;');"
onmouseout="changestyle('color: #FF0000;');">
ほげほげ
</span>

ってのができるんじゃないでせうか。検証してませんが。
これを応用すれば mouseover したリンクテキスト以外の部分のス
タイルを変更したりとか、 hover 擬似クラスでは不可能なことも
できますね。

Maja [E-Mail] 2000/05/20(土) 11:34:39
DHTMLですね。
IE4以上なら直接スタイルを書き直せます。
document.all.タグにつけたid.style.変更したいスタイル = その値
NN4以上では変更方法も違い、スタイルを変更しても書き直しは起こりません。（一部背景、サイズなど除く）
よって、レイア（position:absoluteを指定したDIVふくむ）内のHTMLを書き直す必要があります。
どちらを対象にしてますか？
cross browser(Version4以上だけで)を目指すなら
position:absoluteを指定したDIVを生成しておいて、HTMLを書き直すとよいでしょう。
ブラウザによって記述は違いますので、判定も必要となります。
また、mouseoverをハンドルするレイアを重ねて生成しておく必要もあり、結構面倒です。
と、ここまで聞いてやる気があるのなら
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Default.htm
あたりが参考になると思いますよ。

KSX 2000/05/24(水) 12:28:46
[[解決]]
どうも、皆さんありがとうございました。
いろいろ試したはいたんですが、
position:absolute
が、必要だったと言うことを知らなかったために
表示ができませんでした。
ですが、ＩＥで有効なフィルター(アルファ)が効かない為に
(しかも、ネスケだと、それ以外のスタイルに対する命令も無視されてしまう)
別々のページを作ろうと思います。
様々な情報ありがとうございました。

[上に] [前に] [次に]