المحتوى
يعد تغيير مؤشر الماوس طريقة بسيطة لإضافة مؤثرات خاصة إلى صفحة الويب الخاصة بك. يمكن أن يؤدي ذلك إلى تحسين قابلية الاستخدام من خلال تزويد المستخدمين بأدوات مساعدة مرئية إضافية ، خاصة في الصفحات الأكثر تعقيدًا مثل الألعاب والخرائط التفاعلية. يمكنك استخدام Javascript لتغيير نمط المؤشر وفقًا للتاريخ والطقس وأي شيء آخر. تعرف تقنية استخدام Javascript و HTML و CSS لإنشاء صفحات ويب ديناميكية باسم DHTML (HTML الديناميكي).
مؤشرات الماوس الأساسية
هناك العديد من مؤشرات الماوس القياسية التي يمكن استخدامها عن طريق تعديل نمط عنصر أو نص الصفحة. الأسماء هي التقاطع ، التقاطع ، اليد ، النقل ، النص ، الانتظار ، والمساعدة. راجع رابط "خاصية مؤشر CSS" في قسم "الموارد" لمزيد من التفاصيل عنها. استخدم CSS لتعريف المؤشر الذي سيتم عرضه عند تمرير عنصر كما يلي:
عبر الشعر
مؤشرات الماوس المخصصة
بالإضافة إلى المؤشرات الأساسية ، يمكنك استخدام القوالب المخصصة عن طريق تعيين عنوان ملف الصورة كنمط المؤشر ، كما في المثال التالي:
مؤشر مخصص
لا تدعم جميع المتصفحات هذه الميزة أو جميع أنواع الملفات. على سبيل المثال ، يتوقع Internet Explorer الملفات ذات الملحق ".cur" أو ".ani". لا يقبل Firefox المؤشرات المتحركة (".ani") ويتوقع مؤشرًا أساسيًا وراء الصورة. للحصول على أفضل النتائج ، يرجى الإشارة إلى ملف المؤشر (".cur" أو ".ani") وملف صورة (PNG أو JPEG أو GIF) ونوع مؤشر أساسي كنسخة احتياطية. يستخدم المثال التالي مؤشرًا متحركًا كخيار أول وملف بسيط في المقام الثاني والمؤشر الأساسي كخيار أخير. سيحاول المستعرض جميع الخيارات حتى تجد خيارًا يمكنك استخدامه:
مؤشر مخصص
تقدم مكتبة المؤشر المفتوح في قسم الموارد مجموعات من مؤشرات الماوس المجانية.
تغيير نمط المؤشر باستخدام Javascript مضمن
يمكنك تغيير نمط CSS للمؤشر باستخدام Javascript. هناك العديد من سمات HTML المتعلقة بإجراءات الماوس التي يمكن استخدامها لتنفيذ التعليمات البرمجية عن طريق النقر فوق عنصر صفحة أو نقله أو تمريره فوقه. بعض الأمثلة هي:
onmouseover: مؤشر الماوس يمر فوق عنصر. onmousedown: يتم الضغط على زر الماوس. onmouseup: يتم تحرير زر الماوس. onmouseout: مؤشر الماوس يخرج العنصر. ondblclick: يقوم المستخدم بالنقر المزدوج على الماوس.
في قسم "السمات" من قسم "السمات" ، ستجد المزيد من السمات التي يمكنك استخدامها لإضافة إجراءات باستخدام Javascript.
أضف إجراءً إلى حدث (على سبيل المثال "mouseover") عن طريق تعيين الكود الذي تريد تشغيله كقيمة للسمة. في المثال أدناه ، سيتغير المؤشر إلى "مساعدة" بالمرور فوق الرابط.
مساعدة
اللعب مع وظائف
في بعض الأحيان ، ستحتاج إلى القيام بأكثر من سمة واحدة تسمح بها. من خلال كتابة جميع الإجراءات في وظيفة Javascript ، يمكنك وضع جميع الشفرات في أعلى وثيقة HTML وتطبيقها على أي عنصر عن طريق إجراء مكالمة في سمة الحدث. تقوم التعليمة البرمجية التالية بتغيير المؤشر على العنصر الذي تم تمريره كمعلمة "el":
دالة setElementCursor (el) {el.style.cursor = "url (3DArrow.cur) ، خط التقاطع" GO}
ستكون الوظيفة موجودة في قسم البرنامج النصي لرأس المستند (بين العلامات
و ) أو في ملف رمز خارجي المشار إليه في نفس الجزء. لاستخدامها ، استدعاء وظيفة مع الكلمة "هذا" من سمة الحدث في علامة HTML. ستتلقى الوظيفة مرجعًا للعنصر المرتبط بحدث الفأرة وستغير نمط المؤشر. على سبيل المثال ، إذا تخطى المؤشر النص التالي ، يتغير المؤشر:سيتغير المؤشر على هذا الرابط
يمكنك أيضًا تغيير المؤشر الرئيسي الذي سيتم عرضه عند التمرير فوق الجزء السفلي من الصفحة. تتيح لك الوظيفة التالية تغيير المؤشر إلى النوع المشار إليه في المعلمة "curtype":
دالة setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani) ، url (working.png) ، انتظر"؛ break GO case "محظور": document.body.style.cursor = "url (unavailable.ani) ، url (unavailable.png) ، default"؛ كسر GO GO "افتراضي": default: document.body.style.cursor = "url (arrow.cur) ، default" GO}}
لاستخدامها ، اسميها "loading" أو "محظور" أو "افتراضي" من سمة حدث في علامة HTML. على سبيل المثال ، سيغير الزر التالي المؤشر إلى "تحميل" عند النقر عليه:
لغة جافا سكريبت لديها وظائف غير محدودة. سيتم عد العد التنازلي للشفرة أدناه ، وسيعمل كل ثانية على تغيير مؤشر الماوس إلى صورة مرتبطة بالقيمة الحالية. ستترك وظيفة "setTimeOut" الوظيفة معلقة لمدة ثانية واحدة قبل أن يتم استرجاعها وتحديث العداد.
دالة doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani) ، url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")" ، 1000) GO} آخر {document.body.style.cursor = "url (arrow.cur) ، افتراضي" GO}}
في صفحة الويب ، استخدم الوظيفة لعرض عدد مؤشر الماوس عند النقر فوق زر في نموذج.