id:tanomoo
ポイントあり200ptベストアンサーあり
コンピュータウェブ制作

HP画像を、アクセス毎に他の画像（複数枚）と切り替えたいのですが、<img src="">タグでも<BODY>タグでもなく、<table>内の<td>タグの背景画像です。順番でもランダムでも構いません。画像の上に、別に、横ストライプ画像を被せたかったので（TV画面効果）、<td>の背景に指定しています。


サーバーではcgiやpealが使えません。javascriptとかで使える方法をご存知の方がいらっしゃいましたら、どうぞ宜しくお願いいたします。（ちなみに、javascriptには詳しくないので、設置方法なども教えていただけますと、助かります ^^;）

回答の条件
  • 1人20回まで
  • 登録：
  • 終了：2009/08/19 20:54:55
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:pahoo No.2

回答回数5960ベストアンサー獲得回数633

ポイント100pt

ごめんなさい。

前述の JavaScript は IE でしか動きません。

やや力任せの感がありますが、IE, Safari, Firefox に対応するものを下記にします。

<body> タグ内のみの抜粋です。

<head> タグ内に JavaScript を記述する必要はありません。

<body> タグに onLoad を記述する必要はありません。


<body>
<TABLE background="top-illust/yl.png" style="border-width: 1px ; border-style: solid ; border-color: #8A000E ; " align="center" width="650" height="300"><TR align="center"><TD valign="top" width="300">（本文）</TD>

<script type="text/javascript">
<!--
var BgImage = new Array();
// 背景にしたい画像のURL
BgImage[0] = "top-illust/natu.png";
BgImage[1] = "top-illust/isuka-luku.png";
BgImage[2] = "1start/2/2.png";
BgImage[3] = "1start/2/3.png";
//
cnt = BgImage.length;
n = Math.floor(Math.random() * cnt);
document.write('<TD width="350" style="');
document.write('background:url(' + BgImage[n] + ') no-repeat center">');
-->
</script>

<TABLE width="350" height="300" background="top-illust/yl.png"><TR><TD>
</TD></TR></TABLE>
</TD></TR></TABLE>
</body>
id:tanomoo

すごい!!　お見事です!!　（遅くなり、申し訳ございません）

がないので、えぇ？と思いましたが、これを入れると、テーブルの高さが高くなってしまうので、びっくりでした。今では、画像がランダムに表示されて、すっきりとしております（＞v＜＊）

pahooさん、本当に、どうもありがとうございました!!

理路整然としてて、初心者にも分かりやすいご指導、頼もしかったですv

はてな、初めて利用するんですけれど、質問して良かったです!!!

また何かあった時は、どうぞ宜しくお願いいたします m(_ _＊)m

2009/08/19 20:48:29

その他の回答（1件）

id:pahoo No.1

回答回数5960ベストアンサー獲得回数633

ポイント100pt

JavaScript でランダムに切り換える方法を紹介します。

下記の <script> タグで囲まれた部分が切り換え用の JavaScript です。<head> タグの中に記述するようにしてください。

配列 BgImage に、切り換えたい背景画像のURLをセットしてください。要素番号 0, 1, 2, 3‥‥を増やしてもらえば、いくつでもセットできます。

<body> タグに onLoad を付記することと、件の <TD> タグは下記のように style の代わりに id 属性に書き換えてください。

<html>
<head>
<script type="text/javascript">
<!--
var BgImage = new Array();
//★背景にしたい画像のURL
BgImage[0] = "../image/hoge00.png";
BgImage[1] = "../image/hoge01.png";
BgImage[2] = "../image/hoge02.png";
BgImage[3] = "../image/hoge03.png";

//背景をランダムに変える関数
function change() {
    cnt = BgImage.length;
    n = Math.floor(Math.random() * cnt);
    document.getElementById('td001').background = BgImage[n];
}
-->
</script>
</head>

<body onLoad="change()">
<TABLE background="top-illust/yl.png" style="border-width: 1px ; border-style: solid ; border-color: #8A000E ; " align="center" width="650" height="300"><TR align="center"><TD valign="top" width="300">（本文）</TD>
<TD id="td001" width="350">
<TABLE width="350" height="300" background="top-illust/yl.png"><TR><TD>
</TD></TR></TABLE>
</TD></TR></TABLE>
</body>
</html>
id:tanomoo

素早い回答、どうもありがとうございます。さっそく編集してみたのですが…、画像がまったく表示されなくなってしまいました（^^;）　どうすれば良いでしょうか。

2009/08/19 13:05:59
id:pahoo No.2

回答回数5960ベストアンサー獲得回数633ここでベストアンサー

ポイント100pt

ごめんなさい。

前述の JavaScript は IE でしか動きません。

やや力任せの感がありますが、IE, Safari, Firefox に対応するものを下記にします。

<body> タグ内のみの抜粋です。

<head> タグ内に JavaScript を記述する必要はありません。

<body> タグに onLoad を記述する必要はありません。


<body>
<TABLE background="top-illust/yl.png" style="border-width: 1px ; border-style: solid ; border-color: #8A000E ; " align="center" width="650" height="300"><TR align="center"><TD valign="top" width="300">（本文）</TD>

