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

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

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

●質問者: tanomoo
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CGI Hp JavaScript TV アクセス
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pahoo
●100ポイント

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

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


2 ● pahoo
●100ポイント ベストアンサー

ごめんなさい。

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

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

がないので、えぇ?と思いましたが、これを入れると、テーブルの高さが高くなってしまうので、びっくりでした。今では、画像がランダムに表示されて、すっきりとしております(>v<*)

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

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

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

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

関連質問


●質問をもっと探す●



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