الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

النص المتحرك

.

لابد وان تعرف أن النص المتحرك وسم خاصMS Explorer فقط ولا يعمل مع أي مستعرض أخر

مارأيك بهذا النص أنه يطير

ما رأيك بهذا النص الطائر أمامك على الشاشة؟ جميل ..أليس كذلك؟ هذه اللافتة هي إحدى المؤثرات الخاصة التي يمكن إحداثها في MS Explorer. بواسطة هذه الوسوم. وبكل بساطة هذه هي الصيغة الخاصة بذلك

<MARQUEE>
مارأيك بهذا النص أنه يطير
<‎/MARQUEE>

بالطبع لا يمكن أن تمر الأمور هنا ببساطة فلا بد من وجود خصائص لهذه الوسوم، والحقيقة أن هناك إحدى عشرة خاصية نستخدمها (عدد ليس بالقليل بالنسبة لوسوم خاصة تعمل مع مستعرضات معينه ). لكنها على أية حال ليست صعبة التطبيق  وهذه هي الخصائص أسردها لك مع الأمثلة و نتائجها تحتها:

BGCOLOR: لتحديد لون الخلفية حيث يعطيك أمكانيه وضع ألوان للخلفيه سواء بالHex كود أو أسماء الألوان

<MARQUEE BGCOLOR="#99CCFF">
Html4Arab
<‎/MARQUEE>

Html4Arab

HEIGHT: لتحديد إرتفاع اللافتة، وهي إما أن تأخذ قيمة ثابتة أو قيمة نسبية حسب إرتفاع نافذة المتصفح.

<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80">
Html4Arab
<‎/MARQUEE>

Html4Arab

WIDTH: لتحديد عرض اللافتة، وهنا أيضاً إما أن تأخذ قيمة ثابتة أو نسبية

<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">
Html4Arab
<‎/MARQUEE>

Html4Arab

ALIGN: لتحديد المحاذاة العمودية للنص الذي قد يتواجد على جانبي اللافتة، وهي تأخذ القيم top, middle و bottom وهي الإفتراضية أي التي تطبق تلقائياً عند عدم إدراج هذه الخاصية.

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">
Html4Arab
<‎/MARQUEE>
Have a good time.

Welcome to Html4ArabHave a good time.

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" ALIGN="middle">
Html4Arab
<‎/MARQUEE>
Have a good time.

Welcome to Html4ArabHave a good time.

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" ALIGN="top">
Html4Arab
<‎/MARQUEE>
Have a good time.

Welcome to Html4ArabHave a good time.

HSPACE: لتحديد المسافة الفارغة التي تفصل بين اللافتة وبين النص الموجود على جانبيها

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" HSPACE="30">
Html4Arab
<‎/MARQUEE>
Have a good time.

Welcome to Html4ArabHave a good time.

VSPACE: تعمل مثل الخاصية السابقة لكنها تحدد المسافة الفارغة عمودياً من الأعلى والأسفل

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

BEHAVIOR تحدد سلوك النص الموجود في اللافتة وطريقة عمله وهناك ثلاثة قيم (أو بالأحرى) ثلاثة أساليب لحركة النص وهي التالية:

  • scroll يتحرك بنفس الإتجاه من جانب إلى آخر وبصورة مستمرة وهي القيمة الإفتراضية، لذلك لا يهم إن كتبت أم لا.

  • slide يتحرك النص مرة واحدة من جانب إلى الجانب الآخر ويتوقف عنده.

    <MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" BEHAVIOR="slide">
    Html4Arab
    <‎/MARQUEE>

    Html4Arab

    من المحتمل أن يكون النص في المثال أعلاه متوقفاً بعد أن يكون قد أكمل تحركه، لذلك قم بالنقر على زر Refresh الموجود في متصفحك لإعادة تحميل الصفحة وتحريك النص مرة أخرى

  • alternate يتأرجح النص جيئة وذهاباً من جانب إلى آخر.

    <MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" BEHAVIOR="alternate">
    Html4Arab
    <‎/MARQUEE>

    Html4Arab

DIRECTION تحدد إتجاه سير النص وذلك من خلال القيم left التي تحركه إلى اليسار (وهي الإفتراضية) و right التي تحركه إلى اليمين.

