htmlとcssはほんの少しわかりますが、javascriptは目下勉強中の者です。
質問させてください。
ブラウザのウィンドウの大きさに合わせて、ページの背景画像が『拡大・縮小』してくれる様なjavascriptのコードはありませんでしょうか。
自分で調べてみましたが、flashによる処理しかなく、どうにかjavascriptでできないものか悩んでいます。
http://www.ex-yz.com/labo/flash/sample/noscale/s …
上記のページはflashによるものだそうですが、リサイズのイメージはこういったものを実現したいです。
どなたか教えて下さる方がいらっしゃれば、よろしくお願いします。
No.1ベストアンサー
- 回答日時:
面白そうだったので作ってみました。
ちょっとサンプルとは違うけど。。
背景画像そのままだと多分出来ないので、レイヤーを使った感じにしました。
<body>
<img src="43442.jpg" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()">
<div style="position:absolute;top:0px;left:0px;z-index:1;">
<script type="text/javascript">
var imgObj = document.getElementById('backgroundID');
var imgSize = {w:0, h:0}
window.onresize = setImg;
window.onscroll = function() {
var t, l;
if (document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
} else if (document.body.scrollTop) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
} else {
return;
}
imgObj.style.top = t + 'px';
imgObj.style.left = l + 'px';
}
function setSize() {
imgSize.w = imgObj.width;
imgSize.h = imgObj.height;
}
function setImg() {
var wh, pW, pH, c;
wh = getWindowSize();
pW = wh.w / imgSize.w;
pH = wh.h / imgSize.h;
if (pW > 0 || pH > 0) {
c = (pW > pH) ? pW : pH;
imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px';
imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px';
} else {
imgObj.style.width = imgSize.w + 'px';
imgObj.style.height = imgSize.h + 'px';
}
}
function getWindowSize() {
var wh = {w:0, h:0};
if (document.body.clientWidth) {
wh.w = document.body.clientWidth
wh.h = document.body.clientHeight;
} else if(document.documentElement.clientWidth) {
wh.w = document.documentElement.clientWidth;
wh.h = document.documentElement.clientHeight;
} else if(window.innerWidth) {
wh.w = window.innerWidth;
wh.h = window.innerHeight;
}
return wh;
}
</script>
<body>タグの直下に上記のようなのを入れる。
</body>タグの直前に</div>を入れれば出来ると思います。
・・・こんなのはどうでしょう?
ちょっと邪道ですが。
本当にありがとうございます。
このソースでうまく動作しましたので、目的が達成できそうです。
>ちょっと邪道ですが。
参考書を見て、Window.innerWidthなどのプロパティも理解でき、大変役にたちました。
ありがとうございました。
No.4
- 回答日時:
こんにちは
背景画像のサイズ変更はできないのでひと工夫いりますが、サイトのようなものでしたらjavascriptを使用しなくてもできそうですね・・・
<style type="text/css"><!--
html,body {
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
--></style>
<img src="sample1.jpg" style="width:100%;height:100%;position:absolute;top:0px;left:0px;">
<div style="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;">
<img src="sample0.jpg" style="width:100%;height:100%;">
</div>
※<div>のmargin-top,margin-left;は<div>のheight,widthの半分の値になります
※順不同で作るのでしたらz-indexコントロールしてください
※ただサイトのように背景画のwidth,heightの最小値設定はできていません
そちらの方はjavascriptを使用することになると思いますが(一応作ってみたのですが)javascriptによるサイズ変更すると拡大するときに画面がパチパチしてとても見づらかったので省きます(良い方法を知っておられる方がいればいいのですが・・・)
回答ありがとうございます。
上記のように試してみた所、二つのサイズのの画像が重なって表示されてしまい、うまくいきませんでした。。
ですが、"1"さんが書いてくださったコードを試して見た所、うまく解決しそうです!ありがとうございます。
No.3
- 回答日時:
<html>
<body>
<img src="hana.gif" style="position:absolute; top:0px;left:0px;" id="b">
<div style="position:absolute; top:0px;left:0px;">
<br>
ここに適当に書いておくれ!<br>
画像の名前を適当にかえて!<br>
</div>
<script>
window.onresize = i;
window.onload =i;
function i(){
o=document.getElementById('b');
o.style.width = document.body.clientWidth;
o.style.height = document.body.clientHeight;
}
</script>
</body></html>
返事が遅くなりました。
これは他の質問サイトで既出でしたので、試してみましたがうまくいきませんでした。
けれど抜け落ちていた部分を補完してくださったのですね。
ありがとうございます。(ですが、やっぱり目的のようには表示されませんでした。)
No.2
- 回答日時:
onload時のを書くのを忘れてました。
イベントの書き方も結構適当に書いちゃったので、もし使うのであればaddEventListenerやら上手く書き換えてください。
この回答への補足
すごい!!すばやい回答ありがとうございます!
早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。
ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!
【すいません。。補足欄にお礼を書いてしまいました】
すごい!!すばやい回答ありがとうございます!
早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。
ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
showModalDialogで開いた画面を...
-
excle VBA とweb上の検索を利用...
-
ラジオボタンをクリックしたい
-
Null またはオブジェクトではあ...
-
重い処理とはどのようなものが...
-
Latexに関する質問です。
-
jquery
-
ページの縦幅を取得する際の問題
-
javascriptの基本的なことだと...
-
JavaScript window.openで開く...
-
google apps scriptの終了のさせ方
-
Excel VBA の ChangeFileAccess
-
C#OpenCv V4にのエラーに関する...
-
idを使わずにonclickで自身の要...
-
ActiveXobjectが作成できない
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FireFoxのjavascriptで自動でキ...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
XMLでのAttributeを持ったNode...
-
TexでΣの添え字の位置直し
-
JavaScript window.openで開く...
-
Null またはオブジェクトではあ...
-
javascriptの基本的なことだと...
-
iframeのソースを取得したい
-
選択肢によってラジオボタンを...
-
excle VBA とweb上の検索を利用...
-
文字を一文字ずつ表示
-
ラジオボタンでreadonlyの切替え
-
responseTextについて
-
VBAのIE操作でframe構造のサイ...
-
サブウィンドウからのスタイル...
-
JavaScriptのdocument.all("変...
-
オンマウスについて
-
要素のリサイズをひろい、他の...
-
クリッカブルマップのリンク部...
おすすめ情報