كيفية إنشاء نقية المغلق onClick صورة تكبير تأثير

لا يحتوي CSS على فئة مستعارة استهداف أحداث النقر, وهذا يشكل واحدة من أكبر نقاط الألم من المطورين الأمامية. أقرب فئة الزائفة :نشيط الذي يصمم عنصرًا لفترة من الوقت يقوم المستخدم بالضغط على الماوس فوقها.

هذا التأثير قصير الأجل: بمجرد قيام المستخدم بتحرير الماوس, :نشيط لا يعمل بعد الآن. نحن بحاجة إلى إيجاد طريقة أخرى ل محاكاة حدث النقر في CSS.

تمت كتابة هذا المنشور استجابةً لطلب القراء ، وسوف يشرح كيفية القيام بذلك استهداف حدث النقر باستخدام CSS خالص في حالة استخدام معين, تكبير الصورة.

يمكنك رؤية النتيجة النهائية أدناه - حل CSS فقط لـ تكبير الصورة عند النقر.

متى تستخدم الحل CSS-Only

قبل المتابعة ، أريد أن أقول ، أنه بالنسبة لتكبير الصورة ، أوصي بطريقة CSS فقط (التي تغير أبعاد الصورة) ، فقط عندما تريد غير مرتبطة أو مجموعة من الصور القليلة للحصول على ميزة التكبير.

ل لائق معرض ، جافا سكريبت يوفر المزيد من المرونة والكفاءة.

تقنيات الواجهة الأمامية التي سنستخدمها

الآن بعد أن تم تحذيرك ، دعنا ننظر بسرعة إلى 3 التقنيات الرئيسية سنستخدم:

1. ال علامة HTML التي تسمح للمتصفحات ل إنشاء مناطق قابلة للربط على صورة. اقرأ المزيد عن عنصر في منصبي السابق.
2. ال usemap سمة من بطاقة, أن ربط الصورة إلى خريطة الصورة.
3. ال :استهداف CSS الزائفة الدرجة يمثل عنصرًا مستهدفًا باستخدام محدد معرفه.

1. إنشاء قاعدة HTML

أولاً ، دعنا ننشئ قاعدة HTML. في الكود أدناه ، نضيف صورة لتكبيرها وتوسيعها و أيقونة زر الإغلاق للتكبير والتصغير.

من المهم أن يكون لديك معرف على الصورة لتكبيرها ، ويجب أن يكون الزر إغلاق رابطًا به أ href = "#" السمة ، ساوضح لماذا في وقت لاحق في هذا المنصب.

2. أضف CSS

في البداية ، أيقونة إغلاق لا ينبغي أن يتم عرضها. ال موضع, حافة-, اليسار, و الأسفل الخصائص مكان ال توسيع وإغلاق الرموز حيث نريدهم أن يكونوا - في الزاوية العلوية اليمنى من الصورة.

ال أحداث المؤشر: لا شيء ؛ القاعدة تسمح لأحداث الماوس تمر عبر أيقونة التوسيع و تصل إلى الصورة.

 .img height: 150px؛ العرض: 200 بكسل ؛  .close background-image: url ("Close-icon.png")؛ تكرار الخلفية: عدم التكرار ؛ أسفل: 418 بكسل ؛ عرض لا شيء؛ الارتفاع: 32 بكسل ؛ اليسار: 462 بكسل ؛ أعلى الهامش: -32 بكسل ؛ الموقف: نسبي العرض: 32 بكسل ؛ . Expand bottom: 125px؛ الهامش الأيسر: -32 بكسل ؛ الهامش الأيمن: 16 بكسل ؛ أحداث المؤشر: لا شيء ؛ الموقف: نسبي  

3. أضف خريطة الصورة

على خريطة الصورة ، و منطقة قابلة للنقر يجب ان يكون في الزاوية العلوية اليمنى من الصورة أسفل رمز التوسيع وحجمها. ضع ال عنصر قبل الأول علامة في HTML. سنربط الصورة بالخريطة في الخطوة التالية.

في كتلة رمز أعلاه ، و تحدد العلامة الشكل والحجم و URI لمنطقة قابلة للربط داخل خريطة الصورة. ل شكل مستطيل, ال شكل السمة يأخذ المستطيل القيمة ، و أربع قيم من احداثيات تمثل السمة المسافة بالبكسل بين:

1. الحافة اليسرى من الصورة والحافة اليسرى لمنطقة الارتباط
2. الحافة العلوية للصورة والحافة العلوية لمنطقة الارتباط
3. الحافة اليسرى من الصورة والحافة اليمنى لمنطقة الارتباط
4. الحافة العلوية للصورة والحافة السفلية لمنطقة الارتباط

قيمة أ href السمة يجب أن تكون معرف التجزئة للصورة (هذا هو السبب في أن الصورة يجب أن يكون هوية شخصية).

4. قم بربط الصورة بخريطة الصورة

أضف ال usemap السمة إلى الصورة وذلك ل اربطها بخريطة الصورة. قيمتها يجب أن تكون تمثيل التجزئة لل اسم سمة من بطاقة أضفنا في الخطوة 3.

المنطقة القابلة للنقر لخريطة الصورة الآن يكمن وراء زر توسيع. عندما يقوم المستخدم بالنقر فوق الزر "توسيع" ، فإن هذه هي المنطقة القابلة للنقر فوقها في الواقع - تذكر أننا صنعنا الزر "توسيع" “مقبول” مع ال أحداث المؤشر: لا شيء ؛ حكم في الخطوة 2.

بهذه الطريقة المستخدم يستهدف الصورة نفسها عن طريق النقر فوقه ، وبعد النقر فوق URI يحصل لاحقة مع "# IMG1" معرف جزء.

5. نمط :استهداف الزائفة من الدرجة الاولى

حتى ال "# IMG1" معرف جزء في نهاية URI ، يمكن أن تكون الصورة المستهدفة على غرار مع :استهداف الفئة المزيفة

تزداد أبعاد الصورة المستهدفة ، ويظهر الزر "إغلاق" ، ويختفي الزر "توسيع".

 .img: الهدف ارتفاع: 450 بكسل ؛ العرض: 500 بكسل ؛  .img: target + .close display: block؛  .img: target + .close + .expand display: none؛  

كيف يعمل زر الإغلاق

عند إضافة الزر "إغلاق" كصورة خلفية (الخطوة 2) ، وهو في الواقع ملف العلامة مع أ href = # السمة (الخطوة 1) ، عند النقر فوقها ، فإنها تزيل معرف الجزء من نهاية URI. لذلك أيضا يزيل :استهداف الفئة المزيفة من الصورة ، والصورة يعود إلى حجمه السابق.

معلومات أساسية: لماذا و لا ?

الآن ، أنت بالتأكيد تفهم أن أهم شيء في حل CSS فقط للعمل هو استهداف الصورة باستخدام أ href = "# imgid" صفة، عزا, والتي يمكن القيام به أيضا باستخدام علامة بدلاً من خريطة الصورة.

ال الافتراضي قيمة ل شكل السمة يخلق مساحة قابلة للربط مستطيلة تغطي الصورة بأكملها. إذا كنت تستخدم بدلاً من ذلك ، يجب عليك ترميزها لتغطية الصورة ، وقد تضطر أيضًا إلى استخدام عنصر التفاف لنفس الغرض.

لدعم متصفحات IE قبل ذلك ، قد ترغب في استخدام أي منهما بدلا من , أو تكبير الصورة بالنقر فوق أي مكان عليها (في هذه الحالة لن تكون هناك حاجة لرمز التوسيع).