الروابط الديناميكية، الروابط التي يتم تنشيطها بالماوس

على الرغم من أن HTML الديناميكي يبدو حيويًا، إلا أن الويب بأكمله لا يزال ثابتًا تقريبًا. بالطبع، تحتوي بعض مواقع الويب الرائدة على بعض المحتوى التفاعلي لبعض الوقت، ولكن لا يزال يتم تنفيذ معظمها باستخدام المكونات الإضافية أو عن طريق كتابة صفحات متعددة لإصدارات مختلفة من المتصفحات. بالنسبة لمعظم منتجي صفحات الويب، حتى لو كانوا يريدون كتابة إصدارات متعددة من الصفحة، فمن الصعب عليهم الحصول على الوقت. بالإضافة إلى ذلك، عادةً ما تتطلب صفحات الويب التي يمكنها تحقيق تأثيرات تفاعلية نطاقًا تردديًا عاليًا المؤلف والمشاهد. ومع ذلك، لا يجب أن يكون الأمر على هذا النحو. هنا، يمكنك التعرف على طريقة سريعة وسهلة لإضافة تأثيرات DHTML إلى صفحات الويب في ظل ظروف النطاق الترددي المنخفض. هذه هي طريقة تمرير الماوس. لا تتطلب هذه الطريقة تحميل أي صور أو كتابة صفحات متعددة.

معلومات التقاط أفضل للماوس

يعد Mouseover أحد الأساليب الديناميكية الأكثر استخدامًا وفعالية على الويب، والسبب الجيد هو أنه يسمح للمشاهد بالحصول على تعليقات واضحة ومباشرة. فكر في الأمر على النحو التالي: حرك الماوس فوق رابط النص التشعبي وسيتم تمييز الرابط أو تغيير لونه أو تغييره ليقول "أنا رابط!"

هذا لا يعني أن جميع روابط تمرير الماوس التي تم إنشاؤها هي نفسها. إنهم مختلفون. أسوأ موقف هو أن روابط تمرير الماوس يتم تنفيذها بلغة Java أو بتنسيقات خاصة، مثل تنسيق Shockwave الخاص بـ Macromedia، الأمر الذي يتطلب من المشاهد تثبيت مكون إضافي لرؤية التأثير. أفضل سيناريو هو أن تكون روابط تمرير الماوس مكتوبة بلغة JavaScript التي تدعمها جميع المتصفحات. ولكن حتى إذا تم تنفيذه باستخدام JavaScript، فإنه لا يزال يتطلب من المتصفح تحميل صورتين، واحدة للسطوع العالي والأخرى للعرض العادي، وهو ما يعد مضيعة لاستخدام النطاق الترددي.

الآن دعونا نلقي نظرة على DHTML، الذي ينشئ روابط تمرير الماوس دون تحميل أي صور. الشيء الوحيد الذي يجب ملاحظته هو أن كود DHTML يحتاج إلى أن يفتحه المتصفح لفتح كائنات صفحة الويب، مثل الروابط والأنماط، بحيث يمكن وصفها بواسطة نموذج كائن المستند (DOM). بمعنى آخر، تعمل التعليمات البرمجية حاليًا فقط في Internet Explorer 4.0. ومع ذلك، فإن متصفح الجيل الخامس من Netscape (المتوقع إصداره بنهاية هذا العام) سيدعم DOM بشكل كامل. ولا تقلق أيضًا بشأن استخدام روابط تمرير الماوس في المتصفحات غير المتوافقة؛ فالمتصفحات التي لا تدعم كود DHTML في الصفحة ستتجاهلها ببساطة. (لمزيد من التفاصيل، يرجى مراجعة قسم "دع DOM يعمل على موقع الويب الخاص بك" لاحقًا.)

للرمز

إلى منطقتين رئيسيتين: إحداهما هي منطقة المحتوى، والأخرى هي منطقة التنقل. تظهر روابط تمرير الماوس عادةً في منطقة التنقل. عادةً، يتم استخدام الأزرار المميزة لتوجيه المشاهدين إلى مناطق مختلفة من الموقع، مثل رسومات الموقع أو صفحات التعليقات. بدلاً من استخدام الأزرار، سنقوم بتحويل الروابط النصية العادية إلى روابط تمرير الماوس التفاعلية. الطريقة هي: أولاً قم بإدخال روابط نصية عادية في المستند، مثل:

< a href="contact_us.html">

اتصل بنا.

تقوم الخطوة الثانية بتغيير لون الرابط النصي عندما يتحرك الماوس فوقه. برنامج البرنامج النصي DHTML هو كما يلي:

function rollon( ){

if (window.event.srcElement.tagName

== "A"){

window.event.srcElement

style.color = "red";}

}

function rolloff( ){.

if ( window.event.srcElement.tagName

== "A"){

window.event.srcElement.style.color

= "";}

}

document.onmouseover = rollon;

document.onmouseout

= rolloff;

أدخل العلامة < في منتصف البرنامج النصي> في لصفحة الويب، ويمكنك تحقيق تأثير تمرير الماوس على كل رابط نصي على الفور. أدناه نحلل بالتفصيل كيفية تحقيق ذلك.

يحدد برنامج النص المكتوب سابقًا وظيفتين رئيسيتين: التمرير (يتم تنشيطه عندما يتحرك الماوس فوق الرابط) والتدحرج (يتم تنشيطه عندما يتحرك الماوس بعيدًا عن الرابط). تبدأ كل وظيفة ببيان "if" بسيط، مما يعني: في كل مرة يتم فيها استدعاء حدث onmouseover في مستند الويب، ستقوم وظيفة rollon بإعلام المتصفح لتحديد ما إذا كان الكائن الذي ينشط الحدث عبارة عن علامة ربط (window.event . srcElement.tagName == "أ"). إذا كان الأمر كذلك، فسيطبق البرنامج النصي نمطًا خاصًا (أحمر في هذه الحالة) على الرابط. وبالمثل، عند وقوع حدث onmouseout، ستعيد وظيفة التدحرج النمط إلى لونه الافتراضي (اللون = "").

