WEB相談室

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

タイトル:リンクを張ったセルの背景色

0:[投稿] orereo [MAIL] [2005/01/05 15:35 ][環境:Windows, IE わからない]

はじめまして、orereoと言います。
こちらの過去ログを見ましてセルにリンクを張り、
onmouseoverを使ってマウスが乗ると背景色が変わる技を学びました。
現在フレームを使用してサイトを構築していて、
ここでありがたく上の技を使わせてもらっています。
そこで現在悩んでいますのが、セルのリンクをクリックした場合に
セルの背景色を変化させたまま、もしくは別色で保ちたいのです。
簡単に言いますとクリックしたところが分かるようにしたいのです。
現状
<td onClick="parent.mainFrame.location.href='hoge.php'" style="cursor: hand" onmouseover="this.style.backgroundColor='#CCCCCC'" onmouseout="this.style.backgroundColor=''"><div align="center">あ</div></td>
このように設定していて、他のイベントハンドラなども試してみたのですが、思った動きはできませんでした。
どなたかご存知の方いらっしゃいましたらご教授いただけませんか。
伝わりづらいとは思いますがどうぞよろしくお願いします。


1:[回答] ゆり [2005/01/05 17:06 ]

クリックしたかどうかをフラグを使って判別するといいです。
説明しづらいので書いちゃいますけど。

   <script language="JavaScript" type="text/javascript">
   <!--
   var flg = false;
   function mouseClick(obj) {
       if(!flg){    // クリックしたときの色
           obj.style.backgroundColor='#CCCCCC';

       }else{      // もう一度クリックしたときの色(元の色)
           obj.style.backgroundColor='';
       }

       flg = flg ? false : true; // フラグの値を変更する
   }

   function mouseOut(obj) {
       if(!flg){    // クリックせずマウスを放したときの色
           obj.style.backgroundColor='';
       }
   }
   //-->
   </script>

これでonClick="mouseClick(this)" と
onmouseout="mouseOut(this)"をセルに書いて下さい


2:[質問] orereo [MAIL] [2005/01/06 11:58 ]

ゆりさん
早速の回答本当にありがとうございます。
試してみたところ、なんとなくできたのですがリンクの設定がうまくいかなかったため、
自分なりに
<td onClick="mouseClick(this)" style="cursor:hand" onmouseover="this.style.backgroundColor='#99CCCC'" onmouseout="mouseOut(this)"><div align="center"><a href="hoge.php" target="mainFrame" style="width:100%; height:100%;">あ</a></div></td>
このような感じでリンクを設定しましたところ、クリックすると色は変わるのですが、他のセルを触るとクリックしてなくても色が変わってしまい、変わったままになってしまいます。
<a>タグを使わずにセル自体にリンク設定ができる方法などあるのでしょうか。
質問ばかりですがどなたかご教授お願いいたします。


3:[質問] orereo [MAIL] [2005/01/06 12:14 ]

すいません、説明不足でしたが
上でのリンクを張っている同じテーブル内に"あ"〜"ん"までの50音表でリンクを作成しています。


4:[回答] コトノハ [2005/01/06 15:54 ]

<a> でなくとも、クリックイベントを拾って画面を遷移させる事は出来ると思います。
例えば、<span> や <div> なんかでも可能ですよね。

それから、色の変更はスタイルシートを用いては如何でしょうか。

object.className = "";

とすると、そのオブジェクトの class が変更できます。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World