المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : كيف أضيف تأثير جافا لصفحة ويب في الفرونت بيج ؟


ذوالجناح
05-06-2009, 10:45 PM
:salam:

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

تحياتي : ذوالجناح

abohmam
06-06-2009, 03:42 PM
وعليكم السلام ورحمة الله وبركاته

حياك الله أخي سالم

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

بل الأسهل ببرنامج النوتة للويندوز اى برنامج محمول من التى وضعتها من قبل الخاصة بـلغة html

عموما كل تأثير من تأثيرات الجافا له طريقة خاصة به ولايوجد شرح عام فى هذا الأمر والذى يجب معرفته فقط المصطلحات
Header
body

وكذلك الوسم الذى يفرق كل جزء من الصفحة عن غيره

إذا نظرت الى كود HTML لأى صفحة
سيبدأ بـ <html>
وينتهي بـ </html>
وبين هاذين الوسمين الذى سيظهر عند العرض


<head>
محتوى الرأس
</head>

<body>
محتوى الجسم
</body>


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

وكي يكون الأمر أسهل بالنسبة لك ضع التأثير فى المرفقات وسوف أحاول مساعدتك لفهم الأمر بما أستطيع ان شاء الله.

ذوالجناح
06-06-2009, 05:18 PM
جزاك الله خيرا أستاذي العزيز
1- أحيانا ردودك لا تتضمن إجابة مباشرة على أسئلتي ولكن أجد خلالها مفاتيح تقودني لما أبحث عنه

نتابع الشرح تبعا لما تعلمناه من مصطلحات سيطلبها منك الذى قام ببرمجة التأثير


إذن فالتأثيرات تبرمج وكمبتديء يجب أن أحصل على نماذج جاهزة وبعد البحث حصلت على برنامجين صغيرين وأيضا على درس بسيط وضع قدمي على الخطوة الأولى إن شاء الله
2 - التأثيرات التي سألت عنها هي كالتي في قالب الكتاب الإلكتروني وأيضا مثل التي في هذا الموقع
http://www.medialab.com/sitegrinder/screenshots.php

ولي عودة إن شاء الله بعد تجريب البرنامجين والدرس وأيضا إذا كان يوجد لكم ملاحظات

مرة أخرى أحييك أستاذي العزيز وجزاك الله خيرا على المجهود

ذوالجناح
03-01-2010, 06:29 PM
بعد أن حصل لقرصي الصلب ماحصل وضاعت ملفاتي ونسيت البرنامجين:
الآن أصبح عندي كود جافا سكربت حملته من أحد المواقع أو برمجته بنفسي:abc_006:
مثل هذه:

http://img191.imageshack.us/img191/1153/03012010074640.png

فهل أضيفها من الواجهة الرئيسية للفرونت بيج كما أضيف صورة او فلاش أم أضيفها من نافذة الأكواد كما أضيف كود تغيير لون السكرول بار؟

abohmam
03-01-2010, 07:09 PM
حياك الله أخى ذا الجناح



كما قلت لك قبل ذلك أن كل تأثير له طريقة تثبيت خاصة

لذلك أرفق التأثير وسوف أوافيك بالطريقة إن شاء الله

والى أن تستقر على تأثير سوف أضع لك رؤوس أقلام لعلك تستفيد منها

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

الآن كيف نضيف التأثير ؟

التأثير يكون عبارة عن 3 أجزاء فى الغالب

1- الكود المستخدم ( وهو الذى سيظهر فى الصفحة مع الصورة أو العبارة التى سيظهر من خلالها التأثير )

2- ملف ( أكواد الجافا ) js

وهذا يجب أن يتم ربطه بهيدر الصفحة بهذه الطريقة

<script type="text/javascript" src=" abc4web.js"></script>

حيث أن abc4web.js إسم ملف الجافا الذى سوف ستستخدمه ومكانه سيكون المجلد الرئيسي

ويتم وضع هذا الكود فى هيدر الصفحة ( شاهد ردى الأول لرؤية كود الهيدر )

3- ملف إستايل خاص بالتأثير أو الصفحة ككل والذى ينتهى بـ css

وهو يختص بألوان الكتابة والخلفية وغير ذلك من تأثيرات ستظهر فى التأثير .... ويتم ربطه بالصفحة بهذه الطريقة :

<LINK href="abc4web.css" rel="stylesheet" type="text/css">

ويتم وضع هذا الكود فى هيدر الصفحة ( شاهد ردى الأول لرؤية كود الهيدر )

ليكون الكود كاملا بهذه الطريقة



<HTML>

<HEAD>

<LINK href="abc4web.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src=" abc4web.js"></script>

</HEAD>

<BODY>

محتوى الصفحة ومكان الكود المستخدم للتأثير مع الصور

