ما هو المؤشر المخصص؟

المؤشر المخصص هو مؤشر ماوس معرّف من قبل المستخدم يحل محل السهم الافتراضي للمتصفح أو رمز المؤشر. تستخدم المواقع والتطبيقات مؤشرات مخصصة لتعزيز العلامة التجارية أو تحسين الانغماس في الألعاب أو التجارب الإبداعية، أو ببساطة لإضافة لمسة بصرية فريدة إلى الواجهة. عادةً ما يتم تعريف المؤشرات المخصصة في CSS باستخدام خاصية cursor مع قيمة url() تشير إلى ملف صورة مثل .cur أو .png أو .svg.

تدعم متصفحات الويب عدة تنسيقات ملفات مؤشرات بشكل أصلي. تنسيق .cur هو تنسيق المؤشر الكلاسيكي لنظام Windows، بينما يضيف .ani دعم الرسوم المتحركة، وتوفر .png و .svg بدائل حديثة مستقلة عن الدقة تعمل عبر جميع الأنظمة الأساسية.

وصف الأداة

يتيح لك أداة اختبار المؤشر المخصص تحميل أي ملف مؤشر ومعاينة فورية لكيفية ظهوره والتعامل معه في المتصفح. بعد التحميل، يحل المؤشر محل المؤشر الافتراضي داخل منطقة اختبار مخصصة — عرض بنمط رقعة الشطرنج مع زر — حتى تتمكن من تقييم حركة المساحة الحرة والسلوك عند التمرير دون كتابة سطر واحد من CSS.

التنسيقات المدعومة

التنسيق الوصف
.cur تنسيق مؤشر Windows، مدعوم على نطاق واسع
.ani مؤشر Windows متحرك
.png صورة نقطية، مثالية للمؤشرات عالية الجودة
.svg صورة متجهة قابلة للتحجيم، حادة بأي حجم
.ico تنسيق رمز Windows، قابل للاستخدام أيضاً كمؤشر

الميزات

  • معاينة فورية: يتم تطبيق المؤشر مباشرة بمجرد تحميل الملف — لا حاجة لإعادة تحميل الصفحة
  • منطقة اختبار تفاعلية: يعرض نمط رقعة الشطرنج المؤشر على خلفية محايدة لوضوح أفضل
  • زر اختبار مستهدف: يتيح لك زر داخل منطقة الاختبار التحقق من سلوك المؤشر على العناصر التفاعلية
  • وراثة مؤشر متسقة: يرث الزر المؤشر المخصص بدلاً من العودة إلى الافتراضي للمتصفح
  • من جانب العميل فقط: يتم قراءة الملفات مباشرة في المتصفح ولا يتم تحميلها أبداً على أي خادم

حالات الاستخدام

  • مصممو المؤشرات: تحقق من كيفية ظهور ملف مؤشر .cur أو .png تم إنشاؤه حديثاً قبل إطلاقه
  • مطورو الويب: اختبر بسرعة أصل المؤشر قبل دمجه في CSS باستخدام خاصية cursor: url(...)
  • مطورو الألعاب والتطبيقات الإبداعية: تحقق من الشعور والرؤية للمؤشرات المخصصة في سياقات واجهة المستخدم التفاعلية

كيفية العمل

عند تحميل ملف، تنشئ الأداة عنوان URL للكائن باستخدام API URL.createObjectURL() للمتصفح وتحقنه كنمط CSS cursor على منطقة الاختبار. هذا يعادل كتابة cursor: url(your-file.cur), auto في ورقة أنماط. يضمن الخيار الاحتياطي auto أن المتصفح يستخدم مؤشره الافتراضي إذا لم يتمكن من تحميل الملف أو تحليله.

نصائح

  • بالنسبة لمؤشرات .png، يستخدم المتصفح الزاوية العلوية اليسرى (0 0) كنقطة ساخنة افتراضياً. إذا كانت نقطة التفعيل في المؤشر يجب أن تكون في مكان آخر (على سبيل المثال، طرف قلم رصاص)، فقد تحتاج إلى ضبط هذا في CSS بعد الاختبار.
  • تعمل مؤشرات .ani المتحركة تلقائياً في المتصفحات التي تدعمها (بشكل أساسي المتصفحات القائمة على Chromium).
  • يجب أن تكون مؤشرات SVG صغيرة (عادةً أقل من 128×128 بكسل) لتعرض بشكل صحيح كمؤشرات في معظم المتصفحات.