• ベストアンサー

ブラウザのウィンドウサイズに合わせて背景画像を拡大縮小する、jsのコードはありませんか？（html内に記述。）

htmlとcssはほんの少しわかりますが、javascriptは目下勉強中の者です。 質問させてください。 ブラウザのウィンドウの大きさに合わせて、ページの背景画像が『拡大・縮小』してくれる様なjavascriptのコードはありませんでしょうか。 自分で調べてみましたが、flashによる処理しかなく、どうにかjavascriptでできないものか悩んでいます。 http://www.ex-yz.com/labo/flash/sample/noscale/sample.html 上記のページは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>を入れれば出来ると思います。 ・・・こんなのはどうでしょう？ ちょっと邪道ですが。

chaouzum
質問者

お礼

本当にありがとうございます。 このソースでうまく動作しましたので、目的が達成できそうです。 >ちょっと邪道ですが。 参考書を見て、Window.innerWidthなどのプロパティも理解でき、大変役にたちました。 ありがとうございました。

その他の回答 (3)

  • leap_day
  • ベストアンサー率60% (338/561)
回答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によるサイズ変更すると拡大するときに画面がパチパチしてとても見づらかったので省きます(良い方法を知っておられる方がいればいいのですが・・・）

chaouzum
質問者

お礼

回答ありがとうございます。 上記のように試してみた所、二つのサイズのの画像が重なって表示されてしまい、うまくいきませんでした。。 ですが、"1"さんが書いてくださったコードを試して見た所、うまく解決しそうです！ありがとうございます。

noname#84373
noname#84373
回答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>

chaouzum
質問者

お礼

返事が遅くなりました。 これは他の質問サイトで既出でしたので、試してみましたがうまくいきませんでした。 けれど抜け落ちていた部分を補完してくださったのですね。 ありがとうございます。(ですが、やっぱり目的のようには表示されませんでした。)

回答No.2

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

chaouzum
質問者

お礼

【すいません。。補足欄にお礼を書いてしまいました】 すごい！！すばやい回答ありがとうございます！ 早速、挑戦してみたいと思います。 何せjavascriptは完全に初心者なものでして。。 ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです！

chaouzum
質問者

補足

すごい！！すばやい回答ありがとうございます！ 早速、挑戦してみたいと思います。 何せjavascriptは完全に初心者なものでして。。 ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ブラウザに合わせる拡大・縮小する背景画像について

    よろしくお願い致します。 親swfの中にあるmc.bgに外部swfを表示しています。 このmc.bgはブラウザに合わせて拡大・縮小できるように、下記のス クリプトをメインフレームに入れています。 外部swfのひとつに、画像が100%で表示されてから少しづつ拡大して 次の画像へ切り替わるというスライドショーのswfがあるのですが、 （画像が表示・拡大する部分はモーショントゥイーンで制作しています） このswfを親swfに読み込んで表示しているときにブラウザをリサイズすると、外部swfがブラウザに合わなくなり、画像（外部awf）がmc.bgより小 さく表示されてしまいます。 （ブラウザのリサイズをしなければ問題ありませんでした） 外部swfの画像の拡大・縮小に関わらず、常にブラウザに合わせて拡大・ 縮小できるようにするにはどうすればよいのでしょうか？ 色々検索したのですが、該当するものがありませんでした。 ほとほと困っております。どうぞよろしくお願い致します。 ※フレームに挿入しているスクリプトです。 ----- R = Stage.height/Stage.width; Stage.scaleMode = "noScale"; Stage.align = "LT"; function bgScale() { w = Stage.width; h = Stage.height; if (w*R>h) { bg._width = w; bg._yscale = bg._xscale; } else { bg._height = h; bg._xscale = bg._yscale; } bg._x = w/2; bg._y = h/2; menuMC._x = w-20; menuMC._y = h-20; } sListener = new Object(); sListener.onResize = function() { bgScale(); }; -----

  • 画像の拡大・縮小機能のサンプルページを探しています

    参考：http://www.maimu.co.jp/753/detail/7302106.php 上記サイトのような画像を拡大・縮小出来るスライダーがついていて、 且つ拡大した際にマウスで移動できる機能を実装したいと思っているのですが、 何か解説ページなどありませんでしょうか？ Flashでは無く、javascriptで実装できればと思っております。 ポイントとしては、 ◎「+」「-」ボタンだけではなく、スライダーで拡大・縮小ができる ◎拡大時にはマウスで拡大位置を移動できる ◎Flashではなく、javascript（jQueryとか？）で。 ご存知の方がいらっしゃいましたらお願いいたします。

  • 飛び出すメニューについて

    http://www.ex-yz.com/labo/flash/2007/05/2.html これのような、マウスオーバーで下位項目が出てくるというメニューをFlashで作りたいと考えています。 このサンプルでは飛び出す最大の範囲までFlashの領域として確保されていますが、 通常ヘッダーなどに置いた場合、そんなに下が開いている事はあり得ないと思うので 最初から表示されている部分（メインメニュー）のみを初期のFlashの領域とし、 飛び出たサブメニュー部分は下のhtmlに被らせるような状態で作りたいと思うのですが、 これはどうすれば実現できるのでしょうか？ Flashとhtmlだけではできないのでしょうか。 あと、Flashで作られたこういうロールオーバーでサブが出てくるようなメニューで 何かかっこいいサイトや効果的な使い方をされているような 参考になるサイトがあれば教えてください。 Javascriptでも作れるような、ただ降りてくるだけのものではなく Flashならではというものを色々見てみたいので。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • iPhone/iPad向けWebサイトで、画像のみの拡大縮小を行う

    iPhone/iPad向けWebサイトで、画像のみの拡大縮小を行う iPad向けにWebアプリを開発しています。 HTMLのページ内に埋め込まれた画像のみをgoogleマップのような感じに拡大・縮小・表示範囲の移動などを、iPadのUI(つまむ・なぞるetc)で行えるjavascriptないしAJAXのコード、もしくはライブラリを探しています。 PC向けのライブラリはjavascriptでもFlashでもいろいろあるようですが、どなたかご存知であれば教えていただけると非常に助かります。

  • ページ全体の拡大／縮小が行える、JavaScriptのサンプルを教えていただけますでしょうか？

    ページ全体の拡大／縮小をJavaScriptにて行いないたい（対象はIEのみ）のですが、検索をしてみると、「文字サイズの拡大／縮小」や「画像の拡大／縮小」はよく見つかるのですが、ページ全体の拡大／縮小のサンプルを掲載しているページはあまり見かけません。 検索（"ページ ズーム javascript"等のキーワードで）で何件か見つかって、試してはみたのですが、それらのプログラムですと、私のほうのHTML＋CSSで使用すると、何とも説明しがたいおかしな挙動をしてしまいます。HTML＋CSSの見直しも色々行ってみたのですが、なかなか改善されません。 みなさんがご存知のJavaScriptのサンプル（ページ全体の拡大／縮小）が掲載されているURLを教えていただけますでしょうか？ 教えていただいたサンプルを実装し、色々探ってみたいと思っています。 ※ちなみに、イメージは↓このような感じです。 http://appleworld.com/4tr/

  • 背景画像 リサイズ jQuery maxImage plugin 使い方を教えて！goo

    jQuery maxImage plugin http://www.aaronvanderzwan.com/maximage/installation.php 日本人なので英語の説明がわかりません。日本語で説明しているサイトも見つかりません。翻訳してもわかりません。　教えてくんマックスIMAGE。 http://oshiete1.goo.ne.jp/qa3877907.html この方と同じことがやりたいのです。 http://www.ex-yz.com/labo/flash/sample/noscale/sample.html が、拡張性と利便性を考えるとやはりmaximage的な感じがチャレンジしたいのです。 まずは Example 1 の背景画像を試したいのですが、2つのjsをダウンロードしてアップしてドキュメントからリンクさせる基本的なところまではわかります。あと、どこをどういじっていけば完成できるのか検討がつかないレベルの知識です。　教えてくんマックスIMAGE。 こんな他力本願な質問では、某ちゃんねるでは叩かれておしまいなので、せめてどなたかアドバイスくださるとうれしいです。 宜しくお願いします。 ちなみに、FLASHでは達成できるんですが、FLASHだとYahoo!広告に出せなかったりと問題があるようなのでナシです。

  • javascriptでの画像表示と拡大縮小など

    現在javascriptについて勉強をしているところです。 下記リンクのようにローカルにある画像を画面に表示し、 http://www.pori2.net/html5/File/040.html 下記リンクのように表示した画像を動かすことの出来るような プログラムにしてみたいのですが、 http://jsdo.it/ganezasan/gTN0 ふたつのサンプルを見ながら作れないかやってみたのですが まだまだ勉強不足でうまく出来ませんでした。 ローカル画像を表示させ（サーバにアップロードはしないで）、 上記リンクのような拡大や縮小などの操作を 出来るようにするにはどうすれば良いのでしょうか。

  • 画面（ウィンドウ）／画像の拡大縮小について

    PHP/JavaScript初心者です。 ＰＨＰとＪａｖａＳｃｒｉｐｔと以下のようなことをしてます、 画面（ウィンドウ）上に画像が表示し 「拡大」ボタンを押したら ウィンドウ／画像を拡大して表示 「リセット」ボタンを押したら ウィンドウ／画像を元のサイズに戻してして表示 をしたいのですが、どうすればいいですか？ 関連ありそうな、ソースを以下に書きます。 dspimg.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>文献表示</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- //画面／画像を拡大／縮小 function win_zoom(w,h){ window.resizeTo(w,h) location.reload(); } //--> </script> </head> <body> echo '<img id="dspimg" src="ppp.jpeg" alt="ppp.jpeg" width=600 height=400 " />'; <?php //拡大 ?> <INPUT type="button" Value="拡大" onclick="win_zoom(800,700)" > echo '<div align="center">'; <?php //リセット ?> <INPUT type="button" Value="リセット" onclick="win_reset(600,500)" > </div> </body> </html>

  • 心臓のように脈打つフラッシュを作りたいです

    皆さんこんにちは。 以前どこかで見かけたのですが、心臓のように脈打つパーツをフラッシュで作りたいです。 詳細は下記のような感じで。。 ・htmlベースのページの真ん中にそのフラッシュを置いて、 ドクドクさせたい。 ・イラストをドクドクさせたい。 　イラストが拡大⇔縮小するような感じでかまわない。 ・背景に画像を敷きたいので、 　イラストの周りは透過させたい っといった感じです。 ドクドクさせたいです！ 当方、FlashMXを使っており、flashはど素人です （html、css、javascriptはある程度できます）。 ずばりのやり方や参考になるサイトなど 教えていただければ助かります。 特にflashにこだわりがあるわけでなありませんので、 gifアニメなどで実現できるのであれば その方法を教えていただけませんでしょうか。 詳しい方、よろしくお願いします！

  • サムネイルクリックで別ウィンドウに拡大画像表示

    javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか？ よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する