على الفأرة فوق
على الفأرة فوق هو جافا سكريبت حدث تجعل صفحتك أكثر تفاعلية من خلال تغيير مظهر الصورة عند تمرير الماوس فوق الصورة.
نصيحةيمكن أيضًا تحقيق تأثير JavaScript OnMouseOver باستخدام CSS دون أن يحتاج الزائر إلى تمكين JavaScript في متصفحه.
على سبيل المثال OnMouseOver
يوضح لك المثال أدناه كيف يمكنك إنشاء أزرار بسيطة لها تأثير واحد. عند وضع الماوس فوق أحد الأزرار أدناه ، فإنه يتغير إلى لون أغمق ، مما يشير إلى أنه يمكن النقر فوقه.
تعليمات مثال OnMouseOver
فيما يلي نظرة عامة على كيفية إنشاء المثال أعلاه.
في الصافيالمقاطع أدناه هي ملفات الصور. على سبيل المثال ، ملف om1.gif و om11.gif هما الملفان المستخدمان في وضعي التشغيل والإيقاف. الملف om1.gif يتم عرضه عندما لا يكون الماوس فوق الصورة ، لذلك في المثال أعلاه سيكون اللون الرمادي الفاتح. عند التمرير فوق الصورة ، ستتغير إلى om11.gif رمادي غامق. يمكنك اتباع نفس التنسيق عند إنشاء صورك أو إذا رغبت في ذلك ، يمكنك تغيير تنسيق التسمية.
الأزرقالقسم هو عامل لتخزين مواقع تشغيل وإيقاف الصورة لكل زر. على سبيل المثال، واحد و هو موقف خارج ( F ل إيقاف ) و واحد هو الفأرة على صورة الموقف. في المثال أعلاه ، هناك خمسة أزرار مع مجموعة من صورتين ، أي ما مجموعه 10 صور.
في الالبرتقاليالمقاطع هي الصورة الروابط . يمكن أن تشير هذه الروابط إلى أي صفحة تريد أن يقوم الزر بإعادة توجيه الزائر إليها على موقع الويب الخاص بك.
<a href='/html-web-design-help-9735' onMouseOver='act('one')' onMouseOut='inact('one')'> img/o-definitions/84/onmouseover.gif' name='one' alt='HTML'>
<a href='https://www.computerhope.com/oh.htm' onMouseOver='act('two')' onMouseOut='inact('two')'> img/o-definitions/84/onmouseover-2.gif' name='two' alt='Online help'>
<a href='/virus-9574' onMouseOver='act('three')' onMouseOut='inact('three')'> img/o-definitions/84/onmouseover-3.gif' name='three' alt='Virus information'>
<a href='/computer-terms-dictionary-7016' onMouseOver='act('four')' onMouseOut='inact('four')'> img/o-definitions/84/onmouseover-4.gif' name='four' alt='Computer jargon'>
<a href='/internet-8263' onMouseOver='act('five')' onMouseOut='inact('five')'> img/o-definitions/84/onmouseover-5.gif' name='five' alt='Internet Info'>