| ポイント |
<![CDATA[
this.style.backgroundImage = "url(bg1.gif)";
]]>
|
| 説 明 |
テーブルのセルの背景画像を変更するにはtdタグのスタイルシートを変更します。スタイルプロパティのbackgroundImageにurlを指定します。urlの指定は文字列で"url(bg1.gif)"のようにする必要があります。単純にURLを指定しただけでは表示されません。
|
| サンプル |
<![CDATA[
<html>
<head>
<title>テーブルのセルの背景画像を変更する</title>
<style type="text/css"><!--
td { width:50px; height:50px; }
--></style>
<script type="text/javascript"><!--
function setCellBG1()
{
this.style.backgroundImage = "url(bg1.gif)";
}
function setCellBG2()
{
this.style.backgroundImage = "url(bg2.gif)";
}
window.onload = function()
{
var tdTag = document.getElementsByTagName("td");
for (var i=0; i<tdTag.length; i++)
{
tdTag[i].style.backgroundImage = "url(bg1.gif)";
tdTag[i].onmouseover = setCellBG2;
tdTag[i].onmouseout = setCellBG1;
}
}
// --></script>
</head>
<body>
<p>文字の上にマウスを乗せてください</p>
<table border="1">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
<tr><td>セル５</td><td>セル６</td></tr>
</table>
</body>
</html>
]]>
|
| 補足説明 |
なし
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
テーブルのセルの背景画像を変更する
