WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:おんまうす?

0:[投稿] ゆ〜じ [MAIL] [2002/03/11 09:17 ][環境:WIN+IE わからない]

少し前に以下の様なすくりぷと教えてもらったんですけど・・・

<SCRIPT>
<!--
    function func(tar) {    document.getElementById(tar).style.backgroundColor = "red";    
                document.getElementById(tar).style.Color = "black";}
    function def(tar) {    document.getElementById(tar).style.backgroundColor = "";    
                document.getElementById(tar).style.Color = "";}//
-->
</SCRIPT>
<TABLE BORDER=1>
<TR ID="tr1" onMouseOver="func('tr1')" onMouseOut="def('tr1')">
        <TD>            リンク1        </TD>
        <TD>            あああさんのページ        </TD></TR>
<TR ID="tr2" onMouseOver="func('tr2')" onMouseOut="def('tr2')">
        <TD>            リンク3        </TD>
        <TD>            いいいさんのページ        </TD></TR>
<TR ID="tr3" onMouseOver="func('tr3')" onMouseOut="def('tr3')">
        <TD>            リンク3        </TD>
        <TD>            うううさんのページ        </TD></TR>
</TABLE>

え〜と
[A:hover]ってあるんだから
[td:hover]って出来ないんですか?って質問で
このスクリプトが作られた訳ですが・・・

実際作ってもらったのはいいんだけど
背景色以外の変更がよく分からなくて・・・

で・・・なおかつ
色々書くのでややこしいので
onMouseOverで外部スタイルシートの切り替えって出来ませんか?

何かいい案があったら教えてください。


1:[回答] 管理人 [2002/03/11 15:10 ]

>[td:hover]って出来ないんですか?って質問
N6だとイマイチだけど利いている模様です。
hover疑似要素は、仕様的に全要素適用みたい。


2:[質問] ゆ〜じ [2002/03/11 18:39 ]

ん?
N6でイマイチってどんな感じなんでしょうか?

それと、背景色以外の変更の仕方って
どうすれば・・・?


3:[回答] 管理人 [2002/03/11 19:35 ]

>N6でイマイチってどんな感じなんでしょうか?
セル内の文字にonmouseoverすると無反応だけど、文字以外(余白)だと背景色が変わります。

背景色以外は、何がご希望なのですか?


4:[質問] ゆ〜じ [2002/03/12 08:08 ]

書いたとおりなんですけど
外部スタイルシートを切り替えたいんです。

例えばしょーもない事ですけど・・・
カーソルが合わさった時にスクロールバーが変わるとか(笑
ってより背景色から全て変えたいんです。


5:[回答] 管理人 [2002/03/12 08:56 ]

以下のページを参考になんとかするとか。
http://www.parkcity.ne.jp/~chaichan/src/javascdom03.htm
http://www.parkcity.ne.jp/~chaichan/src/javasc29.htm
http://www.parkcity.ne.jp/~chaichan/src/cssmain.htm


6:[回答] ween [2002/03/12 09:38 ]

CSS ファイルごと切り替えたいとかそういう話ならば、
document.styleSheets に入っている各要素 (link, style 要素) に対して
title 属性をチェックして disabled 属性を書き換えてやるとか。

<link title="A" href="a.css" type="text/css" rel="stylesheet" >
<link title="B" href="b.css" type="text/css" rel="alternate stylesheet" >
<link title="C" href="c.css" type="text/css" rel="alternate stylesheet" >

<script type="text/javascript">
function setStyleByTitle(title){
 var stylesheets = document.styleSheets;
 if(stylesheets)
   for(var i=0; i<stylesheets.length; i++)
     if(stylesheets[i].title)
       stylesheets[i].disabled = stylesheets[i].title!=title;
}
</script>

<table>
<tr>
<td onmouseover="setStyleByTitle('A')">...</td>
<td onmouseover="setStyleByTitle('B')">...</td>
<td onmouseover="setStyleByTitle('C')">...</td>
</tr>
</table>

代替スタイルも全てロードしないと内容のレンリングをはじめないブラウザもあるので
ファイル数や内容が多い場合には注意が必要ですが。


7:[回答] ween [2002/03/12 09:45 ]

>>6
間違えた。失礼。
誤: disabled 属性
正: disabled プロパティ


8:[回答] ゆ〜じ [2002/03/12 21:02 ]

>管理人さん
1番上のリンク先のはいいお手本になりそうです。
2番目は・・・スクリプト長すぎてお馬鹿さんには理解不能です(汗+泣

>weenさん
あー出来てますね。
スバラシイ・・・でもカーソル外れても
効果が維持されますよね?

それってどうなんだろう?
管理人さんからご紹介の1番目のリンク先みて
多少トライしてみます。

ありがとうございます!


9:[お知らせ] 匿名希望 [2002/03/13 00:48 ]

>>1
>hover疑似要素

...?


10:[質問] ゆ〜じ [2002/03/25 01:32 ]

weenさんのスクリプトを参考にさせてもらって
いま手探り状態でやってるんですけど・・・

読み込み時&再読み込み時に
マウスをのせても無いのに勝手に
『onmouseover』の状態になってしまうんです・・・
そこで、『onmouseout』の状態で初期CSSを
読み込ませるようにしてみたんですけど
どっちにしても、勝手に『onmouseover』のCSSが適用されてるんです

原因ってなんだかわかりますか?


11:[回答] 匿名希望 [2002/03/25 09:46 ]


http://www.w3.org/TR/html4/types.html#type-links
http://www.w3.org/TR/html4/present/styles.html#h-14.4


あたりを読んで修正した後、スクリプトの最後にでも

setStyleByTitle('A');

を書き加えればいい。


12:[質問] ゆ〜じ [2002/03/26 02:40 ]

あははは・・・(汗
読める訳ないっす

でも、<BODY ONLOAD="setStyleByTitle('')">ってやったら
なんとかなりました。

んで、また質問ですけど
かるーい物は外部でなく実装のCSSでなんとかしたいんですけど
その場合ってどーすればいいでしょう?


13:[回答] sage [2002/03/29 10:54 ]

>>5
を全読すべし。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World