การใช้ Javascript ตรวจสอบจอ เพื่อเลือกภาพเป็น Background

วิธีตรวจสอบการ Set หน้าจอ ของเครื่องอื่นๆ เพื่อเลือกภาพมาทำ Background ให้เหมาะสม

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

วิธีการไม่ยากครับ

  1. สร้างภาพ Background ขึ้นมาโดยมีขนาดดังนี้
    • 640 x 480 (ตอนนี้คงไม่มีใครใช้ขนาดนี้แล้วมั้ง แต่ทำไว้เผื่อ)
    • 800 x 600 อันนี้หลายคนก็ใช้อยู่
    • 1024 x 768 ส่วนมากก็จะเป็นอันนี้
    • 1280 x 1024 ใครจะใหญ่ๆ ก็เริ่มจะเป็นขนาดนี้แล้วครับ
    • 1400 x 1050 ใหญ่มากเลยนะเนี่ย
  2. ใช้ Javascript เก็บชื่อไฟล์เหล่านี้เอาไว้ใน Array
  3. ใช้ Javascript ตรวจสอบการตั้งค่าจอภาพ
  4. เลือกภาพให้ได้ตามที่ตรวจสอบได้ แล้วกำหนดให้ภาพนั้นนำมาใช้เป็น Background

ทั้งหมดนี้ ไม่ได้มีอะไรแปลกใหม่มากมาย เพียงแต่นำ Javascript เล็กๆ น้อยๆ มาประยุกต์เท่านั้นเองครับ ซึ่งใครศึกษามาบ้าง ก็คงไม่มีปัญหาอะไรเท่าไหร่ แต่ถ้าไม่เคยทำ หรือไม่ค่อยได้ใช้ ก็ค่อยๆ ทำความเข้าใจตามนะครับ

การเก็บชื่อของไฟล์ภาพใน Array
ทำดังนี้ครับ

<script language=javascript>
var myBackground=new Array(5)
myBackground[0] = "//เว็บที่เก็บภาพ/bg640.jpg"
myBackground[1] = "//เว็บที่เก็บภาพ/bg800.jpg"
myBackground[2] = "//เว็บที่เก็บภาพ/bg1024.jpg"
myBackground[3] = "//เว็บที่เก็บภาพ/bg1280.jpg"
myBackground[4] = "//เว็บที่เก็บภาพ/bg1400.jpg"
</script>

การตรวจสอบหน้าจอ
จริงๆ การตรวจสอบหน้าจอนี้ เราตรวจสอบแค่ขนาดของความกว้างก็ได้ครับ เพราะยังไง มันก็เป็นอัตราส่วน 4:3 กันอยู่แล้ว

<script language=javascript>
width = window.screen.width;
switch (width){
     case 640 : document.body.background = myBackground[0]; break;
     case 800 : document.body.background = myBackground[1]; break;
     case 1024 : document.body.background = myBackground[2]; break;
     case 1280 : document.body.background = myBackground[3]; break;
     case 1400 : document.body.background = myBackground[4]; break;
}
</script>

แค่นี้ล่ะครับ วิธีจะทำให้ง่ายๆ ก็ทำใส่ไฟล์ .js เอาไว้ข้างนอก แล้วเรียกเอานะครับ เช่น

<script language=javascript src="//เว็บของเรา/ไฟล์.js"></script>

แล้วทีนี้ในไฟล์ .js ของเราก็ไม่ต้องมี <script..> เพื่อเปิด กับ </script> เพื่อปิดนะครับ เพราะมันจะ error
แล้วในไฟล์ js นี้ สามารถขึ้นบรรทัดใหม่ได้ปกติครับ (ถ้าเราใส่ javascript ใน blog แล้วมีขึ้นบรรทัดใหม่ มันจะ error)

ปล. แถมให้ครับ ว่าเครื่องของคุณมีการตั้งค่าหน้าจอเอาไว้ยังไงบ้าง
หน้าจอของคุณตอนนี้ มีความกว้าง Pixel
และมีความสูงของจอเป็น Pixel




Create Date : 20 มีนาคม 2548
Last Update : 20 มีนาคม 2548 21:33:23 น.
Counter : 2319 Pageviews.

