تعتبر الوصلات من اجزاء الصفحة التى يتم التعامل معها ككائنات اى لها خصائص ووظائف وأحداث ولعل الاحداث هى اهم جزئية فى كائن الوصلات اما الخصائص فغير ذات اهمية كما ان ليس له اى وظائف لذلك سنبدأ فى التعامل مع الاحداث مباشرة
الاحداث المرتبطة بهذا الكائن هى الاحداث التى تم توضيحها فى درس التعامل مع الاحداث وهى
CODE:
0001
0002
0003
0004
0005
0006
0007
0008
onMouseOver // عند مرور الفأرة على الكائن
onClick // عند الضغط على الكائن
onDblClick // عند الضغط على الكائن مرتين متتاليتين
onMouseOut // عند ذهاب الفأرة عن الكائن
ولكن كما تعرف ان احداث الكائن يتم كتابتها داخل وسم ال HTML وفى هذه الحالة فإن الوسم المستخدم هو a (المستخدم لعمل وصلة)
لاحظ انه بمجرد مرور الفأرة على الوصلة يظهر لك صندوق التنبيه.
بهذه الطريقة تقوم بكتابة الحدث تماما وكأنه خاصية HTML عادية مثلها مثل target او اى من خصائص هذا الوسم.
تقوم بالحاق اى إجراء بهذا الحدث ليتم تنفيذه عند حدوثه وبالطبع هذا الاجراء يمكن ان يكون استدعاء لوظيفة قمت بتعريفها من قبل.
لاحظ استخدام علامة تنصيص مرة ثنائية(") وأخرى احادية (') عند استخدام علامتين من نفس النوع بشكل متداخل يحدث خطأ فى المتصفح فمثلا لايمكنك كتابة
CODE:
0001
0002
0003
0004
0005
onMouseOver=\"alert(\"hi\")\" // علامتين متداخلتين من نفس النوع
onMouseOver='alert('hi')' // علامتين متداخلتين من نفس النوع
مثال يجعل الزائر يذهب الى صفحة معينة عند مروره على الوصلة فقط
< s c r i p t t y p e = \" text / j a v a s c r i p t \" language = \" j a v a s c r i p t\">
function getURL()
{
var pageurl=\"http://www.elnahda.net/\";
document.location.href=pageurl;
}
<a href=\"#\" >شبكة النهضة</a>
تذكر الكائن location وخصائصه, عند مرور الفأرة على الوصلة يتم تنفيذ إجراءات الحدث وهى استدعاء الوظيفة getURL والتى بدورها تقوم بالانتقال الى الصفحة المحددة فى المتغير pageurl
لاحظ استخدام العلامة (#) وهى تجعل الوصلة لاتذهب الى اى مكان عند الضغط عليها ويستفاد
من ذلك عند الرغبة فى استخدام الاحداث وخاصة حدث الضغط onClick.
مثال على حدث الضغط يطلب من الزائر تأكيد رغبته فى ترك الموقع
< s c r i p t t y p e = \" text / j a v a s c r i p t \" language = \" j a v a s c r i p t\">
function getURL()
{
var pageurl=\"http://www.elnahda.net/\";
if(confirm(\"هل حقا ترغب فى ترك الموقع والانتقال الى\" + pageurl))
document.location.href=pageurl;
else
alert(\"شكرا لبقائك فى الموقع\");
}
</sc ript>
<a href=\"#\" >شبكة النهضة</a>
تذكر الوظيفة confirm ضمن الكائن window
لاحظ عدم استخدام اقواس{} مع الجمل الشرطية وذلك لأن الاجراءات الملحقة بها سطر واحد فقط
لاحظ كيفية إضافة المتغير pageurl الى الجملة التأكيدية بإستخدام علامة الجمع
إذا قام الزائر بتأكيد رغبته يتم تنفيذ الاجراءات الملحقة بالجملة if وهى (الانتقال الى موقع جديد) وفى حالة رفضه يتم تنفيذ الاجراءات الملحقة بالجملة else (رسالة شكر)
بالطبع تعلم انه يمكنك استخدام الصور كوصلات مثلا
والان مارأيك فى تعلم تأثير بسيط وجميل وهو تغيير الصورة عند الوقوف عليها (دائما ما تجده فى قائمة التنقل فى الموقع) فمثلا قم بعمل صورة على شكل زر وصورة اخرى لهذا الزر وكأنه فى حالة ضغط, فى البداية يظهر الزر فى حالته العادية وعند مرور الفأرة عليه يظهر وكأنه تم الضغط عليه.
ليكن اسم صورة الزر فى الحالة العادية pic وفى حالة الضغط pic_over وبامتداد gif
< s c r i p t t y p e = \" text / j a v a s c r i p t \" language = \" j a v a s c r i p t\">
function stateOver()
{
document.bupic.src=\"pic_over.gif\";
}
function stateOut()
{
document.bupic.src=\"pic.gif\";
}
<a href=\"http://www.elnahda.net\" > <img src=\"pic.gif\" name=\"bupic\"> </a>
فى البداية لاحظ انه يمكنك ارفاق اكثر من حدث لنفس الكائن كما فى المثال
عندما تمر بالفأرة على الوصلة يتم تغيير الصورة الى الحالة الثانية (الضغط) وعندما تذهب بعيدا عن الوصلة يتم تغيير الصورة مرة اخرى الى الحالة الاولى (العادية)
قمنا بإعطاء الصورة اسم bupic لنتمكن من الاشارة اليها بعد ذلك ومن ثم يتسنى لنا تغيير خصائص هذا الكائن ومنها src وباستخدام هذه الخاصية تمكنا من تغيير مسار (عنوان) الصورة
عند مرور الفأرة على الوصلة يتم استدعاء الوظيفة stateOver والتى تغير مسار الصورة الى الصورة الثانية pic_over وعند ذهاب الفأرة بعد ذلك يتم استدعاء الوظيفة stateOut لتعيد مسار الصورة الى الصورة الاساسية pic
وهكذا تكون قد تعرفت على اهم الاحداث المستخدمة مع الوصلات وكما ذكرنا ان هذا الكائن ليس له اية وظائف كما ان الخصائص ليست ذات اهمية لذلك سننتقل فى الدرس القادم للتعامل مع النماذج.
