|
النص
المتحرك
.
لابد وان تعرف أن النص المتحرك وسم خاصMS Explorer فقط
ولا يعمل مع أي مستعرض أخر
ما رأيك بهذا النص الطائر أمامك على الشاشة؟
جميل ..أليس كذلك؟ هذه اللافتة هي إحدى المؤثرات الخاصة التي يمكن إحداثها
في MS Explorer. بواسطة هذه الوسوم. وبكل بساطة هذه هي الصيغة الخاصة بذلك
<MARQUEE>
مارأيك بهذا النص أنه يطير
</MARQUEE>
بالطبع لا يمكن أن تمر الأمور هنا ببساطة
فلا بد من وجود خصائص لهذه الوسوم، والحقيقة أن هناك إحدى عشرة خاصية نستخدمها
(عدد ليس بالقليل بالنسبة لوسوم خاصة تعمل مع مستعرضات معينه ). لكنها على
أية حال ليست صعبة التطبيق وهذه هي الخصائص أسردها لك مع الأمثلة و نتائجها
تحتها:
BGCOLOR:
لتحديد لون الخلفية حيث يعطيك أمكانيه وضع ألوان للخلفيه سواء
بالHex كود
أو أسماء الألوان
<MARQUEE BGCOLOR="#99CCFF">
Html4Arab
</MARQUEE>

HEIGHT:
لتحديد إرتفاع اللافتة، وهي إما أن تأخذ قيمة ثابتة أو قيمة نسبية حسب إرتفاع
نافذة المتصفح.
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80">
Html4Arab
</MARQUEE>

WIDTH: لتحديد عرض اللافتة،
وهنا أيضاً إما أن تأخذ قيمة ثابتة أو نسبية
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">
Html4Arab
</MARQUEE>

ALIGN: لتحديد المحاذاة
العمودية للنص الذي قد يتواجد على جانبي اللافتة، وهي تأخذ القيم top, middle
و bottom وهي الإفتراضية أي التي تطبق تلقائياً عند عدم إدراج هذه الخاصية.
Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">
Html4Arab
</MARQUEE>
Have a good time.
Welcome to
Have
a good time.
Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" ALIGN="middle">
Html4Arab
</MARQUEE>
Have a good time.
Welcome to
Have
a good time.
Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" ALIGN="top">
Html4Arab
</MARQUEE>
Have a good time.
Welcome to
Have
a good time.

HSPACE:
لتحديد المسافة الفارغة التي تفصل بين اللافتة وبين النص الموجود
على جانبيها
Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" HSPACE="30">
Html4Arab
</MARQUEE>
Have a good time.
Welcome to
Have
a good time.
VSPACE:
تعمل مثل الخاصية السابقة لكنها تحدد
المسافة الفارغة عمودياً من الأعلى والأسفل

حتى الآن
كانت الخصائص التي ناقشناها مجرد خصائص مظهرية تتعلق بشكل ومظهر اللافتة دون
تغيير طريقة عملها. والآن نأتي إلى الخصائص الفنية:
BEHAVIOR تحدد سلوك
النص الموجود في اللافتة وطريقة عمله وهناك ثلاثة قيم (أو بالأحرى) ثلاثة أساليب
لحركة النص وهي التالية:
-
scroll يتحرك بنفس الإتجاه من جانب إلى آخر
وبصورة مستمرة وهي القيمة الإفتراضية، لذلك لا يهم إن كتبت أم لا.
-
slide يتحرك النص مرة واحدة من جانب إلى الجانب
الآخر ويتوقف عنده.
<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%"
BEHAVIOR="slide">
Html4Arab
</MARQUEE>
من المحتمل أن يكون النص في المثال أعلاه متوقفاً بعد أن يكون قد أكمل تحركه،
لذلك قم بالنقر على زر Refresh الموجود في متصفحك
لإعادة تحميل الصفحة وتحريك النص مرة أخرى
-
alternate يتأرجح
النص جيئة وذهاباً من جانب إلى آخر.
<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%"
BEHAVIOR="alternate">
Html4Arab
</MARQUEE>

DIRECTION تحدد
إتجاه سير النص وذلك من خلال القيم left التي
تحركه إلى اليسار (وهي الإفتراضية) و right التي
تحركه إلى اليمين.
<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right">
Html4Arab
</MARQUEE>

