- 締切済み
取得した解像度から判断して画像を折りたたみたい
会社のHPの修正をしています。 トップページのバナー画像がとても大きいので、 ノートPCやネットブック等の小さい画面で見る場合は 画像が隠れるようにしたいのですが、ちょうどいい例文が見付かりません。 サイト訪問者の画面解像度を取得 ↓ 処理１：X値が1024以下ならバナー画像を折りたたむ 処理２：X値が1024より大きい場合はバナー画像をそのまま表示 としたいです。 初心者なのでできれば細かく教えてください m(_ _)m
- u-ma0810
- お礼率55% (5/9)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばこんな感じで・・・ <style> .hide{display:none;} </style> <script> window.onload=function(){ var w=document.getElementsByTagName("body")[0].offsetWidth; if(w==0) w=window.innerWidth; var banner=document.getElementById("banner"); if(w < 1024){ var anchor=document.createElement("a"); anchor.appendChild(document.createTextNode("バナーを表示する")); anchor.setAttribute("href","#"); anchor.onclick=function(){banner.className="";this.className="hide";return false;} banner.parentNode.insertBefore(anchor,banner); }else{ banner.className=""; } } </script> <body> <img src="banner.jpg" id="banner" onload="this.className='hide'"> </body>
- yambejp
- ベストアンサー率51% (3827/7415)
＞バナー画像を折りたたむ とは具体的にどうしたいのでしょうか？ 単に表示しないのか、何かクリックすると表示したいのか？ サイズを小さく表示したいのか？
補足
ページを開いた時は画像を隠しておいて ボタンをクリックすると表示されるようにしたいです。 最初は <script> if(screen.width <= "1024"){ location.replace("index2.html"); } </script> としていて、解像度が1024以下の場合はあらかじめ画像を削除した index2にジャンプするようにしていたのですが、 TOPページを分けたくないとの事なので新しい手を考えています。 よろしくお願いします。
お礼
ありがとうございます m(_ _)m お礼が遅くなってしまいました… 実際に試してみるとIEでは動くのですが、Sleopnirでうまく動かず原因を考えています。 まずはソースの理解からいろいろ悩んでみようと思います。