html作成について質問です。

テーブル内のTDの部分にマウスをのせるとTD背景の色が変わり、文字色も変わり、そのTD部分をクリックすると別窓でリンクを開くようにするにはどうすればいいのでしょうか。

回答の条件
  • 1人5回まで
  • 登録:2011/06/19 16:22:54
  • 終了:2011/06/19 22:26:31

ベストアンサー

id:minumteh No.4

minumteh回答回数119ベストアンサー獲得回数172011/06/19 18:38:57

ポイント51pt

JavaScriptを切っている人もきっといますから・・・

こうするとCSSだけでできました(Firefoxで確認)。

<style type="text/css">
table, td{
border:1px solid black;
padding:0;
}
.tdlink a{
height:100%;
display:block;
padding:5px;
}
.tdlink a:hover{
color:white;
background:skyblue;
}
</style>

<table>
<tr>
<td class="tdlink"><a href="http://q.hatena.ne.jp/" target="_blank">人力検索はてな</a></td>
<td class="tdlink"><a href="http://q.hatena.ne.jp/list" target="_blank">人力検索はてな<br>質問一覧</a></td>
</tr>
</table>
id:numb08

ご回答ありがとうございます。完璧にできました。ほんとうにありがとうございました。

2011/06/19 22:25:34

その他の回答(3件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932011/06/19 16:50:43

ポイント25pt

マウスを乗せると色が変わるようにするには、CSSでhoverを設定します。

別窓でリンクの部分がよくわからないのですが、aタグのリンクがある場合は< a target="_blank"にすればいいです。

下のサンプルでは純粋にtdをクリックした場合に別窓が開くようにしました。onclick属性を使わず< script>で汎用的に書くことも出来ます。


デモ: http://jsfiddle.net/BPG45/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script>
</script>
<style>
table, td {
  border: 1px solid black;
}
td:hover {
  background-color: pink;
  color: red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="javascript:window.open('http://www.google.co.jp/')">a</td>
<td onclick="javascript:window.open('http://q.hatena.ne.jp/1308468173')">b</td>
</tr>
</tbody>
</table>
</body>
</html>
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492011/06/19 16:53:55

ポイント25pt

【1】マウスをのせると背景の色が変わり、文字色も変わり

スタイルでhoverを用います

下記では、td全てが対象の場合をまずは指定し、次にclass="a"の場合を指定し、最後にid="b"の場合を指定しています

<html>
<head>
    <style>
        td { color:red; background-color:blue; }
        td:hover { color:blue; background-color:red; }
        td.a { color:black; background-color:white; }
        td.a:hover { color:white; background-color:black; }
        #b { color:pink; background-color:yellow; }
        #b:hover { color:yellow; background-color:pink; }
    </style>
</head>
<body>
    <table>
    <caption></caption>
    <thead>
        <tr><th>見出し1</th><th>見出し2</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1の1</td>
            <td class="a">データ1の2</td>
        </tr>
        <tr>
            <td>データ2の1</td>
            <td class="a">データ2の2</td>
        </tr>
        <tr>
            <td id="b">データ3の1</td>
            <td>データ3の2</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

 

【2】クリックすると別窓でリンクを開く

スクリプトを使います

	<td onclick="javascript:window.open('URL')">データ1の1</td>

ウィンドウの大きさなども指定できますので、上記で開くことが確認できたら、下記のページを参照してみてください

http://www.tohoho-web.com/js/window.htm

id:ween No.3

ween回答回数78ベストアンサー獲得回数72011/06/19 17:21:20

ポイント25pt

IEの場合ですが、styleのhoverは使えませんのでJavaScriptで

<td onmouseover="javascript:this.style.backgroundColor='#ff0'" onmouseout="javascript:this.style.backgroundColor=''">

onmouseOverとonmouseOutで設定する必要があります。

id:minumteh No.4

minumteh回答回数119ベストアンサー獲得回数172011/06/19 18:38:57ここでベストアンサー

ポイント51pt

JavaScriptを切っている人もきっといますから・・・

こうするとCSSだけでできました(Firefoxで確認)。

<style type="text/css">
table, td{
border:1px solid black;
padding:0;
}
.tdlink a{
height:100%;
display:block;
padding:5px;
}
.tdlink a:hover{
color:white;
background:skyblue;
}
</style>

<table>
<tr>
<td class="tdlink"><a href="http://q.hatena.ne.jp/" target="_blank">人力検索はてな</a></td>
<td class="tdlink"><a href="http://q.hatena.ne.jp/list" target="_blank">人力検索はてな<br>質問一覧</a></td>
</tr>
</table>
id:numb08

ご回答ありがとうございます。完璧にできました。ほんとうにありがとうございました。

2011/06/19 22:25:34
  • id:windofjuly
    うぃんど 2011/06/19 17:37:15
    >IEの場合ですが、styleのhoverは使えません
    それはIE6(もしくはIE6互換モード)までの話なので、
    いまさらIE6を対象に加えるかどうかという話になるでしょうね
    http://msdn.microsoft.com/ja-jp/library/ee371281%28v=expression.40%29.aspx

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません