CSS ทำภาพ Headshot หน้าบ้าน กับ reply ให้เป็นคนละภาพ

ส่วนที่หนึ่ง หลักการเหตุผล  

ที่มาของไอเดียนี้คือ แวะไปบ้านสวัสดีมัลติพลาย http://sawasdeemultiply.multiply.com/notes/item/687 แล้วเห็นโจ้ กำลังพูดถึงตัว P ของ premium member โดยกำลังพัฒนาโลโก้ SM อยู่

ผมก็เลยปิ๊งไอเดียต่อยอดครับ 

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

ดังนั้น ผมเลยเกิด ไอเดียว่า เอ ถ้าผมลองทำรูป HS ที่มีตัวอักษร สมมติว่าตัว เอ็ม ที่นี้ก็ เท่ส์ คล้ายๆพวกพรีเมี่ยมแล้วสิ 

แต่ปัญหาที่ตามมาคือ เอ๊ะ แต่ที่หน้าบ้านเรา ก็จะมีตัวเอ็มใหญ่ ขึ้นมาหราเลยสิ ไม่งามๆ

เลยลองยืมมืออากู๋ค้นหาดูสิว่ามีวิธีใด ที่จะเอารุปมาแปะตรง HS ในหน้าบ้านได้บ้าง โดยไม่ตรงกับ HS reply






ส่วนที่สอง แนวคิดทฤษฎี

แต่นแต๊น สุดท้ายก็พบวิธีครับ (จำไม่ได้แล้วว่าไปอ่านจากที่ไหนมา ไว้จำได้จะมาบอก) แค่เติมโค้ดสองตัวลงใน CSS ครับ


โค้ด บรรทัดแรก จะสั่งให้ไม่แสดง HSจริง ในหน้าบ้านเราครับ
โค้ด บรรทัดสองจะสั่งว่า แล้วไปหารูปที่ไหนมาใส่แทน HS เราในหน้าบ้านครับ (รูปเคลื่อนไหวก้ได้นะเออ แต่ทั้งนี้ทั้งนั้น size กว้างคูณยาว ควรจะท่ากับ hs เดิมๆของเรา)




.railbody .userlogo a img#user_logo_image {visibility:hidden;
}
.railbody .userlogo {
background:white url(รูปที่เราเอามาแทน);
background-repeat: no-repeat;
}





ส่วนที่สามสรุปผลการทดลอง
1.ทดลองทำ HS M ขึ้นมา ด้วยความช่วยเหลือของเพื่อนที่มากความสามารถ ลองก้อป HS ธรรมดาของผมไปเติม M
2.อัพโหลด HS M เข้าไปครับ ที่นี้ก็ M  หรามาเลย
3.ใส่โค้ดสองชุดลงไปในCSSครับ โดยในโค้ดชุดสอง ก็เอา URL ของHS เดิมที่ไม่มี M มาใส่ 




ส่วนที่สี่ วิธีประยุกต์ใช้
เราเอารูปอะไรก็ได้ ที่ไม่อยากอัพโหลดมาใส่ใน HS จริงของเรา มาโชว์ที่หน้าบ้านเราได้เสมอ รวมถึงรูป GIF เคลื่อนไหวด้วย

เสร็จแล้วครับ

งงไหมครับ อิอิ