<script type="text/javascript">
<!--
var BgImage = new Array();
// 背景にしたい画像のURL
BgImage[0] = "top-illust/natu.png";
BgImage[1] = "top-illust/isuka-luku.png";
BgImage[2] = "1start/2/2.png";
BgImage[3] = "1start/2/3.png";
//
cnt = BgImage.length;
n = Math.floor(Math.random() * cnt);
document.write('<TD width="350" style="');
document.write('background:url(' + BgImage[n] + ') no-repeat center">');
-->
</script>

<TABLE width="350" height="300" background="top-illust/yl.png"><TR><TD>
</TD></TR></TABLE>
</TD></TR></TABLE>
</body>
id:tanomoo

すごい!!　お見事です!!　（遅くなり、申し訳ございません）

がないので、えぇ？と思いましたが、これを入れると、テーブルの高さが高くなってしまうので、びっくりでした。今では、画像がランダムに表示されて、すっきりとしております（＞v＜＊）

pahooさん、本当に、どうもありがとうございました!!

理路整然としてて、初心者にも分かりやすいご指導、頼もしかったですv

はてな、初めて利用するんですけれど、質問して良かったです!!!

また何かあった時は、どうぞ宜しくお願いいたします m(_ _＊)m

2009/08/19 20:48:29

コメント（8件)

  • id:tanomoo
    tanomoo 2009/08/19 11:41:49
    補足です。以下のようなテーブル構造です。差し替えたい画像は、"isuka-luku.png"です。

    <TABLE background="top-illust/yl.png" style="border-width: 1px ; border-style: solid ; border-color: #8A000E ; " align="center" width="650" height="300"><TR align="center"><TD valign="top" width="300">（本文）</TD>
    <TD width="350" style="background:url(top-illust/isuka-luku.png) no-repeat center">
    <TABLE width="350" height="300" background="top-illust/yl.png"><TR><TD>
    </TD></TR></TABLE>
    </TD></TR></TABLE>

    ちなみにmyURL→　http://tootomo.web.fc2.com/novel/yo-mahou/yo-mahou.htm
  • id:pahoo
    pahoo 2009/08/19 13:13:24
    > 画像がまったく表示されなくなってしまいました

    以下の確認をお願いします。

    ・配列 BgImage に正しいURLをセットしましたか？
    ・BODY タグに onLoad は付いていますか？
    ・問題のTDタグの部分を書き換えましたか？
    ・ご利用のブラウザは何ですか？
    ・ご利用のブラウザの JavaScript は ON になっていますか？
  • id:tanomoo
    tanomoo 2009/08/19 13:48:20
    遅くなってすみません…。こんな感じです（コピペ／下）画像パスは、このページを基点にしてます。
    ブラウザは「safari1.1」「FIRE FOX 2.0.0.20」です。どちらもJavaScriptはonで、他の画像差し替えサイトは問題なく表示できてます。よろしくお願いします。

    <head>
    <script type="text/javascript">
    <!--
    var BgImage = new Array();
    //★背景にしたい画像のURL
    BgImage[0] = "top-illust/natu.png";
    BgImage[1] = "top-illust/isuka-luku.png";
    BgImage[2] = "1start/2/2.png";
    BgImage[3] = "1start/2/3.png";

    //背景をランダムに変える関数
    function change() {
    cnt = BgImage.length;
    n = Math.floor(Math.random() * cnt);
    document.getElementById('td001').background = BgImage[n];
    }
    -->
    </script>
    </head>
    <body onLoad="change()" bgcolor="#FFFFFF" background="kabe/oldbook1-right.jpg">
    </TD><TD id="td001" width="350">
  • id:tanomoo
    tanomoo 2009/08/19 13:55:39
    あのー、JavaScriptの前（上）に、<style type="text/css">の指定をしているのですが、それが邪魔しちゃってるってことは…ありますでしょうか？
  • id:tanomoo
    tanomoo 2009/08/19 15:24:47
    とりあえず、画像を元に戻しておきますね。また宜しくお願いいたします。
    （すみませんが、今から小１、２時間、家を留守にしますので、すぐにお返事できません m(_ _)m）
    引き続き、他にも、ご存じの方がいましたら、どうぞ宜しくお願いいたします。
  • id:tanomoo
    tanomoo 2009/08/19 20:51:57
    回答２の、
    ＞がないので、えぇ？と思いましたが
    という文章、最初に「<TD width="350">」がつきます。手違いか、抜けてしまいました（^^;）
    ありがとうございました!!
  • id:kn1967
    kn1967 2009/08/20 06:50:03
    このページのソースを見てみるとチャンと残っているのですが、「ブラウザが
    文章ではなくタグとして認識してしまっている」ため表には出てきません。

    半角の < を 全角の ＜ で書くなどしてタグとして認識させないようにすれば、
    希望通りに表示されます。
    （回答欄では「はてな記法」という手法で＆lt;などに自動的に置換されています。）
  • id:tanomoo
    tanomoo 2009/08/20 07:24:20
    kn1967さん、アドバイスどうもありがとうございます（^^）
    手抜かりではなかったのですね（^皿^＊）良いこと聞きました。
    頭に入れておきます♪

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