« Flash 使ってます | メイン | Flashのスクリプト、 »
2005 - 2 /21
セルの背景色をマウスオーバー/アウト
リンク元はこちらの掲示板です。
対象のオブジェクトと色名を、引数渡ししてやれば良いかもしれませんね。
どれもみな同じ色にするのであれば、色名は引数を使う必要はないですが、こうした方が汎用的かな、と思ったので・・・。
<script language="JavaScript" type="text/JavaScript">
<!--
function bgColorChanger(o,hex){
o.style.backgroundColor = hex;
}
//-->
</script> <body> <table>
<tr>
<td onMouseOver="bgColorChanger(this,'#82c3d5');" onMouseOut="bgColorChanger(this,'');">uuh</td>
<td onMouseOver="bgColorChanger(this,'#cfcab4');" onMouseOut="bgColorChanger(this,'');">yah</td>
<td onMouseOver="bgColorChanger(this,'#afc032');" onMouseOut="bgColorChanger(this,'');">tah</td>
</tr>
</table>
</body>
実際のページだと、こんな感じ（←クリックで別ページ）で。
投稿者 hamayo : 2005年2月21日 21:45
トラックバック(0)
このブログ記事を参照しているブログ一覧: セルの背景色をマウスオーバー/アウト
このブログ記事に対するトラックバックURL: http://cosmeticpunk.sakura.ne.jp/mt/mt-tb.cgi/5
わーい hamayoさんのをコピペしてやってみたら私にもできました～。
テーブルの枠を表示させたり、テキストを変えたら面白い～。
これ使おう。。。♪
hamayoさん こんにちは。
>どれもみな同じ色にするのであれば、色名は引数を使う必要はないですが
では、そういう時はどう書けばよいですか？
教えていただけませんか。
気に入ったので使わせていただいたのですが
全てのセルに同じ色ナンバーを入れました。
引数が変数の一種であることは理解されていますか？。
引数がどのように移動して、どのように利用されているかを、順に追ってみましょう。
この関数では、二つの引数 o と hex を使います。
o は、オブジェクトを指します。
この場合 "this" という文字列が格納されます。
'this' は自分自身を表す、特殊な言葉です。
hex には、変化させたい色を、カラーコードで格納しています。
つまり 'hex' の部分を固定化してしまえばいいわけですね。
じゃー簡単だ、と思うかもしれませんが、実はブラウザによって background-color プロパティで使用する色の書き方が、若干異なるのです。
Mozilla系の場合、rgb(202, 207, 180) と行った形式か、色名を使わなくてはいけません。
IE では #123456 などのコードが使用できます。
つまりブラウザによって使用するスクリプトを変えなくてはいけないのです。
ブラウザ判別スクリプトを使って、IEはこっち、Mozillaはこっち、ってな具合で。
まぁWebページを作っていく限り、これは避けては通れない道です。
いずれはブラウザを判別して、処理を分岐させていくという、とってもめんどくさいことも必ずするときが来るでしょう。
とりあえずほかにそれを回避できる方法があるのであれば、今回のように回避するのは決して逃げではありません。
ところで今回のスクリプトですが、マウスポインタがハンドカーソルになるかならないかの違い以外は、CSSの疑似クラス hover を使うのと変わりないってことに、水仙さんは気が付いてらっしゃいますか？。
hamayoさん 答えて下さって有難うございます。
>引数が変数の一種であることは理解されていますか？。
引数はエクセルで「引き渡す数」とか習いましたけど
引数も変数も漢字の意味は分かりますが
数学的には恥ずかしいですがあまり分かりません。
>つまり 'hex' の部分を固定化してしまえばいいわけですね。
それは理解できます。
しかしコードの書き方が分からないので
function bgColorChanger(o,hex){
o.style.backgroundColor = hex;
hex = #82c3d5
な～んて色々書いてみましたが全然背景色が出ません。
JavaScriptが分からない者にはJavaScriptを使う資格はない
と言われたら返す言葉もありません。
無知だからこそ自分がどんなに恥ずかしいような質問をしているのかが分からないんですよね。
でも私はただ知りたかっただけなのです。
参考書をじっくり読んでみます。（まだ全然読んでいません）
そうしたら1年後には少しは分かるようになるかもしれないし
ならないかもしれませんが。
>CSSの疑似クラス hover を使うのと変わりないってことに、水仙さんは気が付いてらっしゃいますか？。
言われて気がつきました。
（コメント欄にコードを何度書いても表示できません。
uuh とか yah とか表示されるだけです。
頭がインフルエンザにかかったみたいに痛くなってきました。）
式は書いた順に評価されます
なので水仙さんが書いたコードでは、値が入っていない状態の変数 hex の値を利用しようとしていますよね？。
なので何も起きないのです。
さきに触れましたが、ブラウザによって別のスクリプトを用意する必要があります。
ブラウザ判別については、Google などで検索して勉強して下さい。
キーワードは "ブラウザ判別" "スクリプト" などで。
以下は簡易的にブラウザ判別を回避してごまかしているだけです。
返される背景色のパターンが分かっているので、それらの値を論理演算子の論理和を使って判断しています。
解説ページ
hoge
hamayoさん いつも大変お世話になり、有難うございます。
『解説』のページを読ませていただき印刷もしました。
htmlファイルにコピーもしました。
最初のやり方で背景色が表示されていたのが表示されなくなりました。
私には難しすぎます。
理解することが大切なのは分かりますが、私には無理です。
この問題が理解できるくらいなら私はもう少し違った人生を歩んできたと思います。
このblogをご覧になっている人たちは「水仙は頭悪いな～」って思ってみえるでしょう。
不出来な生徒ほど教えるのは大変でしょうね。
申し訳ありません。
お疲れさまでした。