テーブルでセルがなんこかあり その各セルを触ったときに
背景色を変えたいのですが うまくいきません。
色はCSSで定義してMouseOverでそれを呼び出して なんて
感じじゃだめなんですかねぇ
マイクロソフトのHPの左がわみたいなイメージです。
例があれば ありがたいです
ご存知の方 おられましたら よろしくおねがいします。

A 回答 (3件)

JavaScriptを使ってできます。


あらかじめテーブルを作っておいて、

<TD bgcolor="#ここにマウスが触れる前の色" onmouseover="this.style.backgroundColor='#ここにマウスが触れた時の色" onmouseout="this.style.backgroundColor='#ここにマウスが触れた後、マウスがセルから外れた時の色">
</TD>

・・・とセルごとにこれを繰り返します。

例)
<Table>
<TR>
<TD bgcolor="#FFFFFF" onmouseover="this.style.backgroundColor='#00FFFF'" onmouseout="this.style.backgroundColor='#FFFFFF'">
ヽ(´ー`)ノこんな感じ?
</TD>
</TR>
</Table>

まあこんな感じで後は適当にアレンジを・・・
また分からない事があれば聞いてください。
    • good
    • 0
この回答へのお礼

解決しました どうもありがとうございました!

お礼日時:2001/08/27 01:19

JavaScriptでスタイルにアクセスする方法でしたら



<span onMouseOver="this.style.backgroundColor='orange';"
onMouseOut ="this.style.backgroundColor='white';">
On Mouse Over Here!</span>

基本的にはこんな感じでしょう(注:Netscape4.*では機能しません)

参考URL:http://tohoho.wakusei.ne.jp/js/style.htm
    • good
    • 0

CSSで出来るのは




<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
a:hover { background-color: #ffccaa; }
//-->
</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<a href="#">OnMouseOverHere</a>
</body>
</html>


と、こんな感じのモノになります。
試してみてください
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q動詞一覧・目的語一覧・補語一覧みたいな英語の詞・語ごとにずらーと並んだ

動詞一覧・目的語一覧・補語一覧みたいな英語の詞・語ごとにずらーと並んだサイトってないですか?

Aベストアンサー

動詞はともかく「目的語」とは「補語」というのは文における働きなので, そんな一覧を求めることがそもそも全く無意味.

QHTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト

罫線の行<tr>~</tr>に、マウスが乗ると
ハイライトされるような仕組みのサンプルプログラム使い、
具体的には、こうして、highlight.htcを呼び出しています。
<tr style='behavior:url(highlight.htc);'>

◆質問◆
ところが、↓のようにすると、
(1) Aにカーソルを乗せる⇒A、Bにハイライト
(2) Bにカーソルを乗せる⇒Bだけにハイライト
(3) Cにカーソルを乗せる⇒Cだけにハイライト
となりますが、(1)のケースでもBだけにハイライトを当てる
(=セルAにだけは常にハイライトをあてない)
ようにするのはどうしたらよいでしょうか。

よろしくお願い致します。

<table>
<tr style='behavior:url(highlight.htc);'>
<td rowspan="2"></td>
<td></td>
</tr>
<tr style='behavior:url(highlight.htc);'>
<td></td>
</tr>
</table>

┏━┳━┓
┃ ┃B┃
┃A┣━┫
┃ ┃C┃
┗━┻━┛

-----------------------------highlight.htc

<script type="text/javascript">
<!--
attachEvent("onmouseover", detailTr_onmouseover);
attachEvent("onmouseout", detailTr_onmouseout);
function detailTr_onmouseover() {
this.style.backgroundColor='#000000';
}
function detailTr_onmouseout() {
this.style.backgroundColor='transparent';
}
-->
</script>

------------------------------

罫線の行<tr>~</tr>に、マウスが乗ると
ハイライトされるような仕組みのサンプルプログラム使い、
具体的には、こうして、highlight.htcを呼び出しています。
<tr style='behavior:url(highlight.htc);'>

◆質問◆
ところが、↓のようにすると、
(1) Aにカーソルを乗せる⇒A、Bにハイライト
(2) Bにカーソルを乗せる⇒Bだけにハイライト
(3) Cにカーソルを乗せる⇒Cだけにハイライト
となりますが、(1)のケースでもBだけにハイライトを当てる
(=セルAにだけは常にハイライトをあてない)
よう...続きを読む

Aベストアンサー

<body>
<table>
<tr style='behavior:url(highlight.htc);'>
<td rowspan="2" style="background-color:#FFFFFF">A</td>
<td>B</td>
</tr>
<tr style='behavior:url(highlight.htc);'>
<td>C</td>
</tr>
</table>
</body>
</html>

Q新着順や新着順一覧を英語で書くと??

英語で新着順ってなんて書きますか?
HPに写真を載せていて
写真を新着順一覧に表示するスペースの名前を英語にすると、なんて書けばいいんでしょうか?
新着順や新着順一覧…という感じでお願いします。

Aベストアンサー

Sort by Date (日付順)というリンクが多いですね。

順番の切り替えに latest to earliest (最新から最古へ) とその逆を書いてある場合や、上向き三角▲と下向き三角▼のボタンを使っているところもあります。

到着というのをわざわざ盛り込んでいるところは少ないですが、長くても良いならば、Sort by Date arrived か Sort by Arrival Date とも書けます。

今回に写真という語も入れようとすると、Photos sorted by date (latest to earliest) のようになって見た目は冗長になってしまいます。

Qテーブルセルの列での背景色の変更

3行3列のtableで各セルにマウスカーソルをのせた時に
そのセルの列すべての背景色を変えるJavaスクリプトを
作成したのですが、うまく動作しません。
どこか間違っているでしょうか。
(たとえば、2-2のセルにマウスカーソルをのせると
 1-2、2-2、3-2のセルの背景色をかえるスクリプトです)

●Java
function onColor(col) {
document.all[col].bgColor = '#00ffff';
}
function outColor(col) {
document.all[col].bgColor = '#ffffff';
}

●HTML
<TABLE BORDER="1" BGCOLOR="#ffffff" cellpadding="0" cellspacing="0">
<colgroup id="a1" span="1" width="25" align="center">
<colgroup id="a2" span="1" width="25" align="center">
<colgroup id="a3" span="1" width="25" align="center">

<tr align="center">
<td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">1-1</td>
<td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">1-2</td>
<td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">1-3</td>
</tr>

<tr align="center">
<td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">2-1</td>
<td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">2-2</td>
<td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">2-3</td>
</tr>

<tr align="center">
<td onMouseOver="javascript: onColor('a1');" onMouseOut="javascript: outColor('a1');">3-1</td>
<td onMouseOver="javascript: onColor('a2');" onMouseOut="javascript: outColor('a2');">3-2</td>
<td onMouseOver="javascript: onColor('a3');" onMouseOut="javascript: outColor('a3');">3-3</td>
</tr>
</TABLE>

3行3列のtableで各セルにマウスカーソルをのせた時に
そのセルの列すべての背景色を変えるJavaスクリプトを
作成したのですが、うまく動作しません。
どこか間違っているでしょうか。
(たとえば、2-2のセルにマウスカーソルをのせると
 1-2、2-2、3-2のセルの背景色をかえるスクリプトです)

●Java
function onColor(col) {
document.all[col].bgColor = '#00ffff';
}
function outColor(col) {
document.all[col].bgColor = '#ffffff';
}

●HTML
<TABLE BORDER="1" BGCOLOR="#ffffff" cel...続きを読む

Aベストアンサー

document.allはやめてdocument.getElementByIdでやりましょう。
またbgColorではなくstyleのbackgroundColorをかえてやりましょう

function onColor(col) {
document.getElementById(col).style.backgroundColor = '#00ffff';
}
function outColor(col) {
document.getElementById(col).style.backgroundColor = '#ffffff';
}

QWindows7でプログラム一覧が英語表示される

Windows7でプログラム一覧が英語表示される

Windows7 Professionalを使っています。
最近気がついたのですが
普通ならプログラム一覧で
「アクセサリ」と表示されるはずの部分が
英語で「Accessories」と表示されるようになっていました。
メニュー自体もすべて英語で
たとえば「電卓」なら「Calculator」といった具合です。

ちなみに「ゲーム」は「Games」
「既定のプログラム」は「Default Programs」となっていますが
「スタートアップ」はそのままです。

ソフト自体に不具合はないのですが
何となく気になります。
かといって
名前を一つ一つ変更するのも面倒です。
簡単に元へ戻す方法がお分かりでしたら
よろしくお願いいたします。

Aベストアンサー

詳しくは分かりませんが、C:\Users\○○\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\AccessoriesにあるはずのDesktop.iniをうまく設定すればよいと思います。ちなみに○○はユーザー名です。

QonFocus="Calendar(this) →Mouseover

下記はテキストボックスをクリックするとCalendarのポップアップが出る仕組みなのですが、
<FORM name="main">
<INPUT TYPE="TEXT" NAME="Field" SIZE="12" onFocus="Calendar(this)">
</FORM>

これを
<INPUT TYPE="button" VALUE="カレンダー" onClick="Calendar(this)">
のようにボタンをクリックするとポップアップさせたいのですが、こうするとblankのポップアップになってしまいます。

#(this)の使い方もよくわからない素人です。

Aベストアンサー

<INPUT TYPE="TEXT" NAME="Field" SIZE="12" onFocus="Calendar(this)">
<INPUT TYPE="button" VALUE="カレンダー" onClick="Calendar(this)">
↑ NAME="Field" が送信されていないのが原因だと思われます。

function Calender の内容が理解出来るのでしたら、

Calendar(this,Field);
という形で、
NAME も送信して、

function Calender(this受信元,NAME)
という形で受信し、
もう一度確認してみてはどうでしょう?

Qヘンな日本語英語の一覧があるサイト

ヘンな日本語英語の一覧があるサイトなんてご存知ありませんか?
ピアース、ピーマン、ビデオデッキ、シャーペンなど、実際には使われない英語がたくさん日本で使われていたりしますが、こういうリストが載っているサイトを探しています。

ご存知の方いらっしゃいましたら教えて下さいっ!
よろしくお願いしまっす!

Aベストアンサー

洋サイトですが

参考URL:http://www.engrish.com/

Qセルの背景画像の変更

リンクに触ると背景画像をp15.jpgに変更したいのですが
よろしくお願いします。
<table>
<tr><td>123</td>
<td background="p10.jpg"><a hrf="abc.html">abc</A></td>
<td>456</td>
</tr></table>

Aベストアンサー

<table>
<tr><td>123</td>
<td background="p10.jpg"><a hrf="abc.html" onMouseOver="setpbg(this,'p15.jpg')" onMouseOut="setpbg(this,'p10.jpg')">abc</A></td>
<td>456</td>
</tr></table>
<script>
function setpbg(oj,f){
parentSearch(oj,'TD').style.backgroundImage='URL('+f+')';
}
function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}//親node探し
</script>

Q色の名前は、日本語と英語のどちらを多く使う?・・・例えば「緑」と「グリーン」

「緑」と「グリーン」、「灰色」と「グレー」・・・

色の名前を言う時、日本語と英語のどちらを多く使いますか?

例えば、
・服の色は?
・車の色は?
・携帯機器(電話・プレイヤーなど)の色は?
どちらの表現を多く使いますか?

又、その他
「このもの(種類)は、日本語(英語)で言う」
「この色は、日本語(英語)で言う」
「殆ど、日本語(英語)で言う」
といったご回答も、歓迎します!

Aベストアンサー

じゃあいきましょか。英語です。私ら。

ピンク、ローズピンク、チェリーレッド、マローピンク、チリアンパープル、コスモス、チェリーピンク、ベビーピンク、ラムプラーローズ、ラズベリー、ローズマダー、カーマイン、パーシアンローズ、プラム、ガーネット、ピアニーレッド、プリムラ、コーラル、サルビア、マゼンダ、バーミリオン、シグナルレッド、ホビーレッド、ロブスター、ケチャップ、ファイヤー、スカーレット、バーミリオンレッド、ルビー、オペラ、ブリック。ベルベット。
以上赤系統。
日本にも古来のゆかしき呼び方はありますが、この点に関しましては英語に軍配をあげます。

グレーといいましても、シルバーホワイトグレー、パールグレー、オレンジグレー、イエローグレー、ブルーグレー、ピンクグレー、フレンチグレー、ミディアムグレー、グレー、ダークグレー、カーボングレー、チャーコールグレー、…あぁしんど。
私は日本男児ですが色名は英語です。

Qmouseoverで、リンクをずらす。

こんばんわ。お世話になっています。
mouseoverについて質問させてください。

◆やりたい事
よくCSSで、マウスが上に来ると押し込むようにずれるタグってありますよね。
a:hover{color:#000;text-decoration : underline;position:relative;top:1px;left:1px;}
こういうのですが、これを一番簡潔にJSで表示するにはどうすればいいのでしょうか?

◆状況
今、リンク集を作っています。
テーブルタグで横4つのセルの中に一個一個バナーを入れているのですが、
バナーがあるサイト様は普通にa:hoverでバナーが押し込まれているのですが、

バナーがないサイト様のリンクを

セルの中にDIVを作って
その背景画像にバナー台を貼り付けて、
その中にサイト名を書くことで
バナーに見せかけてたりしています。
(他のサイト様のバナーを勝手に作るのは失礼ですし…(ρ゜∩゜))

で、そのDIVにonmouseでリンク張っていたりするんで、もちろん動かないわけだったりします。
それを、一番簡潔に他のリンクと同じような見た目に変えるのはどうすればいいでしょうか?

また、それを同ページに外部スクリプトでランダムでも表示したいので
(このサイト様のスクリプト
http://beginners.atompro.net/htm/js/randoml.shtml)
なるべく、複数に対応していて、一行簡潔なものがいいのです。
***************************
mouseoverでcssのクラス指定なんかが出来たら楽かと思うんですが、自分で調べたところID指定が必要みたいで…。
やりたいことが伝わりにくくてスイマセン。
何かよい方法がございましたら、おしえてやって下さい。

こんばんわ。お世話になっています。
mouseoverについて質問させてください。

◆やりたい事
よくCSSで、マウスが上に来ると押し込むようにずれるタグってありますよね。
a:hover{color:#000;text-decoration : underline;position:relative;top:1px;left:1px;}
こういうのですが、これを一番簡潔にJSで表示するにはどうすればいいのでしょうか?

◆状況
今、リンク集を作っています。
テーブルタグで横4つのセルの中に一個一個バナーを入れているのですが、
バナーがあるサイト様は普通にa:hoverでバナ...続きを読む

Aベストアンサー

DIVでの画像処理の方法が、どの様にされているのか
不明なので、
とりあえず当方での対応方法を例示します。

<STYLE TYPE="text/css">
<!--
A:hover{
background-color:#ccffff;
text-decoration:underline;
}
A SPAN{
background-color:#008080;
text-decoration:none;
padding:3px 8px 3px 8px;
text-align:center;
white-space:nowrap;
}
A:hover SPAN{
background-color:#00cc99;
text-decoration:none;
position:relative;
top:3px;
left:3px;
}
-->
</STYLE>

<A HREF="http://oshiete.goo.ne.jp/"><SPAN>教えて!goo</SPAN></A>


以上を元に改良をすれば、
望む物になる・・・かも。
参考にならないかもしれませんが、とりあえず一例として。

DIVでの画像処理の方法が、どの様にされているのか
不明なので、
とりあえず当方での対応方法を例示します。

<STYLE TYPE="text/css">
<!--
A:hover{
background-color:#ccffff;
text-decoration:underline;
}
A SPAN{
background-color:#008080;
text-decoration:none;
padding:3px 8px 3px 8px;
text-align:center;
white-space:nowrap;
}
A:hover SPAN{
background-color:#00cc99;
text-decoration:none;
position:relative;
top:3px;
left:3px;
}
-->
</STYLE>

<...続きを読む


人気Q&Aランキング

おすすめ情報