تقدم لغة الـ JavaSript خيارات واسعة من أجل إضفاء بعض اللمسات الجمالية على الموقع، خصوصا إذا علمنا أن عدد كبير من زوار المواقع، تكون مثل تلك اللمسات هي الأساس في زيارتهم لهذا الموقع أو ذاك. في درس اليوم، سنتعلم مهارة جديدة من مهارات لغة الـ JavaScript، تتعلق بإضافة صورة معينة لتتبع الماوس أينما حل و ارتحل.
في الواقع هناك مواقع عديدة تقدم مثل هذه الخدمات، لكن ما يعيبها أنها محدودة، لا تعطي للمستخدم الحرية في اختيار الصورة التي تناسب موقعه، لأنها في الغالب توفر أشكال محددة و أكواد جاهزة لا يمكن التعديل فيها. لكن مهارة اليوم تمنحك كل الحرية في اختيار الصورة و حجمها دون أي قيد أو شرط.
لتعيين صورة تتبع الماوس، قم أولا بإضافة الكود التالي مباشرة بعد الوسم <head> :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
| <script type="text/javascript"> //<!-- document.onmousemove = suitsouris; function suitsouris(evenement) { if(navigator.appName=="Microsoft Internet Explorer") { var x = event.x+document.body.scrollLeft; var y = event.y+document.body.scrollTop; } else { var x = evenement.pageX; var y = evenement.pageY; } document.getElementById("image_suit_souris").style.left = (x+1)+'px'; document.getElementById("image_suit_souris").style.top = (y+1)+'px'; } //--></script> |
الآن، أضف السطر التالي مباشرة بعد الوسم <body> :
1
| <img src="bird.png" alt="صورة تتبع الماوس" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" /> |
غير bird.png إلى رابط الصورة التي تريد استخدامها. تمتع بصورة تتبع الماوس أينما حل و ارتحل. بالتوفيق للجميع.
هل أعجبك الموضوع ؟
ليست هناك تعليقات: