Group Blog
 
<<
มีนาคม 2548
 12345
6789101112
13141516171819
20212223242526
2728293031 
 
20 มีนาคม 2548
 
All Blogs
 

การใช้ 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
41 comments
Last Update : 20 มีนาคม 2548 21:33:23 น.
Counter : 1847 Pageviews.

 

เฮ้ย มหัศจรรย์มากกกกกกกกก

ขนาดไม่ได้อยู่ด้วยกัน
ทำไมถึงรู้ได้ล่ะ ว่าเครื่องผม 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 ตกแต่งข้อความได้เฉพาะสมาชิก
 


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

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

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




มีคนถามมาเยอะ ว่าชื่อผมแปลว่าอะไร บอกง่ายๆ ว่ามาจากฟุตบอลครับ "กึ่งยิงกึ่งผ่าน" เป็นการส่งลูกไปที่

หน้าประตูฝ่ายตรงข้าม โดยผู้เล่นที่เลี้ยงลูกมาจากทางด้านข้างของสนาม พอถึงจังหวะ ก็ผ่านลูกมาให้เพื่อนที่วิ่งมารออยู่หน้าประตู .... ต่าแว่!!

... แต่ว่า!!! ... ลูกมันเลยเพื่อนไป แต่ก็ไม่ถึงประตู เหมือนจะเป็นการยิงประตูก็ไม่ใช่ จะส่งให้เพื่อนก็ไม่ใช่


นี่จึงเป็นที่มาของคำว่า "กึ่งยิงกึ่งผ่าน" ครับ

ผมไม่ได้คิดเองแต่อย่างใด แต่เอามาจากการดูฟุตบอลครับ

ปล. ชื่อผมนี่บ่งบอกเลยว่า "ฟุตบอล" แต่ผมไม่ได้เล่นห้องศุภฯ นะครับ .. แหะ แหะ แหะ
Friends' blogs
[Add กึ่งยิงกึ่งผ่าน's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.