WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テーブル内の背景画像をランダム表示

0:[投稿] まりあ [2004/02/06 21:16 ][環境:IE6・WinXP わからない]

テーブル(TD)の背景画像をランダム表示、
もしくは時間帯別表示をすることは可能でしょうか?
テーブルの背景画像をアクセスする度に
変えられる方法があれば教えて下さい。お願いします。


1:[回答] 平野 敬 [MAIL] [URL] [2004/02/07 09:07 ]

可能です。JavaScript DOMを用いてクライアントサイドで調節するか,またはCGI/SSIでサーバサイドで書き換えます。


2:[回答] 平野 敬 [MAIL] [URL] [2004/02/07 09:13 ]

JavaScriptで時間別に切り替える例:


<?xml version="1.0" encoding="shift_jis"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <script type="text/javascript">
        window.onload = function(){ changeTdImage() }
        function changeTdImage(){
            var
                imgs  = ['url(asa.png)','url(hiru.png)','url(yoru.png)'], //時間別背景画像
                times = [8, 12, 17],//画像を切り替える時間
                now   = new Date().getHours(),
                tds   = document.getElementsByTagName('td');
            for(var i=0; tds.length>i; i++){
                if(now>=times[0]&&times[1]>now)
                    tds[i].style.backgroundImage = imgs[0];
                else if(now>=times[1]&&times[2]>now)
                    tds[i].style.backgroundImage = imgs[1];
                else
                    tds[i].style.backgroundImage = imgs[2];
            }
        }
    </script>
    <title>テスト</title>
</head>

<body>
    <table summary="国際条約名の和英対訳">
        <thead>
            <tr>
                <th scope="col">日本語での名称</th>
                <th scope="col">それに対応する英訳</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>交換公文</td>
                <td>Exchange of Notes</td>
            </tr>
            <tr>
                <td>二国間条約</td>
                <td>Bilateral Treaty</td>
            </tr>
            <tr>
                <td>多数国間条約</td>
                <td>Multilateral Convention</td>
            </tr>
        </tbody>
    </table>
</body>

</html>


3:[完了] まりあ [2004/02/07 20:28 ]

Javaで試してみたら出来ました。
どうもありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World