++ห้องเก็บของประจำตระกูลอะมีบ้า++

ลำดับตอนที่ #3 : code++เปลี่ยนBGให้เข้ากับขนาดหน้าจอ

ปัจจุบันนี้หน้าจอคอมฯ มีหลายขนาดเหลือเกิน... บางทีถ้าเรากำหนดภาพ bg หนึ่งเอาไว้แล้ว อาจจะดูพอดีในเครื่องหนึ่ง แต่ไปเล่นอีกเครื่องแล้วภาพอาจเล็กหรือใหญ่เกินไปก็ได้

มีวิธีแก้ขัดไปพลาง ๆ ให้ดูยังไงก็สวยทุกเครื่องมานำเสนอล่ะ....

แต่ก่อนอื่นต้องเตรียมไฟล์ภาพขนาดต่าง ๆ ให้เรียบร้อยก่อนนะ...


<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }


if (document.viewport.getDimensions()­ .getHeight() == 800) {
    $( 'body' ).setAttribute( 'background', '/img/bg-800x600.gif' );
} else if (document.viewport.getDimensions()­ .getHeight() == 1280) {
    if (document.viewport.getDimensions()­ .getWidth() == 768) {
        $( 'body' ).setAttribute( 'background', '/img/bg-1280x768.gif' );
    } else if (document.viewport.getDimensions()­ .getWidth() == 1024) {
        $( 'body' ).setAttribute( 'background', '/img/bg-1280x1024.gif' );
    } else {
        $( 'body' ).setAttribute( 'background', '/img/bg-1280x1200.gif' );
    }

//-->
</script>

เปลี่ยนตรงตัวอักษรสีแดงเป็นที่อยู่ของภาพขนาดตามที่ตัวอย่างบอกไว้ได้เลย

เท่านี้ก็เรียบร้อยล่ะ...



เครดิต++สัจนา