2010/07/24

طريقة عمل نص متحرك


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


<marquee scrolldelay="200" width="300px" height="25px" direction="right" bgcolor="#3BB9FF"><font color="#000000" >ضع النص الذي تريده هنا</font></marquee>
  

1.      كلمة scrolldelay تعني سرعة تحرك النص هنا تجد السرعة 200 وبإمكانك التحكم فيها كما تشاء
ملحوظه : كلما قلة قمية السرعة كلما كانت حركة النص اسرع (50 اسرع من 100)
2.      كلمة width تعني عرض الصندوق الذي سيحتوي على النص ويمكن التحكم فيه عبر تغيير قيمته الموجودة هنا في الكود بـ 300
3.      كلمة height تعني طول الصندوق الذي سيحتوي على النص ويمكن التحكم فيه عبر تغيير قيمته الموجودة هنا في الكود بـ 25
4.      كلمة direction تعني ان حركة النص ستتجه من اليسار إلى اليمين ويمكنك التحكم في الاتجاه كما ذكرنا في اول الموضوع في اي اتجاه عن طريق تغيير القيمة الموجود وهي right إلى مثلا :
*     من اليمين الي اليسار ضع كلمة left
*     من أعلى إلى اسفل ضع كلمة down
*     من اسفل إلى أعلى ضع كلمة up
5.      كلمة bgcolor تعني لون خلفية النص او الصندوق الذي يحتوي علية النص ويمكنك اختيار ما يناسبك من الالوان بتغيير كود اللون الموجود في الكود وهو #3BB9FF
6.      كلمة font color تعني لون الخط اي لون النص الذي سوف تكتبه وأيضا تستطيع اختيار ما يناسبك بتغيير كود اللون هذا #000000
ويمكنك اختيار الألوان التي تناسبك من "جدول أسماء و أكواد الالوان"
وألان نبدأ بمشاهدة أمثلة على الأشكال المختلفة :
-          النص يتحرك من اليمين إلى اليسار :
بسم الله الرحمن الرحيم
وها هو الكود :


<marquee scrolldelay="200" width="300px" height="25px" direction="left" bgcolor="#3BB9FF"><font color="#000000" > بسم الله الرحمن الرحيم </font></marquee>


-          النص يتحرك يمينا ويسارا :
سبحان الله وبحمده سبحان الله العظيم
وها هو الكود :


<marquee behavior="alternate" width="300px" height="25px" direction="right" bgcolor="#3BB9FF"><font color="#000000" > سبحان الله وبحمده سبحان الله العظيم </font></marquee>
  

والجديد في هذا الكود هو هذا الجزء behavior="alternate"
-          النص يتحرك من أعلى إلى أسفل :
لا إله إلا الله محمد رسول الله
وها هو الكود :


<marquee scrolldelay="200" width="200px" height="300px" direction="down" bgcolor="#3BB9FF"><font color="#000000" >لا إله إلا الله محمد رسول الله</font></marquee>
   


ويمكنك تغيير الاتجاه إلى العكس (من أسفل إلى أعلى) كما ذكرنا بتغيير كلمة down بكلمة up
-          ونأتي لأهم كود من بين تلك الاكواد :
لا اله الإ انت سبحانك اني كنت من الظالمين
وها هو الكود :


<marquee scrolldelay="200" onmouseover="this.stop()" onmouseout="this.start()" width="200px" height="300px" direction="up" bgcolor="#3BB9FF"><font color="#000000" > لا اله الإ انت سبحانك اني كنت من الظالمين </font></marquee>


والذي يميز هذا الكود هو توقف النص عند وقف مؤشر الفأره (الماوس) عليه كما تراه في المثال السابق ، والاختلاف هنا يكمن في هذا الجزء onmouseover="this.stop()" onmouseout="this.start()"
ويمكنك استخدام هذا الجزء من الكود في أي مثال من الامثل السابقة او أي مثال تقوم بأعداده بوضع هذا الجزء في الكود لكي يتوقف النص عند وقف مؤشر الفأره علية .
ويمكنك تحميل مجموعة من الاكواد لنصوص متحركة بأشكلها المختلفة ، وما عليك سوى وضع الكود في المكان المناسب ، من هنا :
تحميل أكواد مختلفة لعمل نصوص متحركة بأشكال متنوعة

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

هناك 44 تعليقًا:

  1. تم التطبيق ^_^
    يعطيك العآآآفيه يآرب ..
    www.remaas14.blogspot.com
    مشكور :)

    ردحذف
  2. ريمـآس :
    شكرا لمرورك الطيب وكل عام وانتي بخير بمناسبة شهر رمضان الكريم

    ردحذف
  3. جزاك الله خيرا ، معلومات قيمة ومفيدة
    http://waleed-youssef.blogspot.com

    ردحذف
  4. وليد يوسف :
    اهلا بك أخي الفاضل وكل رمضان وأنت بخير

    ردحذف
  5. يعطيك العافية مبدع واكود روعة

    ردحذف
  6. مشكوووور اخوي على الموضوع المفيد

    بس ممكن تشوف مدونتي وتقولي شو لازم اعدل وشو اضيف

    http://sportsecko.blogspot.com/

    ردحذف
  7. السلام عليكم ممكن بس اطلب طلب انا مش عارف اعمل اية
    انا عامل مدونة علي بلوجر وجاتلي الجواب النهاردة الحمد لله اعمل اية مش عارف ياريت حد يرد عليا علي الاميل وجزيل الشكر لكم جميعا...
    mokhtarossama14@yahoo.com
    دة ايميلي ياريت حد يرد عليا وجزيل الشكر لكم

    ردحذف
  8. أشكرك سيدي الكريم وجزالك الله كل خير...

    ردحذف
  9. جزاك الله خير
    استفدت كثير من المعلومات

    ردحذف
  10. والله تسلم موضوع جميل ومجهود رائع

    http://modern-sciences.blogspot.com/

    ردحذف
  11. شكرا لك http://resalatye.blogspot.com/

    ردحذف
  12. تم التطبيق مشكور اخى الكريم
    http://discovery-site.blogspot.com

    ردحذف
  13. أشكرك سيدي الكريم وجزالك الله كل خير.

    ردحذف
  14. جزاك الله كول خير يا رب

    ردحذف
  15. جزاك الله كول خير

    ردحذف
  16. جزاك الله خيرا وجعله الله فى ميزان حسناتك
    http://1stquality.blogspot.com

    ردحذف
  17. مشكور ياغالي و بأنتظار جديدك

    ردحذف
  18. وانا اضع الكود يظهر مع الكلمة كيف اضع الكود بدون ان يظهر مع الكلمة التى اريد ان اظهرها فى الشريط؟

    ردحذف
  19. مشكورين .. لكن الخط صغير .. كيف أزيد في حجم الخط ..

    ردحذف
  20. أحسنت

    ردحذف
  21. أحسنت

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

    ردحذف
  23. انا عايز اعرف الكود بيتكتب فين بالظبط

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

      حذف
  24. السلام عليكم
    أرجوا مساعدتي أكتب اكثر من شريط متحرك في نفس الصفحه
    مطلوب واجب
    وشكراً

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

      حذف
  25. السلام عليكم ورحمة الله وبركاته
    جربت الكود طلع الشريط المتحرك بجانب بعضها البعض {وهو غير المطلوب }
    المطلوب عمل شريط متحرك في صفحة ويب مثلا الاسم مكتوب في شريط متحرك
    والشريط الثاني مكتوب فيه اسم المادة ,الشريط الثالث مكتوب فية المستوى .
    تكون تحت بعض في نفس صفحة الويب


    مشكور .... جزاك الله كل خير

    ردحذف
  26. السلام عليكم ورحمة الله وبركاته
    الله يجزاك خير الجزاء
    جربت الاكواد في كل الحالات والحمدلله ضبط
    المطلوب منك فضلاً لا أمراَ كتابة الكودمن البداية من الهتمل
    وشكراً

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

      حذف
  27. بسم الله الرحمن الرحيم
    الحمد لله رب العالمين
    الصلاة والسلام على خاتم الأنبياء والمرسلين وآله الطيبين الطاهرين
    وصحبه المنتجبين وسلم تسليما كثيرا.
    الاساتذة الافاضل والاخوة الكرام إداريين وأعضاء هذا الصرح المبارك الاحباء
    الاستاذ الفاضل والاخ الكريم ( mr.mezomasr) الغالي
    السلام عليكم ورحمة الله تعالى وبركاته
    تحية قلبية اخوية صادقة وبعد
    ارجو من جنابكم مساعدتي قدر المستطاع فضلا من الله تعالى ومن ثم منك
    اخي الحبيب
    ارجو ان تعلمني او تعطيني كود شريط متحرك من الاسفل الى الاعلى محاط بإطار عبارة عن صورة *** بمعنى ان اضع حول صندوق كتابة النص المتحرك رابط صورة كهذا الرابط مثلا :- (( http://www.m5znn.com/uploads/m5znn13491753201.gif)) لقد تعبت كثيرا في البحث عن هذا الكود *** بمعنى انني اريد ان احصر صندوق الكتابة المتحرك داخل هذه الصورة *** وجزاك الله تعالى عنا وعن جميع الاخوة والاخوات الكرام خير الجزاء كما واطلب من العلي القدير التوفيق والسؤدد
    وتقبل وافر احترامي وتقديري اخي الفاضل
    اخوك ابو علي السعدي
    العراق

    ردحذف
  28. اخي هذا الكود وين احطة علمود ايصير

    ردحذف
  29. لو سمحت عاوزة تكبير حجم الخط كيييف؟؟

    ردحذف
  30. هل هناك طريقة لتغيير الخط للخط الكوفى او أى خط أخر ؟

    ردحذف
  31. جزاك الله خيرا شرح ممتاذ نشكرك جدا

    ردحذف
  32. مرحبا انا جديدة في الموقع كتتتتتتتتييير اعجبني

    ردحذف
  33. جزاك الله خيرا

    ردحذف
  34. شكرا لك

    http://tec-arab.blogspot.com

    ردحذف
  35. السلام عليكم ورحمة الله وبركاته
    جزاك الله خير الجزاء
    سؤالى هو كيفية وضع اكتر من سطر

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

    ردحذف
  37. شكرا جزيلا لك معلومة مفيدة جدة

    ردحذف

يسعدنا تعليقك