人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: numb08
●カテゴリ:コンピュータ インターネット
✍キーワード:HTML クリック マウス リンク 作成
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Cherenkov
●25ポイント

マウスを乗せると色が変わるようにするには、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>

2 ● うぃんど
●25ポイント

【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


3 ● ween
●25ポイント

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

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

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


4 ● minumteh
●51ポイント ベストアンサー

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>
◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