วิธีการสร้าง CSS บริสุทธิ์บนเอฟเฟกต์การซูมรูปภาพคลิก

CSS ไม่มี pseudoclass สำหรับ กำหนดเป้าหมายเหตุการณ์คลิก, และสิ่งนี้ถือว่าเป็นหนึ่งใน จุดปวดที่ใหญ่ที่สุด ของนักพัฒนาส่วนหน้า คลาสหลอกที่ใกล้ที่สุดคือ :คล่องแคล่ว องค์ประกอบรูปแบบสำหรับช่วงเวลาที่ผู้ใช้กดเมาส์ไว้เหนือมัน.

อย่างไรก็ตามเอฟเฟกต์นี้มีอายุสั้น: เมื่อผู้ใช้ปล่อยเมาส์, :คล่องแคล่ว ไม่ทำงานอีกต่อไป เราต้องหาวิธีอื่นให้ได้ จำลองเหตุการณ์คลิกใน CSS.

โพสต์นี้ถูกเขียนขึ้นเพื่อตอบสนองต่อคำขอของผู้อ่านและจะอธิบายวิธีการ กำหนดเป้าหมายเหตุการณ์การคลิกด้วย CSS บริสุทธิ์ ในกรณีการใช้งานเฉพาะ, การซูมภาพ.

คุณสามารถดูผลลัพธ์สุดท้ายด้านล่าง - โซลูชัน CSS-only สำหรับ การซูมภาพเมื่อคลิก.

เมื่อใดจึงจะใช้โซลูชัน CSS-Only

ก่อนที่ฉันจะดำเนินการต่อไปฉันอยากจะบอกว่าสำหรับการซูมภาพฉันแนะนำวิธีการ CSS เท่านั้น (ซึ่งเปลี่ยนขนาดของภาพ) เฉพาะเมื่อคุณต้องการ เดียว หรือ กลุ่มของภาพไม่กี่ภาพ เพื่อให้มีคุณสมบัติซูม.

สำหรับ เหมาะสม คลังภาพ JavaScript ให้ความยืดหยุ่นและประสิทธิภาพมากขึ้น.

เทคนิค Front-End ที่เราจะใช้

ตอนนี้คุณได้รับคำเตือนแล้วให้เราดูอย่างรวดเร็ว 3 เทคนิคสำคัญ เราจะใช้:

1. แท็ก HTML ที่อนุญาตให้เบราว์เซอร์ สร้างพื้นที่ที่ลิงก์ได้เหนือภาพ. อ่านเพิ่มเติมเกี่ยวกับ องค์ประกอบในโพสต์ก่อนหน้าของฉัน.
2. usemap คุณลักษณะของ แท็ก, ที่เชื่อมโยงรูปภาพกับแผนผังรูปภาพ.
3. : เป้าหมาย 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 คุณลักษณะแสดงระยะทางเป็นพิกเซลระหว่าง:

1. ขอบด้านซ้ายของรูปภาพ & ขอบด้านซ้ายของพื้นที่ลิงก์
2. ขอบด้านบนของรูปภาพและขอบด้านบนของพื้นที่ลิงก์
3. ขอบด้านซ้ายของภาพ & ขอบด้านขวาของพื้นที่ลิงก์
4. ขอบด้านบนของรูปภาพและขอบด้านล่างของพื้นที่ลิงก์

ค่าของ 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 เพื่อจุดประสงค์เดียวกัน.

เพื่อรองรับเบราว์เซอร์ IE ก่อนหน้านั้นคุณอาจต้องการใช้อย่างใดอย่างหนึ่ง แทน , หรือขยายภาพโดยคลิกที่ใดก็ได้บนภาพ (ในกรณีนี้ไม่จำเป็นต้องใช้ไอคอนขยาย).