41 comments
สวัสดีปีใหม่ ๒๕๖๗ มาช้ายังดีกว่าไม่มา
(2 ม.ค. 2567 07:30:30 น.)
พบเจอภาพอะไร? ส่วนหนึ่งของภาพน่าสนใจจึงตัดมาใช้ คุกกี้คามุอิ
(1 ม.ค. 2567 03:56:23 น.)
อุ้มสีมาทำบุญ ๙ วัด ในวันขึ้นปีใหม่ที่จ.อุบลราชธานี อุ้มสี
(3 ม.ค. 2567 19:10:02 น.)
ประสบการณ์ ทำพาสปอร์ตที่สายใต้ใหม่ newyorknurse
(2 ม.ค. 2567 17:45:17 น.)
  
เฮ้ย มหัศจรรย์มากกกกกกกกก

ขนาดไม่ได้อยู่ด้วยกัน
ทำไมถึงรู้ได้ล่ะ ว่าเครื่องผม 1024 pixel
โอ้คุณพระ
โดย: หมาร่าหมาหรอด วันที่: 20 มีนาคม 2548 เวลา:21:59:56 น.
  
ขอเวลางมก่อนนะคะ

ขอบคุณมากค่ะ ...
โดย: ขอบคุณที่รักกัน (blueberry_cpie ) วันที่: 20 มีนาคม 2548 เวลา:22:19:08 น.
  
ทำไม่เปนค่ะ ทำไง...

ปล.อ่านแล้วแต่งง..ว่าต้องใส่ตรงไหน
โดย: ngomngay วันที่: 20 มีนาคม 2548 เวลา:23:01:32 น.
  
ขอบคุณค่า...
โดย: prncess วันที่: 20 มีนาคม 2548 เวลา:23:13:44 น.
  
ของเด็กๆคับ JScript เหอๆ

แต่ก็จุดประกายผมได้เยอะนะนี่
โดย: Shelling Ford` วันที่: 20 มีนาคม 2548 เวลา:23:29:25 น.
  
แหงบๆ

ไอ้เขียนอะไม่ยากหรอกน้ากึ่ง แต่ว่าที่ยากน่ะ รูปหลังฉากง่ะ ครืออออ ขี้เกียจวาดหลายๆอันอะน้า

คิคิคิ
โดย: เดาได้ป่าวว่าเราเป็นคราย (Sparty ) วันที่: 21 มีนาคม 2548 เวลา:5:29:06 น.
  
 
 

กึ่งยิงกึ่งผ่าน say :

เวลาทำหลายๆ รูป ก็ทำทีเดียวดิครับ เริ่มทำจากรูปใหญ่ๆ ก่อน แล้วค่อยลดขนาดลงมาทีละ step แล้วค่อย save ให้เป็นขนาดที่ต้องการ อย่างนี้ความคมชัดก็ไม่เสียด้วยล่ะครับ
 
 
:: go to my BLOG ::
โดย: . IP: 61.91.87.70 วันที่: 21 มีนาคม 2548 เวลา:8:30:25 น.
  
อืมๆ พอเข้าใจ concept ค่ะ แต่ว่า ไม่ทำดีกว่า ปวดกระโหลก

ง่า ขอปวดกระโหลกเพราะฟังเพลงร็อคอย่างเดียวก็พอแล้ว คริคริ ><'
โดย: Together In 80s Dream วันที่: 21 มีนาคม 2548 เวลา:10:13:58 น.
  
อื่ม.. ได้ไอเดียร์แระ
วิธีไม่ยากแต่ลืมคิด ขอบคุงมาก
โดย: นัท IP: 61.90.114.164 วันที่: 21 มีนาคม 2548 เวลา:22:55:21 น.
  
ขอบคุณที่เขียนให้อ่านค่ะ แต่ตอนนี้คงไม่ต้องทำละ เพราะว่าเวปที่ทำมันใช้ bg แบบ repeat ยังไงก็ไม่เกี่ยวอยู่แล้วนิ
โดย: รำเพย วันที่: 22 มีนาคม 2548 เวลา:6:54:04 น.
  
ขอบคุณพี่กึ่งฯครับ ได้ความรู้อีกแล้ว
..ว่าแต่พี่ไม่เปลี่ยนเจ้าbackgoundบ้างล่ะครับ
โดย: MooG.G วันที่: 22 มีนาคม 2548 เวลา:11:12:05 น.
  
 
 

กึ่งยิงกึ่งผ่าน say :

ช่วงนี้ยังไม่ค่อยว่างเลยครับ อยากจะเปลี่ยน bg ของตัวเองอยู่เหมือนกันครับ จริงๆ อยากทำ theme ประกวดเลยด้วยซ้ำ แต่ไม่ทัน ไม่มีเวลาเลย งานเยอะมั่ก เดี๋ยวอีกคงไม่นาน จะได้ปรับหน้าตา blog ใหม่อ่ะครับ รอว่างๆ อีกแป้บก่อนนะ อิอิ
 
 
:: go to my BLOG ::
โดย: กึ่งยิงกึ่งผ่าน วันที่: 22 มีนาคม 2548 เวลา:12:31:37 น.
  
เย้


ขอบคุณมากค่ะ


น่ารักดีแฮะบล็อคนี้
โดย: แฟนไท (แฟนไท ) วันที่: 23 มีนาคม 2548 เวลา:11:44:16 น.
  
มาเยี่ยมพี่เวอร์ค่ะ....รอดูบล๊อกใหม่อยู่นะคะ
โดย: Mu_in_love (Mu_in_love ) วันที่: 23 มีนาคม 2548 เวลา:18:29:23 น.
  
..สวัสดีจ้า...น้องใหม่..มาขอคำแนะนำด้วยนะจ้า..แล้วก้ ขอ แอด ด้วยนะจ้า..ขอบคุณที่ให้เกล็ดความรู้นะจ้า..
โดย: จอมแก่นแสนซน วันที่: 24 มีนาคม 2548 เวลา:4:34:40 น.
  
มานั่งเรียนด้วยคนค๊า

โดย: น.ส.มารร้าย วันที่: 24 มีนาคม 2548 เวลา:7:22:34 น.
  
ขอบคุณฟามรู้เจ๋งๆฮ่ะพี่เวอร์
โดย: BloodHound วันที่: 24 มีนาคม 2548 เวลา:20:04:30 น.
  
มาแสดงความยินดีกับรางวัลดีเด่น BlogGang Popular Award สาขา Blog สรรสาระ [blog ไหน ที่คุณเข้าไปแล้ว ได้ความรู้เพียบ]

และรางวัลดีเด่น BlogGang Popular Award สาขา Blogger ไอที [เจ้าของ blog ที่มักจะมีเทคนิคน่าสนใจ มาแนะนำการตกแต่ง blog ถูกใจคุณเสมอ]
โดย: Together In 80s Dream วันที่: 25 มีนาคม 2548 เวลา:19:44:10 น.
  
เข้ามาแสดงความยินดีกับรางวัลค่ะแอบมาดูเทคนิคบ่อยๆอิอิ ฉลองค่ะฉลอง Image hosted by Photobucket.com
Image hosted by Photobucket.com
โดย: V-FAN วันที่: 25 มีนาคม 2548 เวลา:20:53:20 น.
  
อืมมม แล้วพวกที่ดูจากมือถือละคะ
พวกนี้ขนาดหน้าจอแตกต่างหลากหลายมาก
โดย: นู๋เองง่ะ วันที่: 26 มีนาคม 2548 เวลา:0:54:12 น.
  
..แวะมา รายงานตัว จ้า..แล้วก็ ดีจัยกับ คนที่ชนะ ด้วยนะจ้า
โดย: จอมแก่นแสนซน วันที่: 26 มีนาคม 2548 เวลา:1:00:40 น.
  


เอารางวัลมาแจกคับ ดีใจด้วยฮับ
โดย: รำเพย วันที่: 26 มีนาคม 2548 เวลา:7:16:39 น.
  
หมั่นไส้คนดังฮะ
โดย: เคราเ IP: 61.90.121.147 วันที่: 26 มีนาคม 2548 เวลา:10:50:52 น.
  
ยินดีด้วยกับรางวัลค่า
แล้วก็ มาแอบอ่านอีกแล้ว ก็ได้ความรู้อีกแล้ว
ถึงจะงงๆอยู่บ้าง แต่ก็ดีค่ะ
โดย: THE BEGINNING วันที่: 27 มีนาคม 2548 เวลา:1:57:30 น.
  
ยินดีด้วยค่ะ
โดย: หญ้าหนวดแมว วันที่: 27 มีนาคม 2548 เวลา:4:09:45 น.
  
แอบมาดูค่า
โดย: นมัสเต วันที่: 27 มีนาคม 2548 เวลา:11:02:50 น.
  
ขอบคุณคับ ทามได้ๆ อิอิ
โดย: nopu.th วันที่: 27 มีนาคม 2548 เวลา:11:49:30 น.
  
 
 

กึ่งยิงกึ่งผ่าน say :

ขอบคุณทุกๆ คนมากเลยนะครับ อิอิ ดีใจๆๆๆ
 
 
:: go to my BLOG ::
โดย: .. IP: 61.91.87.190 วันที่: 27 มีนาคม 2548 เวลา:13:02:56 น.
  
..ยังดีจัย แก้มบาน อยู่หรือเป่าจ้า..คุง กึ่งยิงกึ่งผ่าน..
โดย: จอมแก่นแสนซน วันที่: 27 มีนาคม 2548 เวลา:14:01:04 น.
  
comment# 14
ยินดีด้วยครับเฮีย เข้าชิง2 ได้ครบ 2 รางวัลเลย งวดหน้ามาแข่งรางวัลblogสวยกับเจ๊เพยกันดีกว่า สู้ว้อยยยย
โดย: หมาร่าหมาหรอด วันที่: 27 มีนาคม 2548 เวลา:16:15:15 น.
  
comment# 31
ขออภัย ใส่comment ผิด ต้อง31 อิอิ
โดย: หมาร่าหมาหรอด วันที่: 27 มีนาคม 2548 เวลา:16:16:43 น.
  
เหวยยยยยย อะไรกันสองลุงนี่ จะมาแข่งอะไรกับเพย เพยทำได้ที่ไหนกัน ถ้าไม่ได้สองลุงช่วยน่ะ บ๊อกเพยสงสัยล่มรายวัน ไม่เอาน่า ลูกศิษย์ได้รางวัล อาจารย์ทั้งสองน่าจะดีใจน้าาาาา
โดย: รำเพย วันที่: 27 มีนาคม 2548 เวลา:18:01:18 น.
  
sa wad dee kha
โดย: แม่มดน้อย23 วันที่: 28 มีนาคม 2548 เวลา:8:46:47 น.
  
เข้ามาดู บล็อคได้รางวัล ^^


สาระเพียบบบบบ จริงๆ
โดย: เปลี่ยนชื่อไปเรื่อย วันที่: 28 มีนาคม 2548 เวลา:9:08:22 น.
  
ถ้าผมใช้เป็นแบบนี้เลยจะได้ไม๊อ่าครับ
แบบไม่ต้องทำอาเรย์ อ่ะ

switch (width){case 640 : document.body.background =" //www.เวปที่เราเก็บรูป.jpg"; break;
..
..
}

โดย: หมาร่าหมาหรอด วันที่: 2 เมษายน 2548 เวลา:2:12:12 น.
  
เยี่ยมมากครับ
และขอบคุณมากครับ
โดย: charan (Charan ) วันที่: 2 เมษายน 2548 เวลา:15:24:07 น.
  
ง่ะ สุดยอดเลย
โดย: Adct2Luv IP: 203.172.66.134 วันที่: 7 เมษายน 2548 เวลา:10:49:21 น.
  
บอกได้คำเดียวว่า.......งง

ไม่เข้าใจอ่ะ
โดย: APEC วันที่: 4 พฤษภาคม 2548 เวลา:16:17:55 น.
  
เข้าใจ concept ครับ แต่ว่า ไม่มีความสามารถด้าน js
โดย: dont wanna no วันที่: 15 มิถุนายน 2548 เวลา:23:35:00 น.
  
รบกวนถามครับ การใช้งานไฟล์ .js
เวลาเขียนพาทในโฮมเพจเพื่อดึงมาใช้งาน นี่ เขียนเต็มเลยใช่ไหมครับ เคยเห็นบางเวบเขียน "/js/filename.js"
เชาว่า / แทนรูท เลย

ผมทำทั้งสองอย่างไม่ได้ง่ะ งงๆ รบกวนตอบให้ทีน่ะครับ
ขอบคุงงับ
icenasa@yahoo.com
โดย: ice IP: 124.120.143.97 วันที่: 7 มิถุนายน 2549 เวลา:15:52:51 น.
  
แจ่มมากเลยครับ
โดย: nics_focus IP: 124.121.137.78 วันที่: 5 สิงหาคม 2551 เวลา:0:40:05 น.
ชื่อ :
Comment :
 *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

Over.BlogGang.com

กึ่งยิงกึ่งผ่าน
Location :
กรุงเทพ  Thailand

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 4 คน [?]

บทความทั้งหมด