ホームページビルダー・グレート初心者講座

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座≠ヨグレート初心者講座 質問掲示板へ

HTML版 過去ログ
| 掲示板を見る | ホームに戻る | ワード検索 | 過去ログ |   
トップページ > 記事閲覧
セル内に設定した背景画像について
日時: 2005/08/11 08:32
識別: IDVTOioxuXpXI
名前: はな

いつもこちらの掲示板にお世話になっております。
セル内の背景画像について質問させていただきます。

ページ上に表を作り、いくつかのセルに分けています。
その内のセルの1つに背景に画像を設定しているのですが、

https://www.******.jp/*****.htm
↑例えばこんな感じです。
画像の上にアニメーションをかぶせたかったので、
あえて画像を背景で設定しました)
※アドレスは消しました

そのセル内の背景画像を、ページが表示されるたびに
画像を変えるという事はできるのでしょうか?

いろいろ調べたところ、ページの背景自体はJavaScriptで
できるようなのですが、セル内の背景の場合、そのソースを
どこに貼り付けたら良いのかわかりません。
そもそも、できるのかどうかもわかっていないのですが…

ご存知の方がいらっしゃいましたら、宜しくお願い致します。

※アドレスは消しました。
メンテ

FE8
Re: セル内に設定した背景画像について ( No.1 )
日時: 2005/08/11 08:32
名前: はな

補足です。
OSはWin98、ソフトはHPB7を使用しております。

※アドレスは消しました
メンテ
Re: セル内に設定した背景画像について ( No.2 )
日時: 2005/08/10 18:37
名前: oioiooi

出来ます。

アドレスは消しました。

わからないことがあったら書いてください。
メンテ
Re: セル内に設定した背景画像について ( No.3 )
日時: 2005/08/11 08:33
名前: はな

oioiooi様、回答ありがとうございます。
早速拝見させて頂き、ソースをビルダーで開いてみました。

<!-- En-HP-H -->
<noscript>
<p>JavaScriptが無効になっているみたいよん?。</p>
</noscript>
<table border="3" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" height="480" align="right" valign="middle" class="back"><IMG src="images/a_ilst002.gif" width="64" height="64" border="0" alt=""></td>
<td class="back2">JavaScript Market https://jsm.suepon.com/script/jsm21.html</td>
</tr>
</tbody>
</table>
<!-- St-HP-F -->

この辺りがおそらく画像が変化するセルだと認識しているのですが
(ページとソースを比較するとこの辺りになるようで…)、
何種類かの画像を貼り付ける箇所が見つけられませんでした。
このソースのもっとずっと上方に(titleの直後に)
下記のようなそれらしきソースはあるのですが、
こちらの方でしょうか?

<script type="text/javascript">
wall = new Array();
/* 使用する背景画像を好きなだけ記述 */
wall[0] = "./images/ani0001.jpg";
wall[1] = "./images/ani0002.jpg";
wall[2] = "./images/bdg0001.jpg";
rnd = Math.round(Math.random() * (wall.length - 1));
document.write('<style type="text/css">td.back { background-image:url(' , wall[rnd] , '); }</style>');
</script>

ちなみに下記の私のサイトの、中央部分のイラストを
oioiooi様のように表示されるごとに絵を変化させたいのです。
※アドレスは消しました

理解不足で申し訳ございませんが、よろしくお願い致します。
メンテ
Re: セル内に設定した背景画像について ( No.4 )
日時: 2005/08/09 22:29
名前: oioiooi

「何種類かの画像を貼り付ける箇所が見つけられませんでした。
このソースのもっとずっと上方に(titleの直後に)
下記のようなそれらしきソースはあるのですが、
こちらの方でしょうか?」

その通りでございます。

このスクリプトを<head></head>内に記述します。

<script type="text/javascript">
wall = new Array();
/* 使用する背景画像を好きなだけ記述 */
wall[0] = "./images/ani0001.jpg";
wall[1] = "./images/ani0002.jpg";
wall[2] = "./images/bdg0001.jpg";
rnd = Math.round(Math.random() * (wall.length - 1));
document.write('<style type="text/css">td.back { background-image:url(' , wall[rnd] , '); }</style>');
</script>

一応、上記では3枚の画像ですが、
増やしたい時は wall[2]= "画像のPATHを記入"; と
wall[2] []内の数字を増やして記述していけば増やせます。

以下の部分、td.back というCSSのClassを作っています。
document.write('<style type="text/css">td.back { background-image:url(' , wall[rnd] , '); }</style>');

.backは任意の半角英数字にしてください。
そのままでもいいですが。
以下、説明は.backにしたとして。

背景をランダムに変更したいセルのタグに
class="back"を付けてください。
私が作ったサンプルページでは以下の部分になります。
<td width="640" height="480" align="right" valign="middle" class="back">
FD3 メンテ
Re: セル内に設定した背景画像について ( No.5 )
日時: 2005/08/11 08:37
名前: はな
状態: 解決!

oioiooi様、回答ありがとうございます。
お返事が少々遅れて申し訳ありません。

教えて頂いた通りやってみたらできました。
なるほど〜と感動してしまいました。
遠隔操作みたいな感じですね。
そんな事も出来るとは本当に勉強になりました。

丁寧で親切な回答、本当にありがとうございました。
メンテ

Page: [1]




ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved