締切済み

取得した解像度から判断して画像を折りたたみたい

2009/08/21 10:12

会社のHPの修正をしています。トップページのバナー画像がとても大きいので、ノートPCやネットブック等の小さい画面で見る場合は画像が隠れるようにしたいのですが、ちょうどいい例文が見付かりません。サイト訪問者の画面解像度を取得 ↓ 処理１：X値が1024以下ならバナー画像を折りたたむ処理２：X値が1024より大きい場合はバナー画像をそのまま表示としたいです。初心者なのでできれば細かく教えてください　m(_ _)m

u-ma0810
お礼率55% (5/9)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

yambejp
ベストアンサー率51% (3827/7415)

2009/08/21 15:17 回答No.2

たとえばこんな感じで・・・ <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>

質問者

お礼 2009/08/24 09:49

ありがとうございます　m(_ _)m お礼が遅くなってしまいました… 実際に試してみるとIEでは動くのですが、Sleopnirでうまく動かず原因を考えています。まずはソースの理解からいろいろ悩んでみようと思います。

yambejp
ベストアンサー率51% (3827/7415)

2009/08/21 11:48 回答No.1

＞バナー画像を折りたたむとは具体的にどうしたいのでしょうか？単に表示しないのか、何かクリックすると表示したいのか？サイズを小さく表示したいのか？

質問者

補足 2009/08/21 13:07

ページを開いた時は画像を隠しておいてボタンをクリックすると表示されるようにしたいです。最初は <script> if(screen.width <= "1024"){ location.replace("index2.html"); } </script> としていて、解像度が1024以下の場合はあらかじめ画像を削除した index2にジャンプするようにしていたのですが、 TOPページを分けたくないとの事なので新しい手を考えています。よろしくお願いします。