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


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

回答の条件
  • 1人20回まで
  • 登録:2009/08/19 11:33:12
  • 終了:2009/08/19 20:54:55

ベストアンサー

id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332009/08/19 17:44:52

ポイント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

pahoo回答回数5960ベストアンサー獲得回数6332009/08/19 12:25:07

ポイント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

pahoo回答回数5960ベストアンサー獲得回数6332009/08/19 17:44:52ここでベストアンサー

ポイント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
  • id:tanomoo
    補足です。以下のようなテーブル構造です。差し替えたい画像は、"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
    > 画像がまったく表示されなくなってしまいました

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

    ・配列 BgImage に正しいURLをセットしましたか?
    ・BODY タグに onLoad は付いていますか?
    ・問題のTDタグの部分を書き換えましたか?
    ・ご利用のブラウザは何ですか?
    ・ご利用のブラウザの JavaScript は ON になっていますか?
  • id:tanomoo
    遅くなってすみません…。こんな感じです(コピペ/下)画像パスは、このページを基点にしてます。
    ブラウザは「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
    あのー、JavaScriptの前(上)に、<style type="text/css">の指定をしているのですが、それが邪魔しちゃってるってことは…ありますでしょうか?
  • id:tanomoo
    とりあえず、画像を元に戻しておきますね。また宜しくお願いいたします。
    (すみませんが、今から小1、2時間、家を留守にしますので、すぐにお返事できません m(_ _)m)
    引き続き、他にも、ご存じの方がいましたら、どうぞ宜しくお願いいたします。
  • id:tanomoo
    回答2の、
    >がないので、えぇ?と思いましたが
    という文章、最初に「<TD width="350">」がつきます。手違いか、抜けてしまいました(^^;)
    ありがとうございました!!
  • id:kn1967
    このページのソースを見てみるとチャンと残っているのですが、「ブラウザが
    文章ではなくタグとして認識してしまっている」ため表には出てきません。

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

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

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

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

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