</BODY>

</HTML>



بذلك نصل الى الجواب على سؤالك أخى الكريم

ولكن هل إستفدت من الإجابة ؟

لاأعتقد !!! لماذا ؟

لأنه يجب أن يكون هناك مثال عملى كي تتضح الصورة ، ولكن مثال غير الذى بالموقع لصعوبة هذا التأثير فى التطبيق

عموما نبدا بمثال سهل وهو تطبيق لما شرحته هنا

تأثير فتح الصورة

http://www.star28.com/java/java6/img11.html


وهنا تطبيقات كثيرة ستزيد ماشرحته إيضاحا (http://www.star28.com/java/index.html)

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


موفق بإذن الله ... لك مني أجمل تحية .

ذوالجناح
03-01-2010, 07:18 PM
جزاك الله خيراً أستاذنا القدير على الاهتما بالموضوع.
هذا مثال مرفق وهو تأثير من قالب الكتاب الإلكتروني الذي صنعته أنت وأعطيتني إياه لأضع فيه شرح برنامج شادودفندر. وهو لظهور بالون نصي عند مرور الفأرة على بعض الأزرار.

abohmam
03-01-2010, 09:53 PM
ماتصورت أنني لم أعد أشرح جيدا :abc_006:

وماذا أستفيد من ملفات js فقط !!! لانعرف طريقة الاستفادة منها ياطيب ؟
إذا كانت فى قالب الكتاب فستجد فى صفحة index الأكواد الخاصة بذلك مع التطبيق
كل ماعليك فقط تطبيق ماتم كتابته فى الشرح السابق المختصر "

واضح أنك تستصعب الأمر من قبل مراجعة كود المثال الذى لديك ( قالب الكتاب )
أو تريد هذا التأثير فقط دون تعلم هذه اللغة !؟

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

سوف أضع لك بعض التأثيرات المتقدمة والتى لايستخدمها إلا فرسان طريق الإحتراف وطريقة تطبيقها إن شاء الله إذا ماأردت ذلك ....
1- تأثير على الأزرار ..
2- تأثير على الصور ..
3- تأثير على الصفحات

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

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

تأثير تغير صورة الزر عند اللمس أو الضغط بالجافا

http://www.abc4web.net/abc4web_java/java.hover.buttons/

وهذه هي الصور المستخدمة
http://img693.imageshack.us/img693/702/abc4web2.png
http://img693.imageshack.us/img693/9647/abc4web1.png

فى إنتظار المزيد من التوضيح أو تحديد المطلوب إن شاء الله

ذوالجناح
04-01-2010, 06:10 AM
تتذكر أني كنت طلبت منك الصفحة المطوية التي تظهر في زاوية رأس بعض المواقع حين وضعتها قبل فترة في هيدر هذا المنتدى وكانت تلك هي بداية متابعتي لهذه التأثيرات ثم بعد أيام من طلبي لك تلك الصفحة وضعت هذا الاستفسار علي أتعلم شيئاً من أسرار هذه اللغة.
أنا لا أرمي لتعلم طريقة وضع تلك البالونات النصية وحسب ولكني أرغب في تأثيرات أكثر مثل تلك التي وضعتها في أول مشاركة عن هذا الموقع:
http://www.medialab.com/sitegrinder/screenshots.php
وايضاً تأثيرات تغير الصور وتحريكها وتغير الأزرار مثل الذي وضعت في النموذج الأخير.
أما سبب طرحي تأثير قالب الكتاب فهو أنني أمس وجدت كودا يزعمون أنه للصفحة المطوية وعدت لقالب الكتاب وحاولت أن أمشي على نمطه ولكني فشلت فسألت لأعرف طرقة إضافتهخا في الفرونت بيج.
خلاصة الكلام:
أريد تعلم طريقة تفيدني من استخدام أي تأثير أحصل عليه وأخص منها التأثيرات الخاصة بالمحترفين

واستفسار بشأن النموذج الذي وضهته لصفحة طريق الاحتراف:
هذا تأثير جافا أم تأثير dhtml؟

تحياتي لك.

عادل نت
04-01-2010, 10:46 AM
ما شاء الله عليك اخي ابو همام , لم ترك اي مجال الا وابدعت به ....

زادك الله من علمه ووسع لك صدرك وجزاك الفردوس .

ان شاء الله اكون انا ايضاً من المتابعين لكم في هذا الموضوع وبالفعل هو شيء لا بد من تعلمه

ولو بشيء بسيط . دمت بكل خير . وان شاء الله سيكون الستايل القادم مليء بالجماليات الي بنتعلمها

من موقعنا العزيز , والذي استفدت منه الكثير الكثير .

تابع وان شاء الله ستجدني مع اخي " ذو الجناح " من المتابعين لكل درس تضعه مع التطبيق

لك احترامي يا استاذي الفاضل .

ذوالجناح
04-01-2010, 11:49 AM
إن فلنبدا بشرح هذا التأثير من تأثيرات الجافا

http://www.abc4web.net/abc4web_java/java.hover.buttons/

ذوالجناح
04-01-2010, 12:28 PM
عدت لموقع ستار 28 وحاولت إضافة بعض الأكواد فنجحت والحمدلله في كود الساعة وكود المطر وأخفقة في كود تغيير اللون ولكن سأعاود المحاولة بإذن الله وإن شاء الله أنجح وهذا التطبيق في المرفقات

ملاحظة: جربت هذا الكود لتغير الخلفية الذي يكتب في الرأس وفي الجسم وفشلت في جعل الصفحة تومض
http://www.star28.com/java/java2/color10.html

ثم جربت هذا الكود لتغيير للخلفية والذي يكتب في الجسم فقط ونجحت
http://soft.vip600.com/modules.php?name=Java&op=viewarticle&artid=32

وأيضاً وجدت هذا الموقع فيه كمية من الأكواد جاري تطبيق بعضها لاحقاً

Free JavaScript Collection (http://script.omduena.com/)

محمود عفيفى
04-01-2010, 01:51 PM
جزاك الله خيرا اخى ذو الجناح على طرح هذا السؤال لأستاذنا أبو همام
بإذن الله نستفيد منه جميعا

abohmam
04-01-2010, 02:00 PM
ماشاء الله أخى ذا الجناح

تطبيقات رائعة ماشاء الله والحمد لله تأكدت بأننى لم أكتب ألغازا فى ردى السابق :abc_025:

ملحوظة : لو أضفت الأكواد هنا فى ردك لاستفاد منها الجميع حيث الكود والتطبيق
وكلامي هنا عن الأكواد المنتشرة والمعروفة فى مواقع أكواد الجافا ....


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

واستفسار بشأن النموذج الذي وضهته لصفحة طريق الاحتراف:
هذا تأثير جافا أم تأثير dhtml؟

تحياتي لك.
لقد قمت بإستخدام أكواد الجافا JAVA فى النموذج وليست DHTML والتى هى متوفرة فى فرونت بيج
وهناك طريقة ثالثة بإستخدام لغة CSS إن شاء الله فى خطة العمل سوف أشرح تأثير أو إثنين

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

أعطيني مهلة لتخير بعض التأثيرات التى يمكن الإستفادة منها ووضع تطبيقاتها ان شاء الله

ذوالجناح
04-01-2010, 04:12 PM
لو أضفت الأكواد هنا فى ردك لاستفاد منها الجميع حيث الكود والتطبيق
هذا كود إضافة ساعة تتبع مؤشر الفأرة يوضع الكود في الــ head


<SCRIPT language=JavaScript>
// Visit our site at http://www.star28.com/ for more code
dCol='0000FF';//date colour.
fCol='006600';//face colour.
sCol='9900FF';//seconds colour.
mCol='FF4500';//minutes colour.
hCol='FF4500';//hours colour.
ClockHeight=35;
ClockWidth=35;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!
d=new Array("WWW.ABC4WEB.NET","WWW.ABC4WEB.NET","WWW.ABC4WEB.NET","WWW.ABC4WEB.NET","WWW.ABC4WEB.NET","WWW.ABC4WEB.NET","WWW.ABC4WEB.NET");
m=new Array("JANUAR","FEBRUAR","MAERZ","APRIL","MAI","JUNI","JULI","AUGUST","SEPTEMBER","OKTOBER","NOVEMBER","DEZEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';widt h:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';widt h:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromM ouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove =Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>


وهذا كود تغيير خلفية الصفحة حيث أن لون الخلية يتغير عند كل مرة تفتح فيها الصفحة والكود يوضع في الـــ body

<script>

/*Random background color- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/

//Enter list of bgcolors:
var bgcolorlist=new Array("#DFDFFF", "#FFFFBF", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#FFFFFF", "#DDDD00")

document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
</script>

وهذا كود يجعل الصفحة تمطر (بالفواصل طبعاً وليس قطرات الماء) يوضع الكود في منطقة الــ body

<script language="JavaScript">

/* This credit MUST stay intact for use */
/* Visit our site at http://www.star28.com/ for more code */

<!-- Begin
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
}
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}
// End -->
</script>


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


أعطيني مهلة لتخير بعض التأثيرات التى يمكن الإستفادة منها ووضع تطبيقاتها ان شاء الله

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

سليمان الفحلي
15-08-2013, 03:49 PM
تطبيقات جميلة ما شاء الله عليها

عبد الجليل الأمين
16-08-2013, 10:18 AM
السلام عليكم ورحمة الله وبركاته