+ + + + +
Share/Save/Bookmark

2008-04-18

صندوق روابط متحركة



من ساعة ما عملت الصندوق اللى فيه روابط متحركة والناس عينها هاتطلع عليه .. لدرجة انه ساعات بيقف ومابيقدرش يتحرك .. اعوذ بالله ياجدع الناس عينيها فلقت الكود .. قصدى فلقت الحجر
لكل اللى طلب منى شرح طريقة عمله .. اليكم الطريقة
كان فيه موضوع انا عملته عن انشاء صندوق نصوص متحركة , من هنا :
صندوق نصى متحرك , لو مشفتوش ممكن تشوفه عشان هى نفس الفكرة , الفكرة اننا هانستبدل النص برابط , سهله جدا
طيب الرابط بيتكتب ازاى ؟
عشان تعمل كلمة مربوطه بلينك .. بنستعمل الكود ده

<a href="http://lu2a.blogspot.com/" target="_blank">MyBlog</a>



كلمة MyBlog دى اللى هاتظهر , واللينك اللى مكتوب هو المكان اللى هاتروحله عند الضغط على الكملة , كمثال يعنى وطبعا ممكن تغيره


ونا كنت عامل موضوع عن كيفية انشاء صورة مربوطة بلينك , من هنا : انشاء صورة مربوطة بلينك .


الخلاصة


ان الكود اللى هانستعمله عبارة عن مزيج من الكودين السابقين
هاديك مثال على عمل صندوق يحتوى على 3 روابط متحركة




<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" direction="up" height="100"><ul type="circle">

<li><a href="http://lu2a.blogspot.com/2007/12/blog-post_3603.html" target="_blank">واد رخم اوى</a></li>

<li><a href="http://lu2a.blogspot.com/2007/11/blog-post_12.html" target="_blank">ياحبيبى يا مزنووووق</a></li>

<li><a href="http://lu2a.blogspot.com/2007/09/blog-post_29.html" target="_blank">كلنا لازم ناخد فيها</a></li>

</ul></marquee>




كلمة mraquee دى اللى هايخلى المحتوى يتحرك سواء كان نص او روابط
كلمة onmouseover="this.stop()" onmouseout="this.start()" معناها انك لما تقف بالماوس على المحتوى هايتوقف عن الحركة
كلمة scrollamount="3" دى سرعة الحركة ويمكنك تغييرها , كلما ذادت القيمة كلما ذادت السرعة
كلمة direction="up" ده الاتجاه وممكن تغيره لـ down او right او left
كلمة height="100" ده ارتفاع الصندوق اللى هايتحرك فيه الروابط والوحده دى بالبيكس ويمكنك تغييرها برضو
كده انتهى الجزء بتاع الحركة
من اول كلمة <ul type="circle"> ده الجزء بتاع الروابط , وكلمة ul اختصار لـ unorderd list يعنى ليستة غير مرتبة العناصر , ومعنى كلمة circle للاسف مش هاتعرفه عشان مش بيظهر تاثيره الا فى متصفح النتسكيب , ام هند
بعد كده عندك 3 روابط , كمثال طبعا

<li><a href="http://lu2a.blogspot.com/2007/12/blog-post_3603.html" target="_blank">واد رخم اوى</a></li>


ده رابط منهم , كلمة ( واد رخم اوى ) دى اللى هاتظهر , واللينك اللى فوقيها ده اللينك اللى هاتروحله لما تدوس على الرابط , حلو الكلام ؟
كلمة target="_blank" معناها ان لما تدوس على الرابط هايفتح ف نافذه جديده مش ف نفس النافذه
لاحظ ان اللينك مكتوب بين علامتى تنصيص , اوعا تمسح علامات التنصيص , فقط استبدل اللينك
ممكن تعمل كذا رابط تحت بعض كما فى المثال , بس حاول مايكونش عددهم اكبر من اللازم , يعنى لو عايز رأيي متخليهمش اكتر من 30 مثلا
ومعنى الحرفين (li) اختصار لكلمة list item باعتبار ان الرابط ده عنصر من عناصر الليسته
كلمة </ul> دى نهاية الجزء بتاع الليستة
وكلمة </marquee> دى نهاية الجزء بتاع الحركة

بعد ما تنتهى من تجهيز الكود الخاص بك , اذهب الى نافذة الادوات
dashboard > template > layout > page elements > add page element > HTML java code
ضع الكود ثم احفظ العمل
اعتقد ان الشرح مفصل لدرجة الملل , واللى حس ان الشرح ممل يسامحنى عشان فيه ناس مبتدئين
على فكرة , الكود ده ممكن تستعمله بطريقة عرضية , بعض المواقع بيكون فيها شريط من فوق فيه روابط بيتحرك من اليشمال لليمين , كل اللى عليك انك هاتمزج كود الرابط بكود الصندوق اللى بيحتوى على نص متحرك زى ماقولنا , وتغير اتجاه الحركة , اعتقد ان الكلام مفهوم
لو حد جرب الطريقة ونجحت ياريت يقولى عشان اعرف ان الشرح سليم
ولو حد فشل يقول برضو يمكن يكون الغلط من عندى
استودعكم الله



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

8 اضف تعليق , التعليقات:

د.ماهر محمود said...

هجرب وأرجع أرد

Nour said...

وفيت وكفيت ..شرح سلس جداا.. بشكرك على كم المعرفه التى وجدتها فى مدونتك ..دمت بخير..

مديرية التربيه /الكرخ الثالثه said...

كيف اجعله يتحرك من اليسار الى اليمين وايظا كيف اجعل النص مربوط بلنك
وتسلم على المجهود

Wael said...

مديرية التربية
*************

هاتجعله يتحرك من اليسار لليمين بانك تعمل الدايركشن right

عايز تخلى النص لينك , ببساطة هاتكتب كود لينك بدل النص
اقرا موضوع صورة مربوطة بلينك

amrtalaak said...

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

والله انت دمك خفيف
وشكرا على المعلومات

محمد على said...

الف شكر ليك

احمد الخضري said...

لن اكتب كثير
لاكن
جزاك الله خيرا
وحدها تكفي

♥ شـــذا ♥ روحــــي ♥ said...

اخي وائل

بارك الله فيك ويارب يعطيك الف عافية

تمت بنجاااح مشكور لمجهودك المميزة

تقبل مروري

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات