Cursor Scroller

08-03-2005

السلام عليكم ورحمة الله وبركاته

Cursor Scroller

اليوم معنا كود جافا سكريبت أتمنى أنا ينال إعجابكم .....

وظيفة الكود هو إظهار مربع أسفل مؤشر الفأرة يظهر فيه عبارة متحركة يراها الزائر لموقعك في المربع السابق .......
بإمكانك أن ترى مثال جاهز بالنقر هنــــــا .....

والآن لنرى كيف يمكننا أن نضيف هذا الكود لصفحتنا .......

الخطوة الأولى : قم بإضافة الكود التالي إلى كود الـ HTML الخاص بصفحتك
ولكن إنتبه عليك إضافته في الـ <BODY> يعني بين الوسمين
<BODY> هنا يضاف الكود <‎/BODY> .......

الكـــــود هـــو .....

كود:

<SCRIPT language="JavaScript1.2"> 


//1) set message to display
var scroller_msg='Welcome to behindvoices.com !!'
//2) set whether message should auto disappear after x seconds (0=perpetual).
//Note that double clicking page will also dismiss message
var dismissafter=10

var initialvisible=0
if (document.all)
document.write('<marquee id="curscroll" style="position:absolute;width:150px;border:1px solid black;font-size:14px;background-color:white;visibility:hidden">'+scroller_msg+'</marquee>')

function followcursor(){
//move cursor function for IE

if (initialvisible==0){
curscroll.style.visibility="visible"
initialvisible=1
}

curscroll.style.left=document.body.scrollLeft+event.clientX+10
curscroll.style.top=document.body.scrollTop+event.clientY+10
}

function dismissmessage(){
curscroll.style.visibility="hidden"
}


if (document.all){
document.onmousemove=followcursor
document.ondblclick=dismissmessage
if (dismissafter!=0)
setTimeout("dismissmessage()",dismissafter*1000)
}



//-->
 </SCRIPT>

الخطوة الثانية : قم بإضافة الكود أو الخصائص التالية بعد كلمة الـ BODY أي في أول وسم <BODY> :

مـلاحظة : أقصد أن تقوموا بإضافتها بعد حرف Y من كلمة BODY

كود:

style="width:100%;overflow-x:hidden;overflow-y:scroll">

يعني

سيكون ناتج الخطوة الثانية بالشكل التالي

كود:

<BODY style="width:100%;overflow-x:hidden;overflow-y:scroll">

الآن قم بحفظ عملك و بإذن الله سوف يظهر لديك مثل المثال السابق :

ملاحظة يمكن للزائر أن يقوم بإخفاء المربع وذلك بالنقر مرتين على الزر الأيسر للفأرة ....
أو بإمكانك أن تحدد زمن لإختفاء المربع وذلك بتغيير قيمة الـــ

كود:

var dismissafter=10

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

وبالنهابة سيكون الكود الكامل لصفحة لا تحتوي إلا هذه السكريبت بالشكل التالي :

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>behindvoices</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<BODY>
<SCRIPT language="JavaScript1.2"> 


//1) set message to display
var scroller_msg='Welcome to behindvoices.com !!'
//2) set whether message should auto disappear after x seconds (0=perpetual).
//Note that double clicking page will also dismiss message
var dismissafter=10

var initialvisible=0
if (document.all)
document.write('<marquee id="curscroll" style="position:absolute;width:150px;border:1px solid black;font-size:14px;background-color:white;visibility:hidden">'+scroller_msg+'</marquee>')

function followcursor(){
//move cursor function for IE

if (initialvisible==0){
curscroll.style.visibility="visible"
initialvisible=1
}

curscroll.style.left=document.body.scrollLeft+event.clientX+10
curscroll.style.top=document.body.scrollTop+event.clientY+10
}

function dismissmessage(){
curscroll.style.visibility="hidden"
}


if (document.all){
document.onmousemove=followcursor
document.ondblclick=dismissmessage
if (dismissafter!=0)
setTimeout("dismissmessage()",dismissafter*1000)
}



//-->
 </SCRIPT>
</body>
</html>

وإن شاء الله يكون ظهر لديكم الكود مثل الشكل السابق وبدون أخطاء ........
وأي سؤال أنا جاهز إن شاء الله ........

والسلام عليكم ورحمة الله وبركاته

08-03-2005

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