ホームページを作成しています。
5枚の画像からランダムで背景に表示する処理に加えて、選ばれた画像のwidthをブラウザに合わせて拡大・縮小したいです。
以下ソースのランダム表示の処理に加えて、ブラウザに合わせて画像を拡大・縮小して表示する方法を教えて下さい。
よろしくお願いします。
<SCRIPT language="JavaScript">
bgc = new Array();
bgc[0] = "url(../image/ti1.jpg)";
bgc[1] = "url(../image/bg2.jpg)";
bgc[2] = "url(../image/bg3.jpg)";
bgc[3] = "url(../image/bg4.jpg)";
bgc[4] = "url(../image/bg5.jpg)";
n = Math.floor(Math.random()*bgc.length);
document.body.style.backgroundImage = bgc[n];
</SCRIPT>
No.3ベストアンサー
- 回答日時:
既に回答を頂いているのですが
bodyのリサイズいれないと画面のサイズ変更した時に・・・
↓みたいな感じかな
<head>
<script type="text/javascript">
function onReady(){
resizeBody();
//別にこれはcssで書いてもいい
document.body.style.backgroundSize = "cover";
//BG-IMGを指定するコードを此処に書く
}
function resizeBody(){
document.body.style.width = window.innerWidth - 50 + "px";
document.body.style.height = window.innerHeight - 50 + "px";
}
</script>
</head>
<body onload="onReady()" onresize="resizeBody()">
</body>
No.2
- 回答日時:
ANo1です。
>html(css)側でどのように、document.body.style.backgroundImage
>を操作するのでしょうか
別に操作する必要はないと思いますので、最初からCSSで指定しておけばよろしいかと思います。
例えば
body { background-size: cover; }
No.1
- 回答日時:
この回答への補足
ありがとうございます。
javascriptで設定している背景をどのようにしてhtml(css)側に渡して、background-sizeで指定するのでしょうか?
javascript内の
document.body.style.backgroundImage = bgc[n];
で表示処理は全て完了してしまっています。
html(css)側でどのように、document.body.style.backgroundImage
を操作するのでしょうか?そこが知りたいです。
他の方でも分かる方がいらっしゃいましたら、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- PHP imageフォルダに、画像をリサイズして保存する時のファイル名を変更したい 1 2023/05/30 11:39
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- その他(プログラミング・Web制作) pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
- 哲学 マスクごっこ+同調圧力=精神病 2 2022/07/25 09:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
jQuery bxSlider 画像に変更
-
クリッカブルマップの一部分だ...
-
画像をクリックして別の画像を...
-
javaを使ってマウスオンでの画...
-
ランダム表示に加えwidthをブラ...
-
画像にロールオーバーするとメ...
-
プルダウンの位置がwin/macでず...
-
Javascript で共通の処理をどこ...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
ステータスバーについて
-
JavaScript スライドの画像にリ...
-
マウス追従スクリプトについて
-
画面の表示位置を指定させて表...
-
Javascriptで指定した日付と時...
-
プルダウンの位置がwin/macでず...
-
jQueryで特定のURLの時のみ表示
-
オンマウスで、画像切り替え+...
-
バナー広告のように表示させた...
-
ランダム表示に加えwidthをブラ...
-
JavaScriptとチェックボックス...
-
ホォルダの読む込み
-
jQuery bxSlider 画像に変更
-
画像にロールオーバーするとメ...
おすすめ情報
