درس عن المؤشرات

موضوع: درس عن المؤشرات الأحد يوليو 15, 2012 10:46 pm

مايكروسوفت انترنت اكسبلورر 4 + و Netscape 6 + تدعم المؤشرات مخصصة محددة مع CSS.

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

ذلك ما لم يكن في الصفحة حقا لا يعمل بدون المؤشر مخصصة ينبغي ألا يكون هناك أسباب فنية لاختيار لا.

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

خصائص الماوس
درس عن المؤشرات Www11

إضافة المؤشر مخصص

بناء الجملة من أجل مؤشر مخصصة هو هذا:
(ضع الماوس فوق كل وصلة لرؤية التأثير)

محدد {cursor:value}

على سبيل المثال:

الكود:: <html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>

<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>

والروابط من المثال أعلاه تبدو مثل هذا:

CROSS LINK

HELP LINK

إعادة تحديد المؤشر لصفحات كاملة

إذا كنت ترغب في إعادة تعريف المؤشر لدرجة انها لا تظهر إلا عندما انتقلت عبر ارتباط، يمكنك تحديد المؤشر ببساطة المطلوب باستخدام الجسم محدد.

على سبيل المثال:

الكود:: <html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>

<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>

انقر هنا لفتح النافذة التي تظهر نتيجة المثال أعلاه.

إعادة تحديد المؤشر لمناطق على صفحة

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

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

على سبيل المثال:

الكود:: <html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>

<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>