تصميم عمليات تمرير الماوس لخريطة الصور باستخدام CSS

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

في الماضي، حققت محاولة تصميم هذه المناطق باستخدام CSS نجاحًا محدودًا، كما يتضح من المثال المقدم:

area { border: 1px solid #d5d5d5; }

حل CSS فقط

.area {
    الخلفية: #ففف؛
    عرض: كتلة؛
    الارتفاع: 475 بكسل؛
    العتامة: 0؛
    الموقف: مطلق؛
    العرض: 320 بكسل؛
}
#منطقة2 {
    اليسار: 320 بكسل؛
}
#المنطقة1:تحوم، #المنطقة2:تحوم {
    العتامة: 0.2؛
في هذا الأسلوب، يتم وضع كتل شفافة فوق الصورة، يمثل كل منها منطقة قابلة للنقر. من خلال ضبط العتامة على 0 افتراضيًا وزيادتها إلى 0.2 عند التمرير، يتم تحقيق تأثير تمرير الماوس الدقيق.