<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right">
Html4Arab
<‎/MARQUEE>

Html4Arab

LOOP تحدد عدد المرات التي سيتحرك فيها النص داخل اللافتة. فإذا أردت أن تستمر الحركة إلى ما لا نهاية فضع القيمة -1 أو infinite وبخلاف ذلك ضع عدد المرات التي تريدها. والشيفرة التالية تحدد عدد مرات الحركة بخمس. (إذا وجدت النص ساكناً أو لم تجد نصاً على الإطلاق فهذا يعني أنه قد استنفذ حركاته الخمس لذلك تحتاج للنقر على Refresh لإعادة تشغيله)

<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right" LOOP="3">
Html4Arab
<‎/MARQUEE>

Html4Arab

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

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

والآن إليك الخصائص:

SCROLLAMOUNT: هذه الخاصية تحدد المسافة بين كل لقطة وأخرى للنص وهي تأخذ قيماً عددية صحيحة تحدد المسافة المقطوعة بالبيكسل (أعرف أنها صعبة قليلاً لكن لا بأس سأوضحها بالأمثلة).

<MARQUEE SCROLLAMOUNT="1"> HTML <‎/MARQUEE>

HTML

<MARQUEE SCROLLAMOUNT="50"> HTML <‎/MARQUEE>

HTML

<MARQUEE SCROLLAMOUNT="100"> HTML <‎/MARQUEE>

HTML

<MARQUEE SCROLLAMOUNT="200"> HTML <‎/MARQUEE>

HTML

في الحالة الأولى فإن المسافة التي تقطعها كلمة HTML في كل حركة لها هي 1 بيكسل. أما في المثال الثاني فالمسافة هي 50 بيكسل أي أن الكلمة تقفز 50 بيكسل في كل خطوة (أو لقطة) بما يساوي 50 ضعفاً عن المثال السابق وهذا ما يعطي الإنطباع بالسرعة، وهكذا الأمر للمثالين اللاحقين وهما 100 و 200 بيكسل على التوالي.

SCROLLDELAY: لكي نحدد الزمن الذي يستغرقه النص في القفز بين كل خطوة وأخرى نستخدم هذه الخاصية، والقيمة المعطاه مع هذه الخاصية تمثل الزمن بالميلي ثانية (0.001 من الثانية)
سوف أستخدم نفس الأمثلة السابقة مع هذه الخاصية لنقارن بين النتائج في الحالتين:

<MARQUEE SCROLLAMOUNT="1" SCROLLDELAY="500"> HTML <‎/MARQUEE>

HTML

<MARQUEE SCROLLAMOUNT="50" SCROLLDELAY="500"> HTML <‎/MARQUEE>

HTML

<MARQUEE SCROLLAMOUNT="100" SCROLLDELAY="500"> HTML <‎/MARQUEE>

HTML

<MARQUEE SCROLLAMOUNT="200" SCROLLDELAY="500"> HTML <‎/MARQUEE>

HTML

لقد أسندت القيمة 500 لهذه الخاصية في جميع الأمثلة وهي تعني أن هناك فترة نصف ثانية (بالتمام والكمال) تفصل بين كل خطوة وأخرى للكلمة. وأعتقد أن ما تراه الآن يوضح لك مبدأ عمل الخاصية السابقة أيضاً. وبالمناسبة، قد تضطر للإنتظار دهراً كاملاً لكي ترى النص في المثال الأول.

ما رأيك الآن لو نلغي الخاصية SCROLLAMOUNT لنرى كيف تعمل SCROLLDELAY لوحدها

<MARQUEE SCROLLDELAY="500"> HTML <‎/MARQUEE>

HTML
 

ملاحظة أخيره

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

                         فهرس: [الصفحة الرئيسيه -                         راسلني]
رائع أليس كذلك ؟!!

أضغط علي أي وصله للإنتقال إلي الصفحة

 

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

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 
فهرس النص  ¤

> العناوين وحجم الخطوط
> أشكال وألوان الخطوط

> الرموز الخاصه

> الوصلات

> القوائم

> قائمة بجميع وسوم النص

 

¤  Html4Arab صندوق الأدوات

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم


أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "


برعاية شبكة هايل

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah