Css Random Headshot

ความเดิมตอนที่แล้ว กล่าวถึงการทำ เฮดชอตในหน้าบ้านให้อิสระแตกต่างจากเฮดชอตที่รีพาย  http://notbirth.multiply.com/journal/item/319

วันนี้เองพี่สาวนางหนึ่ง  ได้มาถามว่า มีความเป็นไปได้มากน้อยเพียงใดที่จะทำให้ เฮดชอตที่ทำข้างต้น แรนด้อมได้เหมือนเฮดเดอร์ของบางบ้าน

สมองเราวิ่งตามคำถามที่รับมารอบนึง + จินตนาการอีกนิดหน่อย ก็ตอบโดนพลันว่า ในทางทฤษฏีนั้น "ได้"

ดังนั้นเอง เมื่อตอบว่าได้แล้ว ก็ต้องทำให้ได้เหอๆ  เรามาดูกันดีกว่าว่าจะให้ทำเช่นไร

ผมไปค้นๆอากู๋  เจอบ้านพี่สาวที่คุ้นเคยอีกท่านนึงอธิบายวิธีทำเฮดชอตแรนด้อมไว้

จึงตามต่อไปบ้านปรมัตอีกท่านนึงจึงถึงบางอ้อครับว่าแรนด้อมภาพนั้นทำกันยังไง

ว่าแล้วก็ลองทำดู ได้ผลสำเร็จดังนี้ กดรีเฟรซแต่ละครั้ง HS จะเปี๋ยนไป๋



อยากลองทำรึยังครับ  ถ้าไม่อยากก็จงจากไปซะอิอิ   ถ้ายังมีความอยากก็ตามมาต่อครับ

เริ่มจาก

1.เตรียมภาพ Headshot ผมก็เล่นง่ายๆคือ ใช้เฮดชอตที่มีอยู่เดิมนั่นแลโดยเอามาแค่ลิ้งครับ
เช่น ผมเตรียมไว้สัก 5ภาพ
http://images.นายเม้ง.multiply.com/logo/1
http://images.นายเม้ง.multiply.com/logo/2
http://images.นายเม้ง.multiply.com/logo/3
http://images.นายเม้ง.multiply.com/logo/4
http://images.นายเม้ง.multiply.com/logo/5

โดยในขั้นนี้เราสามารถนำลิ้งค์รูปมาจากที่ไหนก็ได้นะครับ รึจะอัพรูปไปที่ใดสักแห่งแล้วนำลิ้งค์มาใช้ โดยจะต้องกำหนดขนาดภาพ 100*100 พิกเซลครับ จะกำลังสวย




2.ใช้ notepad สั่งเซฟบรรทัดลิ้ง 5 บรรทัดในข้อ1 ให้เป็นไฟล์เท็ก สมมุติว่าชื่อ hs.txt   แล้วอัพโหลดไฟล์นี้ไปไว้ที่ใดที่หนึ่งในไซเบอร์สเปซ อิอิ  (โดยส่วนตัวผมก็อัพมันไว้บนมัลติพลายนี่แหละครับ โดยการ attach ไฟล์ไว้กับบล้อคใดหนึ่ง)
แล้วก้อปปี้โค้ดที่อ้างถึงไฟล์นี้มาไว้ซะ
เช่น http://images.นายเม้ง.multiply.com/attachment/0/ฟฟมทกดาสด่อาส/hs.txt





3.จัดการกับ css ของท่านครับ โดยเอา สามสี่บรรทัดนี้ไปต่อท้ายแถวในcss ครับ

.railbody .userlogo a img#user_logo_image {visibility:hidden;
}
.railbody .userlogo {
background:white url(http://202.44.54.2/cskku12/temp/random.php?file=http://images.นายเม้ง.multiply.com/attachment/0/ฟฟมทกดาสด่อาส/hs.txt);
background-repeat: no-repeat;
}


ตรงตัวอักษรสีม่วงนั้น ก็คือส่วนที่ก้อบมาจาก ข้อ 2 นั่นเอง



เสร็จแล้วครับทดลองกันได้   อ้อ ก่อนจะยุ่งกับโค้ด หรือ css อย่าลืมก้อปเก็บไว้ก่อนนะคร้าบบบบ  ด้วยความปรารถนาดี

---------------------------------------------------------------------------------------------------------------------------

แก้ไขเพิ่มเติม ตอนนี้ระบบเดิมใช้ไม่ได้ หากต้องการใช้ ให้ทำแบบนี้ครับ

http://app.cloverink.com/fwurl.php?url=http://images.นายเม้ง.multiply.com/logo/1,http://images.นายเม้ง.multiply.com/logo/2,
http://images.นายเม้ง.multiply.com/logo/3

เอาไปแทนที่

http://202.44.54.2/cskku12/temp/random.php?file=http://images.นายเม้ง.multiply.com/attachment/0/ฟฟมทกดาสด่อาส/hs.tx


จะได้หน้าตาประมาณนี้ครับ

.railbody .userlogo a img#user_logo_image {visibility:hidden;
}
.railbody .userlogo {
background:white url(http://app.cloverink.com/fwurl.php?url=http://images.นายเม้ง.multiply.com/logo/1,http://images.นายเม้ง.multiply.com/logo/2,
http://images.นายเม้ง.multiply.com/logo/3);
background-repeat: no-repeat;
}

ถอดความรู้จาก http://sawasdeemultiply.multiply.com/links/item/1070/1070