السلام عليكم و رحمة الله و بركاته
هل شاهدت مواقع تصميم و تجد فيها شريط متحرك يظهر صوراً تتحرك من اليمين الى
اليسار او من الاعلى الى الاسفل؟و تريد عمل مثلهم؟بسيطة!اقرأ هذا الدرس:
فى البداية افتح برنامج الفرونت بيج ثم اضغط بالفأرة فى اى مكان بالصفحة ثم انسخ الكود
التالى:
كود:
<div align="center" dir="ltr"><script language="JavaScript1.2">
<!--
/*
Conveyor belt slideshow script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
* Translated By http://www.star28.com/
* This notice must stay intact for use
* Visit http://www.star28.com/ for more code */
//Specify the slider's width (in pixels)
var sliderwidth=200; // عرض المستطيل بالبكسل
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=145;
//Specify the slider's scroll speed (larger is faster)
var slidespeed=4; // يمكنك تغيير السرعة أيضاً
//Specify the slider's images
var leftrightslide=new Array();
var finalslide='';
leftrightslide[0]='<a href="http://www.star28.com"><img src="036.gif"
border=0></a>'; // عدل لعنوان الصورة و الرابط الذي يناسبك
leftrightslide[1]='<a href="http://www.star28.com""><img src="103.gif"
border=0></a>';
leftrightslide[2]='<a href="http://www.star28.com""><img src="105.gif"
border=0></a>';
leftrightslide[3]='<a href="http://www.star28.com""><img src="131.gif"
border=0></a>';
leftrightslide[4]='<a href="http://www.star28.com""><img src="216.gif"
border=0></a>';
///////do NOT edit pass this line////////////////////////////////////
var copyspeed=slidespeed;
//copy contents of leftrightslide into one variable
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+" ";
if (document.all){
//dynamically write out the marquee tag
document.write('<marquee id="ieslider" scrollAmount=0
style="width:'+sliderwidth+'">'+finalslide+'</marquee>');
//stop marquee when mouse is over it
ieslider.onmouseover=new Function("ieslider.scrollAmount=0");
//re-enable marquee when mouse is out
ieslider.onmouseout=new Function("if (document.readyState=='complete')
ieslider.scrollAmount=slidespeed");
}
function regenerate(){
window.location.reload();
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show";
setTimeout("window.onresize=regenerate",450);
intializeleftrightslide();
}
if (document.all)
ieslider.scrollAmount=slidespeed;
}
//NS specific function for initializing slider upon page load
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write
('<nobr>'+finalslide+'</nobr>');
document. ns_slider01.document.ns_slider02.document.close();
thelength=document.ns_slider01.document.ns_slider02.document.width;
scrollslide();
}
//NS specific function for sliding slideshow
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed;
setTimeout("scrollslide()",100);
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth;
scrollslide();
}
}
window.onload=regenerate2;
//-->
</script>
<ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01"
visibility=hide>
<layer name="ns_slider02" onMouseover="slidespeed=0;"
onMouseout="slidespeed=copyspeed"></layer>
</ilayer></div>
بعد ذلك اذهب الى محرر الاكواد فى الفرونت بيج بالضغط على زر code الموجود اسفل
اليسار فى الفرونت بيج و اضغط عليه كما بالصورة:
ثم ابحث عن الكود التالى:
كود:
var leftrightslide=new Array();
كود:
var finalslide='';
leftrightslide[0]='<a href="http://www.star28.com"><img src="036.gif"
border=0></a>'; // عدل لعنوان الصورة و الرابط الذي يناسبك
leftrightslide[1]='<a href="http://www.star28.com""><img src="103.gif"
border=0></a>';
leftrightslide[2]='<a href="http://www.star28.com""><img src="105.gif"
border=0></a>';
leftrightslide[3]='<a href="http://www.star28.com""><img src="131.gif"
border=0></a>';
leftrightslide[4]='<a href="http://www.star28.com""><img src="216.gif"
border=0></a>';
و لاحظ ان الكود التالى تكرر عدة مرات:
كود:
'<a href="http://www.star28.com">
فأكتب بدلاً منه '<a href="http://www.yoursite.com">
مع استبدال yoursite.com باسم موقعك و امتداده ثم كرر ذلك مع باقى الروابط مع مراعاة
عدم نزع http:// و هذا الرابط هو الرابط الذى تؤدى اليه الصورة
اما عن الصورة التى تظهر نفسها فلاحظ تكرار الكود التالى:
كود:
<img src="131.gif" border=0></a>';
استبدله بالكود التالى:
كود:
<img src="http://www.yoursite.com/picture.gif" border=0></a>';
مع مراعاة تعديل yoursite.com الى رابط موقعك و امتداده
و تعديل picture الى رابط الصورة المرفوعة على موقعك و تعديل الامتداد .gif الى امتداد
الصورة المطلوبةسواء كان jpg او gif الخ.....
و كرر ذلك مع كل كود
ملحوظة:لتغيير حجم المساحة التى ستظهر فيها الصور ابحث عن الكود التالى:
كود:
var sliderwidth=200; // عرض المستطيل بالبكسل
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=145;
//Specify the slider's scroll speed (larger is faster)
var slidespeed=4;
عدل على الكود التالى:
var sliderwidth=200
بما يناسب طول المساحة التى يتم عرض الصورة فيها
ثم عدل على الكود التالى:
كود:
var sliderheight=145
بما يناسب ارتفاع المساحة التى يتم عرض الصور فيها
و عدل على الكود التالى:
بالسرعة التى تريدها فى عملية عرض الصور
ملحوظة:لاضافة صور جديدة فى هذه المساحة المتحركة ابحث عن الكود:
كود:
leftrightslide[4]='<a href="http://www.star28.com""><img src="216.gif"
border=0></a>';
اضف بعده نفس الكود مع تعديل ما يلى:
اولاً
leftrightslide[4]
عدل الرقم الموجود فيه الى الرقم 5 اى الى رقم مختلف و هكذا
ثانياً:
كود:
<img src="131.gif" border=0></a>';
استبدله بالكود التالى:
كود:
<img src="http://www.yoursite.com/picture.gif" border=0></a>';
مع مراعاة تعديل yoursite.com الى رابط موقعك و امتداده
و تعديل picture الى رابط الصورة المرفوعة على موقعك و تعديل الامتداد .gif الى امتداد
الصورة المطلوبةسواء كان jpg او gif الخ.....
و كرر ذلك مع كل كود
و مبروك اصبح لديك شريط متحرك للصور يتم عرض الصور فيه بالتناوب
مثال:www.albasha.info
مثال اخر:www.albasha.info/tsmim/tsmim
رابط الموضوع الاصلى:
http://www.albasha.info/design/viewtopic.php?t=244
ارجو ان تكونوا قد استفدتم اخوانى الكرام
و اسف على التقصير
و اى استفسار انا حاضر
دمتم بود
شرح عمل صور تتحرك من اليمين الى اليسار بالفرونت بيج
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة ظل العود 
