Trickster guide & IT For LifE

อิอิ....วันนี้เกิดคึกขึ้นมาครับ

สงสัยวันนี้ผีออก (หรือผีเข้ากันหว่า - -")

ไ่ม่ใช่อย่างนั้นหรอกครับ...แต่อารมณ์ดีเพราะวันนี้แดดออก

หลังจากที่ เชียงใหม่แดดไม่ออกมาหลายวันแล้ว....อิอิ...

เอาล่ะครับวันนี้ก็ตามหัวข้อเอ็นทรี่ล่ะเน้อ สะแว๊บรูปภาพในภาพเดียว

เอ๊ะ...ยังไงกันหว่า มันเป็นยังไงกันน้อ....

สลับรูปในคราวนี้ต้องใช้ CSS(style sheet) มาช่วยอ่ะจ้า

มาดูขั้นตอนกันเลยดีกว่านะครับ **แนะนำให้ทำใน dream ก่อนจะอัพจริงครับ

• ขั้นแรกก็ต้องเตรียมรูปภาพมาก่อนล่ะเน้อ(ดูตัวอย่างด้านล่างเลยจ้า)
  
• เดี๋ยวตั้งแต่ขั้นตอนนี้ผมขอยกตัวอย่างที่ผมใช้ในบล็อคของผมเองเลยก็แล้วกันนะครับ
  ในขั้นตอนนี้ผมก็จะเตรียม div ครับ ซึ่งถ้าเกิด view source ดูหรือเอาไปเปิดใน Dream
  ก็จะเห็นตามภาพด้านล่างนี้เลยครับ
  
  ตามภาพข้างบนจะเห็นว่าผมเปิด div ไว้สองรอบ ก็คือตัว id=box1 เป็นกรอบรูปน่ะครับ
  ส่วน id=logo ก็เป็นตัวภาพที่จะสลับ ซึ่งจะต้องใช้ a href มาช่วยอีกทีด้วยครับ
  ถ้าถามว่าเห้ย...ใส่ div ไปอย่างนี้ตรงไหนกันฟะ
  คำตอบก็คงจะหนีไม่พ้นช่อง link ล่ะเน้อ... แต่ใครจะเอาไปใส่ custom code ก็สุดแล้วแต่ล่ะครับ
  นานาจิตตัง...ครับ...
• หลังจากที่ทำ div แล้ว มันก็ต้อง control ใน css ใช่มั้ยล่ะครับ
  วิธีนี้ผมเล่นใส่ใน css ของบล็อค เราน่ะล่ะครับ
  ถ้าไม่เชื่อก็จิ้มไปดูเลยก็ได้ครับ เอ้าจิ้ม(จิ้มแรงๆงั้นไม่เห็น)
  มันจะอยู่ด้านล่างสุดเลย น่ะครับ (ว่าแล้วก็ไปดูภาพประกอบกันต่อเลย)
  
  
• ตรงนี้ผมขออธิบายตั้งแต่ ตัว id box1 เลยก็แล้วกันนะครับ
  
  อย่างที่เคยบอกในตอนต้นแล้วนะครับว่าตัวนี้ผมใส่เป็นกรอบนอกสุด
  กับใส่ bg ไว้เฉยๆก็ไม่มีอะไรมากหรอกครับใส่ width height ให้มันซะ
  จะเห็นว่า ผมใส่ absolute ไปด้วยก็ให้มันลอยครับ...
• มาดูตัวต่อไปกันจ้า
  
  สำหรับ id ตัวนี้ที่ผมใส่เข้าไปก็ กึ่งๆคุมภาพภายนอกอีกทีเหมือนกัน
  แ่ต่ก็เคยคิดๆเหมือนกันว่า...ถ้าไม่ใส่ก็คงจะไม่เป็นไร
  (เริ่มจะเวิ่น อีกแล้วครับพี่น้อง....)
  นายXX:ก็แกใส่ไปแล้วไม่ใช่หรอ
  นายpp:อืม....- -"
  นายXX:เวนกำ.....นี่เมิงพูด อืม...ได้คำเดียวเนี้ยะนะ
  นายpp:..........อืม..........
• เอ้าๆก่อนจะป่วงไปกว่านี้ไปดูไอ่ที่เหลือกันดีกว่าครับ
  
  ตรงนี้จะให้ดูหลักๆก็ไอ่ที่ผมวงเอาไว้น่ะล่ะครับ
  ตรง id ที่เป็น a:link มันจะเป็นภาพก่อนจะ on mouse over ใช่มั้ยครับ
  0 0 ที่ผมใส่ มันก็คือ ค่า x,y น่ะล่ะครับ
  ส่วน a:hover ก็คือตอนที่เรา เอาเม้าส์ไปจิ้มที่รูปมันแล้ว
  เราก็เซ็ตให้มันเคลื่อนภาพลงมา ถ้าดูในวงที่สอง(ด้านล่าง)
  จะเห็นว่ามันเป็น 0 -56px ใช่มั้ยครับค่าในแกน y ที่ติดลบคือมันจะลงมาด้านล่างนั่นเอง
  ใครยังงงก็ไปดูภาพประกอบกันเลย
  
  คงจะเข้าใจขึ้นไม่มากก็น้อยนะครับ
  
  
• หลังจากที่เตรียมการทุกอย่างเสร็จสรรพ ก็ลองจับมายัดใส่บล็อคเราเลยครับ
  สรุปอีกทีนะครับ
  1. เตรียมภาพที่จะทำการสลับ
  2. เอา div ที่เตรียมไว้ยัดใส่ในช่อง link (อย่าลืมใส่ชื่อ id หรือ class ให้มันด้วย)
  3. กำหนด ตัว div ของเราใน css ว่าจะให้มันลอย มันเด้งไปอยู่ตรงไหน
  แล้วก็กำหนดค่า x y ในส่วนของ a:link , a:hover
• คือจะบอกครับว่า ตรงค่าที่ใส่ใน x y ของ a:hover นั้นต้องลองผิดลองถูกดูครับ
  อาจจะรีเฟรช หน้าบ่อยหน่อยนะครับ...อิอิ

เอาล่ะจ้า....ตัวอย่างที่เสร็จแล้วของผมก็คงจะหนีไ่ม่พ้น ภาพที่อยู่บนหัวบล็อคนั่นล่ะ
แค่นี้ก็เสร็จแล้้วล่ะจ้า....

วันนี้ก็เขียนมา่ยาวเหมือนกันเน๊าะ....ไม่เข้าใจตรงไหนจะให้อธิบายเพิ่มก็บอกได้นะครับ

งานนี้ บ่มี กั๊ก....อิอิ

คงจะจบแค่นี้ล่ะครับวันนี้...บ๋ายบายจ้า....