プロが教えるわが家の防犯対策術!

htmlとcssはほんの少しわかりますが、javascriptは目下勉強中の者です。
質問させてください。

ブラウザのウィンドウの大きさに合わせて、ページの背景画像が『拡大・縮小』してくれる様なjavascriptのコードはありませんでしょうか。

自分で調べてみましたが、flashによる処理しかなく、どうにかjavascriptでできないものか悩んでいます。

http://www.ex-yz.com/labo/flash/sample/noscale/s …

上記のページはflashによるものだそうですが、リサイズのイメージはこういったものを実現したいです。

どなたか教えて下さる方がいらっしゃれば、よろしくお願いします。

A 回答 (4件)

面白そうだったので作ってみました。


ちょっとサンプルとは違うけど。。

背景画像そのままだと多分出来ないので、レイヤーを使った感じにしました。


<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>を入れれば出来ると思います。

・・・こんなのはどうでしょう?
ちょっと邪道ですが。
    • good
    • 0
この回答へのお礼

本当にありがとうございます。

このソースでうまく動作しましたので、目的が達成できそうです。

>ちょっと邪道ですが。

参考書を見て、Window.innerWidthなどのプロパティも理解でき、大変役にたちました。

ありがとうございました。

お礼日時:2008/03/20 21:11

こんにちは



背景画像のサイズ変更はできないのでひと工夫いりますが、サイトのようなものでしたら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によるサイズ変更すると拡大するときに画面がパチパチしてとても見づらかったので省きます(良い方法を知っておられる方がいればいいのですが・・・)
    • good
    • 1
この回答へのお礼

回答ありがとうございます。

上記のように試してみた所、二つのサイズのの画像が重なって表示されてしまい、うまくいきませんでした。。

ですが、"1"さんが書いてくださったコードを試して見た所、うまく解決しそうです!ありがとうございます。

お礼日時:2008/03/20 21:04

<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>
    • good
    • 0
この回答へのお礼

返事が遅くなりました。

これは他の質問サイトで既出でしたので、試してみましたがうまくいきませんでした。

けれど抜け落ちていた部分を補完してくださったのですね。

ありがとうございます。(ですが、やっぱり目的のようには表示されませんでした。)

お礼日時:2008/03/20 20:54

onload時のを書くのを忘れてました。


イベントの書き方も結構適当に書いちゃったので、もし使うのであればaddEventListenerやら上手く書き換えてください。

この回答への補足

すごい!!すばやい回答ありがとうございます!

早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。

ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!

補足日時:2008/03/20 03:27
    • good
    • 0
この回答へのお礼

【すいません。。補足欄にお礼を書いてしまいました】
すごい!!すばやい回答ありがとうございます!

早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。

ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!

お礼日時:2008/03/20 03:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!