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

HP作成について。背景を右上に固定しつつ、ランダムに画像を表示させる方法。画面をスクロールしたとき動かしたくないです。イメージとしては、<style type=”text/css”><!--body{ background-image:url(背景画像のURL); background-attachment:fixed; background-repeat:no-repeat; background-position:right top;}--></style>こんな感じで、画像がランダム表示。

●質問者: harem69
●カテゴリ:コンピュータ 芸術・文化・歴史
✍キーワード:Hp イメージ スクロール ランダム 作成
○ 状態 :終了
└ 回答数 : 4/5件

▽最新の回答へ

1 ● masaomix
●10ポイント

http://www.1point.jp/~info-bbs/cgi-bin/officecats/bbs01/index.ht...

banned interdit verboden prohibido vietato proibido

またまたURLはダミーです。

ごめんなさい。背景は右上に固定でノーリピートでしたね(^-^;

2の回答のスタイルシートのところは間違ってます(^-^;

CSSはご質問者の意図したものに変えてください。

ごめんなさい。訂正してお詫びします(汗


2 ● いのくに
●10ポイント

http://1up-life.com/1upweb/tips/random2.html

tips ランダムスクリプト2

JavaScript を使ってみてはどうでしょうか?

http://tohoho.wakusei.ne.jp/html/body.htm

body タグに bgproperties=fixed を記述すると、背景画像が固定されます。

http://useyan.pupu.jp/s/javas/java/aer_078.htm

このページがズバリな回答かも。


3 ● masaomix
●10ポイント

http://www.officecats.net/

動物愛護同人「ねこの事務所」

URLはダミー。私のサイトです(^-^;

さて、ご質問のような背景のランダム入れ替えは

スタイルシートではちょっと無理なんです。

スタイルシートは見栄えに関する指定をするだけで、

計算したりする機能はありません。

こういう用途にはjavascriptを使うのが簡単です。

たとえばこんな感じ。

<script Language=”JavaScript”>

var n = Math.floor(Math.random()*4) ;

document.write(”<BODY bgcolor=’#ffffff’ background=’wp”+n+”.gif’>”);

</script>

< と > は全角で書いてありますが、実際には半角にしてくださいね。

Math.floor(Math.random()*4)は、0,1,2,3の整数の乱数を発生させる部分です。

そして、

document.write(”<BODY bgcolor=’#ffffff’ background=’wp”+n+”.gif’>”);

で n に 0〜3 を代入して、

wp0.gif、wp1.gif、wp2.gif、wp3.gif、という背景画像を

ランダムに表示させていきます。

ですから、random()*4 の4を変えてやれば、

好きな数の背景を切り替えて表示させることができます。

実際にはこんな感じでページに貼り込んでください。

スタイルシートは背景の固定用です。

<HTML>

<HEAD>

<TITLE>タイトル</TITLE>

<STYLE type=”text/css”>

<!--

BODY { background: repeat fixed; }

-->

</STYLE>

</HEAD>

<BODY>

<SCRIPT Language=”JavaScript”>

<!--

var n = Math.floor(Math.random()*4) ;

document.write(”<BODY text=’#000000’ link=’#0000ff’ vlink=’#6600cc’ alink=’#ff0000’ bgcolor=’#ffffff’ background=’wp”+n+”.gif’>”);

//-->

</SCRIPT>

</BODY>

</HTML>

これで、HTMLファイルと同じフォルダに背景画像

wp0.gif、wp1.gif、wp2.gif、wp3.gif を置けば出来上がりです。

やってみてください。


4 ● ricca
●40ポイント

http://www.b-ev.net/

ディレクトリー型リンク集 エレクトロンボルト

このサイトを作ってるものです。

ここのピンクのボタン(b-ev?)のカンパニーコンセプトにあるjavascriptを流用してみては。

背景を右上に固定するとすると、具体的には、

<script language=”JavaScript”>

<!--

Bgs=new Array(14);

Bgs[1]=”conseptbg01”;

Bgs[2]=”conseptbg02”;

Bgs[3]=”conseptbg03”;

Bgs[4]=”conseptbg04”;

Bgs[5]=”conseptbg05”;

Bgs[6]=”conseptbg06”;

Bgs[7]=”conseptbg07”;

Bgs[8]=”conseptbg08”;

Bgs[9]=”conseptbg09”;

Bgs[10]=”conseptbg10”;

Bgs[11]=”conseptbg11”;

Bgs[12]=”conseptbg12”;

Bgs[13]=”conseptbg13”;

Bgs[14]=”conseptbg14”;

var iValue,rNumber;

iValue=Math.random()*14;

rNumber=Math.ceil(iValue);

if(rNumber==0) rNumber++;

document.write(”<style type=’text/css’>”);

document.write(”BODY { background-image: url(’img/”+Bgs[rNumber]+”.gif’); background-attachment: fixed; background-repeat: no-repeat;

background-position:right top;}”);

document.write(”</style>”);

//-->

</script>

こんな感じです。

◎質問者からの返答

この形式が理想です。これって、左右上下の位置は指定できるんですか?いわしで教えていただけると嬉しいです・・・図々しいですね。ありがとうございましたv

関連質問


●質問をもっと探す●



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