หน้าต่างป๊อปอัปหรือป๊อปอันเดอร์กำลังเป็นที่นิยมมากขึ้นบนอินเทอร์เน็ต หรือพูดง่ายๆ ก็คือ รูปภาพป๊อปอัป เจ้าของเว็บไซต์จำนวนมากมักต้องสร้างเว็บไซต์เพื่อการโฆษณา แต่ทุกคนไม่ทราบอัลกอริทึมสำหรับการสร้าง
มันจำเป็น
- - โปรแกรมแก้ไข HTML;
- - สมุดบันทึก;
- - โฮสติ้ง
คำแนะนำ
ขั้นตอนที่ 1
สร้างหรือเปิดหน้าเว็บใหม่ใน HTML หรือโปรแกรมแก้ไขข้อความ คุณสามารถใช้โปรแกรมยอดนิยม เช่น Dreamweaver, Expression Web และอื่นๆ เพื่อจุดประสงค์นี้ หากคุณเพิ่งเริ่มก้าวแรกในภาษาการเขียนโปรแกรม HTML ให้ใช้ "แผ่นจดบันทึก" ปกติ
ขั้นตอนที่ 2
วางโค้ดต่อไปนี้ระหว่างแท็ก "head" และ "/ head":
.ภาพขนาดย่อ {ตำแหน่ง: ญาติ; ดัชนี z: 0;}
.ภาพขนาดย่อ: โฮเวอร์ {สีพื้นหลัง: โปร่งใส; ดัชนี z: 50;}
.thumbnail span {/ * CSS สำหรับภาพขยาย * / ตำแหน่ง: สัมบูรณ์; พื้นหลังสี: lightyellow; ช่องว่างภายใน: 5px; ซ้าย: -1000px; เส้นขอบ: 1px ประสีเทา; การมองเห็น: ซ่อน; สีดำ; การตกแต่งข้อความ: none;}
.thumbnail span img {/ * CSS สำหรับภาพขยาย * / border-width: 0; ช่องว่างภายใน: 2px;}
.thumbnail: hover span {/ * CSS สำหรับภาพขยายเมื่อโฮเวอร์ * / การมองเห็น: มองเห็นได้; ด้านบน: 0; ซ้าย: 65px; / * ตำแหน่งที่ภาพที่ขยายควรชดเชยในแนวนอน * /}
ขั้นตอนที่ 3
ปรับออฟเซ็ตแนวนอนของรูปภาพป๊อปอัปโดยเปลี่ยนค่าในบรรทัดสุดท้ายของโค้ด จัดสรรช่องว่างระหว่างแท็ก "body" และ "/ body" ที่คุณต้องการให้รูปภาพปรากฏบนหน้าเว็บ จากนั้น คัดลอกและวางโค้ดต่อไปนี้:
ตัวอย่างชื่อข้อความ
ตัวอย่างชื่อข้อความ"
ขั้นตอนที่ 4
แทนที่ "folder / largepci1.jpg" ด้วยไฟล์ที่ใช้สำหรับรูปภาพป๊อปอัป ทำเช่นเดียวกันกับรหัสบล็อกที่สอง เปลี่ยนบรรทัด "ตัวอย่างชื่อข้อความ" ในสิ่งที่ควรจะเขียนในภาพป๊อปอัป เปลี่ยนค่าความสูงและความกว้างในโค้ดเพื่อปรับขนาดของรูปภาพป๊อปอัป สร้างบล็อกโค้ดเพิ่มเติมเพื่อเพิ่มภาพสเก็ตช์เพิ่มเติม ป้อนแอตทริบิวต์ แท็ก และข้อความอื่นๆ ในเอกสาร HTML ตามต้องการ บันทึกไฟล์ HTML แล้วอัปโหลดไปยังเว็บเซิร์ฟเวอร์ของคุณ