วิธีการสร้าง CSS บริสุทธิ์บนเอฟเฟกต์การซูมรูปภาพคลิก
CSS ไม่มี pseudoclass สำหรับ กำหนดเป้าหมายเหตุการณ์คลิก, และสิ่งนี้ถือว่าเป็นหนึ่งใน จุดปวดที่ใหญ่ที่สุด ของนักพัฒนาส่วนหน้า คลาสหลอกที่ใกล้ที่สุดคือ :คล่องแคล่ว
องค์ประกอบรูปแบบสำหรับช่วงเวลาที่ผู้ใช้กดเมาส์ไว้เหนือมัน.
อย่างไรก็ตามเอฟเฟกต์นี้มีอายุสั้น: เมื่อผู้ใช้ปล่อยเมาส์, :คล่องแคล่ว
ไม่ทำงานอีกต่อไป เราต้องหาวิธีอื่นให้ได้ จำลองเหตุการณ์คลิกใน CSS.
โพสต์นี้ถูกเขียนขึ้นเพื่อตอบสนองต่อคำขอของผู้อ่านและจะอธิบายวิธีการ กำหนดเป้าหมายเหตุการณ์การคลิกด้วย CSS บริสุทธิ์ ในกรณีการใช้งานเฉพาะ, การซูมภาพ.
คุณสามารถดูผลลัพธ์สุดท้ายด้านล่าง - โซลูชัน CSS-only สำหรับ การซูมภาพเมื่อคลิก.
เมื่อใดจึงจะใช้โซลูชัน CSS-Only
ก่อนที่ฉันจะดำเนินการต่อไปฉันอยากจะบอกว่าสำหรับการซูมภาพฉันแนะนำวิธีการ CSS เท่านั้น (ซึ่งเปลี่ยนขนาดของภาพ) เฉพาะเมื่อคุณต้องการ เดียว หรือ กลุ่มของภาพไม่กี่ภาพ เพื่อให้มีคุณสมบัติซูม.
สำหรับ เหมาะสม คลังภาพ JavaScript ให้ความยืดหยุ่นและประสิทธิภาพมากขึ้น.
เทคนิค Front-End ที่เราจะใช้
ตอนนี้คุณได้รับคำเตือนแล้วให้เราดูอย่างรวดเร็ว 3 เทคนิคสำคัญ เราจะใช้:
-
แท็ก HTML ที่อนุญาตให้เบราว์เซอร์ สร้างพื้นที่ที่ลิงก์ได้เหนือภาพ. อ่านเพิ่มเติมเกี่ยวกับ
องค์ประกอบในโพสต์ก่อนหน้าของฉัน.
-
usemap
คุณลักษณะของแท็ก, ที่เชื่อมโยงรูปภาพกับแผนผังรูปภาพ.
-
: เป้าหมาย
CSS pseudo-class ที่แสดงถึงองค์ประกอบที่ได้รับการกำหนดเป้าหมายโดยใช้ตัวเลือกรหัส.
1. สร้างฐาน HTML
ก่อนอื่นมาสร้าง HTML กันเถอะ ในรหัสด้านล่างเราเพิ่ม ภาพที่จะซูมและขยาย & ไอคอนปุ่มปิด สำหรับซูมเข้าและออก.
เป็นสิ่งสำคัญที่จะต้องมี ID บนภาพที่จะซูมและปุ่มปิดจะต้องเป็นลิงค์ที่มี href = "#"
คุณลักษณะฉันจะอธิบายว่าทำไมในภายหลังในโพสต์.
2. เพิ่ม CSS
เริ่มแรกไอคอนปิด ไม่ควรแสดง. ตำแหน่ง
, ขอบ-
, ซ้าย
, และ ด้านล่าง
คุณสมบัติ สถานที่ ขยายและปิดไอคอน ที่เราต้องการให้พวกเขาเป็น - ที่มุมขวาบนของภาพ.
ตัวชี้เหตุการณ์: ไม่มี;
กฎช่วยให้เหตุการณ์เมาส์ ผ่านไอคอนขยาย และ ไปถึงภาพ.
.img height: 150px; ความกว้าง: 200px; .cl background-image: url ("Close-icon.png"); พื้นหลังซ้ำ: ไม่ทำซ้ำ; ด้านล่าง: 418px; แสดง: ไม่มี; ความสูง: 32px; ซ้าย: 462px; margin-top: -32px; ตำแหน่ง: ญาติ; ความกว้าง: 32px; . ขยาย bottom: 125px; ระยะขอบซ้าย: -32px; ระยะขอบ - ขวา: 16px; ตัวชี้เหตุการณ์: ไม่มี; ตำแหน่ง: ญาติ;
3. เพิ่มแผนที่รูปภาพ
บนแผนที่รูปภาพ พื้นที่คลิกได้ ควรจะเป็น ที่มุมขวาบน ของรูปภาพด้านล่างไอคอนขยายและขนาดของมัน วาง องค์ประกอบก่อนหน้าแรก
แท็กใน HTML เราจะผูกรูปภาพกับแผนที่ในขั้นตอนต่อไป.
ในบล็อกรหัสด้านบน แท็กกำหนด รูปร่างขนาดและ URI ของพื้นที่ที่ลิงก์ได้ ภายในแผนที่รูปภาพ สำหรับ รูปทรงสี่เหลี่ยมผืนผ้า,
รูปร่าง
คุณลักษณะใช้เวลา ดูแลรักษา
ค่าและ สี่ค่า ของ coords
คุณลักษณะแสดงระยะทางเป็นพิกเซลระหว่าง:
- ขอบด้านซ้ายของรูปภาพ & ขอบด้านซ้ายของพื้นที่ลิงก์
- ขอบด้านบนของรูปภาพและขอบด้านบนของพื้นที่ลิงก์
- ขอบด้านซ้ายของภาพ & ขอบด้านขวาของพื้นที่ลิงก์
- ขอบด้านบนของรูปภาพและขอบด้านล่างของพื้นที่ลิงก์
ค่าของ href
คุณลักษณะต้องเป็น hash identifier ของรูปภาพ (นี่คือเหตุผลที่ภาพควรมี รหัส
).
4. ผูกรูปภาพกับ Image Map
เพิ่ม usemap
คุณลักษณะกับภาพเพื่อ ผูกเข้ากับแผนที่ภาพ. ค่าของมันจะต้องเป็น ตัวแทนแฮชของ ชื่อ
คุณลักษณะของ แท็ก เราเพิ่มในขั้นตอนที่ 3.
พื้นที่ที่สามารถคลิกได้ของแผนที่ภาพในขณะนี้ อยู่ด้านหลังปุ่มขยาย. เมื่อผู้ใช้คลิกปุ่มขยายมันเป็นพื้นที่ที่สามารถคลิกได้ซึ่งถูกคลิกตามความเป็นจริง - โปรดจำไว้ว่าเราได้สร้างปุ่มขยาย “พอควร” กับ ตัวชี้เหตุการณ์: ไม่มี;
กฎในขั้นตอนที่ 2.
วิธีนี้ผู้ใช้ กำหนดเป้าหมายภาพเอง ด้วยการคลิกและหลังจากคลิก URI จะถูกต่อท้ายด้วย "# img1"
ตัวระบุส่วน.
5. สไตล์ : เป้าหมาย
Pseudo-Class
จนกระทั่ง "# img1"
ตัวระบุชิ้นส่วนอยู่ที่ส่วนท้ายของ URI รูปภาพที่กำหนดเป้าหมายสามารถเป็นได้ สไตล์ด้วย : เป้าหมาย
หลอกชั้น
ขนาดของภาพเป้าหมายเพิ่มขึ้นปุ่มปิดจะปรากฏขึ้นและปุ่มขยายจะถูกซ่อน.
.img: เป้าหมาย สูง: 450px; ความกว้าง: 500px; .img: target + .close display: block; .img: target + .close + .expand display: none;
ปุ่มปิดทำงานอย่างไร
ในฐานะที่เป็นปุ่มปิดถูกเพิ่มเป็นภาพพื้นหลัง (ขั้นตอนที่ 2) และเป็นจริง แท็กด้วย
href = #
คุณลักษณะ (ขั้นตอนที่ 1) เมื่อคลิกแล้วจะลบตัวระบุชิ้นส่วนออกจากส่วนท้ายของ URI ดังนั้นมันยัง ลบ : เป้าหมาย
หลอกชั้น จากภาพและภาพ กลับไปเป็นขนาดก่อนหน้า.
ตอนนี้เอฟเฟกต์ซูมอย่างคลิกอย่างเดียวเสร็จสิ้นแล้วลองดูตัวอย่างด้านล่างหรืออ่านทฤษฎีเกี่ยวกับแผนที่ภาพในส่วนถัดไปเล็กน้อย.
ข้อมูลความเป็นมา: ทำไม
และไม่
?
ถึงตอนนี้คุณคงเข้าใจแล้วว่าสิ่งที่สำคัญที่สุดสำหรับการแก้ปัญหา CSS-only ในการทำงานคือ กำหนดเป้าหมายภาพโดยใช้ href = "# imgid"
คุณลักษณะ, ซึ่งสามารถทำได้โดยใช้ แท็กแทนแผนที่ภาพ.
สิ่งนี้อาจเป็นจริงอย่างไรก็ตามเมื่อพูดถึงรูปภาพโดยใช้ องค์ประกอบมีความเหมาะสมมากขึ้น สิ่งสำคัญยิ่งกว่านั้นคือเมื่อคุณต้องการซูม เกิดขึ้นเมื่อคลิกที่พื้นที่ขนาดใหญ่บนภาพ ไม่ใช่แค่บนไอคอนขยาย,
ช่วยให้คุณแก้ปัญหาได้ง่าย.
ค่าเริ่มต้น
คุ้มค่าสำหรับ รูปร่าง
คุณลักษณะสร้าง พื้นที่เชื่อมโยงเป็นรูปสี่เหลี่ยมผืนผ้าที่ครอบคลุมทั้งภาพ. ถ้าคุณจะใช้ คุณจะต้องใช้รหัสเพื่อปกปิดภาพและคุณอาจต้องใช้องค์ประกอบของ wrapper เพื่อจุดประสงค์เดียวกัน.
หากต้องการพูดเกี่ยวกับคำเตือนของคำตอบนี้ ชี้เหตุการณ์
คุณสมบัติ CSS (เราใช้ในขั้นตอนที่ 2) ได้รับการสนับสนุนโดย Internet Explorer เฉพาะจากรุ่น 11.
เพื่อรองรับเบราว์เซอร์ IE ก่อนหน้านั้นคุณอาจต้องการใช้อย่างใดอย่างหนึ่ง แทน
, หรือขยายภาพโดยคลิกที่ใดก็ได้บนภาพ (ในกรณีนี้ไม่จำเป็นต้องใช้ไอคอนขยาย).