LOOP تحدد عدد المرات
التي سيتحرك فيها النص داخل اللافتة. فإذا أردت أن تستمر الحركة إلى ما لا
نهاية فضع القيمة -1
أو infinite وبخلاف ذلك ضع عدد المرات التي تريدها.
والشيفرة التالية تحدد عدد مرات الحركة بخمس. (إذا
وجدت النص ساكناً أو لم تجد نصاً على الإطلاق فهذا يعني أنه قد استنفذ حركاته
الخمس لذلك تحتاج للنقر على Refresh لإعادة تشغيله)
<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right"
LOOP="3">
Html4Arab
</MARQUEE>

بقي لدينا الآن خاصيتين تقومان
بتحديد سرعة تحرك النص في اللافتة وقبل أن نناقشهما دعني أروي لك هذه القصة:
في غابر الأزمان، حدثنا أستاذ الفيزياء يا سادة
يا كرام، أن الأفلام المتحركة ما هي إلا مجموعة من الصور الثابتة أو اللقطات
التي يتم عرضها بصورة متعاقبة خلال فترة زمنية معينة، مما يعطي الإنطباع بوجود
الحركة. وسرعة عرض اللقطات وتعاقبها هو ما يحدد سرعة الحركة للفيلم. فمثلاً
مشهد السيارة المسرعة هو مجرد مجموعة من الصور الثابتة لهذه السيارة في مواقع
مختلفة على الشاشة. وبما أن لافتاتنا هي شكل من أشكال الأفلام المتحركة فإن
هذا المبدأ يسري عليها أيضاً... إلى هنا وانتهت القصة!
والآن إليك الخصائص:
SCROLLAMOUNT: هذه الخاصية تحدد المسافة
بين كل لقطة وأخرى للنص وهي تأخذ قيماً عددية صحيحة تحدد المسافة المقطوعة
بالبيكسل (أعرف أنها صعبة قليلاً لكن لا بأس سأوضحها بالأمثلة).
<MARQUEE SCROLLAMOUNT="1"> HTML </MARQUEE>
<MARQUEE SCROLLAMOUNT="50"> HTML </MARQUEE>
<MARQUEE SCROLLAMOUNT="100"> HTML </MARQUEE>
<MARQUEE SCROLLAMOUNT="200"> HTML </MARQUEE>
في الحالة الأولى فإن المسافة
التي تقطعها كلمة HTML في كل حركة لها هي 1 بيكسل. أما في المثال الثاني فالمسافة
هي 50 بيكسل أي أن الكلمة تقفز 50 بيكسل في كل خطوة (أو لقطة) بما يساوي 50
ضعفاً عن المثال السابق وهذا ما يعطي الإنطباع بالسرعة، وهكذا الأمر للمثالين
اللاحقين وهما 100 و 200 بيكسل على التوالي.
SCROLLDELAY:
لكي نحدد الزمن الذي يستغرقه النص في القفز بين كل خطوة وأخرى نستخدم هذه الخاصية،
والقيمة المعطاه مع هذه الخاصية تمثل الزمن بالميلي ثانية (0.001 من الثانية)
سوف أستخدم نفس الأمثلة السابقة مع هذه الخاصية لنقارن بين النتائج في الحالتين:
<MARQUEE SCROLLAMOUNT="1" SCROLLDELAY="500">
HTML </MARQUEE>
<MARQUEE SCROLLAMOUNT="50" SCROLLDELAY="500">
HTML </MARQUEE>
<MARQUEE SCROLLAMOUNT="100" SCROLLDELAY="500">
HTML </MARQUEE>
<MARQUEE SCROLLAMOUNT="200" SCROLLDELAY="500">
HTML </MARQUEE>
لقد أسندت القيمة 500 لهذه الخاصية
في جميع الأمثلة وهي تعني أن هناك فترة نصف ثانية (بالتمام والكمال) تفصل بين
كل خطوة وأخرى للكلمة. وأعتقد أن ما تراه الآن يوضح لك مبدأ عمل الخاصية السابقة
أيضاً. وبالمناسبة، قد تضطر للإنتظار دهراً كاملاً لكي ترى النص في المثال
الأول.
ما رأيك الآن لو نلغي الخاصية
SCROLLAMOUNT لنرى كيف تعمل
SCROLLDELAY لوحدها
<MARQUEE SCROLLDELAY="500"> HTML </MARQUEE>

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

< الصفحة الرئيسيه |
المرجع الكامل |
النص >
|