يقوم السطران الأخيران من هذا البرنامج النصي بإعلام المتصفح بتنفيذ وظيفة التمرير عند حدوث حدث onmouseover وإيقاف تشغيل وظيفة رابط تمرير الماوس (تمرير الماوس) عند حدوث حدث onmouseout.

احصل على ضعف النتيجة بنصف الجهد.

يتيح لك Internet Explorer 4.0 استخدام DHTML للتحكم في كل كائن في المستند وبطبيعة الحال، يمكنك تحقيق المزيد من الوظائف إلى جانب تغيير لون علامة الارتساء. في الواقع، يمكنك تطبيق أي عنصر من Cascading Style Sheets (CSS، إحدى مواصفات التنسيق القياسية W3C) على أي نوع من الكائنات أو مكونات الموارد. على سبيل المثال، بالإضافة إلى جعل الارتباط يظهر باللون الأحمر، يمكنك أيضًا إضافة تسطير أو إزالته منه.

لإزالة التسطير، ما عليك سوى إدراج سمة النمط التالية في جميع علامات الربط بالصفحة:

style = "text-decoration: none"

سيؤدي هذا البيان إلى إزالة التسطير من الرابط، مما يجعله يبدو في حالة طبيعية أو افتراضية. (افتراضيًا، يقوم Internet Explorer 4.0 وNavigator 4.0 بوضع خط تحت كافة الروابط النصية. وستقوم العبارة أعلاه بتغيير الحالة الافتراضية لهذه الروابط واحدًا تلو الآخر.)

ثم قم بإضافة العبارة التالية أسفل وظيفة rollon:

window.event.style.

textDecoration = "underline";

الآن، سيتحول مورد حدث تمرير الماوس الذي حددته إلى اللون الأحمر وسيكون له نمط تسطير. تجدر الإشارة إلى أنه يمكن إزالة التسطير عن طريق إضافة العبارة التالية إلى وظيفة التدحرج:

window.event.srcElement.style.

textDecoration = "none"؛

تُظهر وظائف التعديل المذكورة أعلاه والتي يمكن تنفيذها بسرعة قوة DHTML البسيطة برنامج نصي لا يتطلب تحميل أي صور، ولكنه يستخدم تعليمات برمجية مرنة للغاية ومحمولة لإنتاج تأثيرات بصرية لافتة للنظر، ويمكنني القول أنه يمكنك استخدامه للوصول إلى أي مستند، حتى في المتصفحات القديمة. إذا كنت ترغب في الحصول على هذا الرمز وإتقانه بنفسك، يرجى زيارة موقعنا على الإنترنت: www.windowspro.com .

-------------------

إدوارد جروسمان هو منتج موقع www.windowspro.com وهو حاصل على درجة الدكتوراه في الفلسفة وكان منخرطًا في الأبحاث في مجال الفلسفة قبل ظهور الويب. بريده الإلكتروني: [email protected]

ما عليك سوى إضافة حوالي 15 سطرًا من التعليمات البرمجية إلى ①رأس المستند، ويمكنك تحويل ②روابط النص العادية على أي صفحة ويب إلى ③روابط تفاعلية يتم تنشيطها بالماوس (تمرير الماوس).

------------

اجعل DOM يعمل على موقع الويب الخاص بك

مع Dynamic HTML (DHTML)، لم تعد البرمجة الموجهة للكائنات أمرًا يمكن لخبراء البرمجة فقط القيام به، بل أصبحت مجالًا يستمتع به الجميع حتى الويب. يمكن لصانعي الصفحات المشاركة في. ويرجع الفضل في ذلك إلى حد كبير إلى نموذج كائن المستند، أو DOM. تتعامل مواصفات W3C هذه مع كل مكون في المستند ككائن، سواء كان مستندًا أو نمطًا أو رابطًا. يمكن للبرامج النصية تعديل هذه الكائنات بناءً على إدخال المستخدم أو نوع المتصفح أو العديد من المتغيرات الأخرى، بما في ذلك تغيير الحجم أو تغيير النمط أو تحديث الارتباط.

يمكن لـ DOM فتح مستند كامل، مما يسمح لمؤلفي الويب بإنشاء صفحات تفاعلية قابلة للتخصيص بدرجة كبيرة دون فرض عبء تنزيل كبير على المستخدمين. ولا يؤدي هذا إلى تمكين روابط تمرير الماوس ذات النطاق الترددي المنخفض فحسب، بل يتيح أيضًا قوائم تصفح الويب القابلة للطي ومكونات الصفحة المنقولة (مثل الصور وكتل النص وما إلى ذلك).

لمزيد من المعلومات حول DOM، يرجى زيارة المواقع: www.w3.org/dom و www.microsoft.com/workshop/author/dhtml/ وdeveloper.netscape.com/docs/manuals/communicator/dynhtml/.

للحصول على أمثلة لتطبيقات DHTML، قم بزيارة: www.windowspro.com و www.projectcool.com (حاول سحب Saturn) وتصفح "عرض المصدر".

في IE 4.0، يمكنك استخدام Dynamic HTML لتشغيل العشرات من الكائنات. تتوفر قائمة مفصلة على www.microsoft.com .