عرض للصور1

ربعة خطوات لعمل هذا التأثير

احفظ الصورة الأتية في مجلد صفحتك

<head>انسخ هذا الكود في

<SCRIPT LANGUAGE="JavaScript"> // ////////////تعليمات/////////// // اسم الصورة الأساسية يجب عليك نسخها وضعها في مجلد صفحتك لأنها هي التى تعمل التأثير var coverimage="imgcover1800px.gif" // عرض الصورة الأساسية var coverimagewidth=1800 //طول الصورة الأساسية var coverimageheight=17 // اسم صورك هنا var image = new Array() image[0]="<img src='imgslider123.gif'>" image[1]="<img src='imgslider223.jpg'>" image[2]="<img src='imgslider323.jpg'>" // عنوان رابط الصور var imageurl = new Array() imageurl[0]="http://www.cnn.com/" imageurl[1]="http://www.yahoo.com/" imageurl[2]="http://www.cnn.com/" // لاتغير في هذا الجزء شئ var imgpreload=new Array() for (i=0;i<=image.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=image[i] } //مكان الصورة الرئسي (محدد من اعلي المتصفح) var imagetop=10 // مكان الصورةالأفقي (محددمن الطرف الأيسر للمتصفح) var imageleft=36 // طول الصور يجب ان تكون الصور بطول واحد var imagewidth=240 // عرض الصورة .يجب ان تكون جميع الصور بعرض واحد var imageheight=120 // سرعة قوة التأثير var step=80 // سرعة قوة التأثير var speed=20 //فترة الوقف var pause=1500 // لاتخلبص تحت هذا الكود ياعسل var coverimagetop=imagetop var coverimageleft=imageleft var timer var i_image=0 var i_cover=Math.ceil(imageheight/coverimageheight) var cliptop=0 var clipleft=0 var clipbottom=imageheight var clipright=imagewidth var clippoints var thisurl var firsttime=true function init() { if (document.all) { document.all.text.style.posTop=imagetop document.all.text.style.posLeft=imageleft document.all.cover.style.posTop=coverimagetop document.all.cover.style.posLeft=coverimageleft clipleft=0 fadeout() } if (document.layers) { document.text.top=imagetop document.text.left=imageleft document.cover.top=coverimagetop document.cover.left=coverimageleft clipleft=0 fadeout() } } function fadeout() { if (document.all) { if (document.all.cover.style.posLeft >=(-coverimagewidth+imagewidth+coverimageleft+step)) { clipleft+=step clipright=clipleft+imagewidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.cover.style.clip=clippoints document.all.cover.style.posLeft-=step timer= setTimeout("fadeout()",speed) } else { clearTimeout(timer) i_image++ if (firsttime) {i_image--;firsttime=false} if (i_image>=image.length) {i_image=0} text.innerHTML=image[i_image] thisurl=imageurl[i_image] timer= setTimeout("fadein()",pause) } } if (document.layers) { if (document.cover.left >=(-coverimagewidth+imagewidth+coverimageleft+step-22)) { clipleft+=step clipright=clipleft+imagewidth document.cover.clip.top=cliptop document.cover.clip.left=clipleft document.cover.clip.bottom=clipbottom document.cover.clip.right=clipright document.cover.left-=step timer= setTimeout("fadeout()",speed) } else { clearTimeout(timer) i_image++ if (firsttime) {i_image--;firsttime=false} if (i_image>=image.length) {i_image=0} document.text.document.write(image[i_image]) document.text.document.close() thisurl=imageurl[i_image] timer= setTimeout("fadein()",pause) } } } function fadein() { if (document.layers) { if (document.cover.left<=coverimageleft) { clipleft-=step clipright=clipleft+imagewidth document.cover.clip.top=cliptop document.cover.clip.left=clipleft document.cover.clip.bottom=clipbottom document.cover.clip.right=clipright document.cover.left+=step timer= setTimeout("fadein()",speed) } else { clearTimeout(timer) timer= setTimeout("init()",pause) } } if (document.all) { if (document.all.cover.style.posLeft<=coverimageleft) { clipleft-=step clipright=clipleft+imagewidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.cover.style.clip=clippoints document.all.cover.style.posLeft+=step timer= setTimeout("fadein()",speed) } else { clearTimeout(timer) timer= setTimeout("init()",pause) } } } function gotourl() { document.location.href=thisurl } // - End of JavaScript - --> </SCRIPT> <style type="text/css"> .imagestyle { position:absolute; left:-5000px; } </STYLE>

<body>انسخ هذا الكود في

نفسها<body>نسخ هذا الكود في داخل واصفة

Hosted by www.Geocities.ws