استخدام الهتمل الديناميكية وDHTML هو عبارة عن خليط من الجافا سكريبت Java scripts و CSS .
في هذا الموضوع سنتعلم طريقة إنشاء أوراق أو مربعات ملاحظات صفراء اللون Note عند مرور الفأرة على وصلة معينة.
الفكرة تتلخص في إنشاء الوصلة مع جدول صغير اسفلها يختفي و يظهر عند مرور الفأرة .
سننشأ الصفحة التالية .
و الآن الخلطة السحرية .. إضافة بعض من أكواد CSS . لو لاحظت المربع الأصفر عبارة عن جدول باستخدام
<html dir="rtl"> <head> </head> <body> <p align="right">الكثير من المقالات المفيدة من شبكة <a href="#">الدكتورنت </a>. <div id="n1" style="position:absolute; left:328px; top:34px; z-index:1" > <table bgcolor="yellow" width=250 cellpadding=6 cellspacing=0 border=1 > <tr> <td> <p>شبكة عربية ظهرت من 4 سنوات تخصصت في خدمة المصمم العربي.</p> <a href="#">إغلاق</a> </td> </tr> </table> </div> </body> </html>?>
ما أضفناه هو الكود
الغامق حددنا للجدول نمط Style معين
Position:absolute : نخبر المتصفح أننا نريد تحديد مكان الصندوق أو الجدول مع مراعاة الزاوية العليا على اليسار لنافذة المتصفح .
[*]
Left:328 : نخبر المتصفح أن المسافة من اليسار تساوي 328
[*]
Top:34 : المسافة من الصندوق إلى الأعلى تساوي 34
[*]
Z-index:1 : نطلب من المتصفح أن يضع الجدول أمام أي نص لدينا في الصفحة أو ان يكون في الأعلى .
[/list]خاصية z-index تعتبر من أكثر الخصائص إثارة للحيرة. فكل محتويات الصفحة تلقائيا لها الترتيب 0 . و أي كائن سيحمل ترتيب أكثر مثلا 1 سيظهر في الأعلى فلو اعتبرنا أن الصفحة مجموعة من الطبقات فمحتويات الصفحة تكون دائما في الطبقة 0 مالم نحدد غير ذلك .
و الأن سنضيف خاصية جديدة للخواص السابقة و هي خاصية visibility و التي ستسمح لنا ما إذا كنا نريد للمربع أن يكون ظاهر أو مختفي.
<div id="n1" style="position:absolute; left:180; top:25; z-index:1;visibility:hidden;">?>
لو عرضنا الصفحة لن يظهر لنا الصندوق الأصفر
و الآن دور الجافا سكريبت Java scripts
لاحظ في الأعلى أنا اعطينا الصندوق اسم n1 في خاصية id و من هنا يمكننا التحكم في الصندوق من خلال الجافا سكريبت لو اضفنا هذا الكود في منطقة الرأس بين و
****** ******="******"> <!-- function showObject() { document.all['n1'].style.visibility = "visible"; } //--> ******?>
أنشأنا دالة اسميناها showObject في هذه الدالة سنستخدم متسسلسلة تلقائية defualt array و هي document.all تمكنك من الوصول لخواص جميع الكائنات الموجودة في الصفحة و التي يمكن للجافا سكريبت التحكم فيها و في خواصها
و بالتالي
الكود التالي في الجافا سكريبت
document.all['n1'].style.visibility = "visible"; ?>
يساوي تماما الكود التالي و الذي استخدمناه في div
<div id="n1" style="visibility:visible;"> ?>
الآن في الوصلة علينا استدعاء كود الجافا هذا
<p align="right">الكثير من المقالات المفيدة من شبكة <a href="******:showObject();">الدكتور نت </a>.?>
في عنوان الوصلة وبدل من استدعاء موقع أو صفحة نستدعي الكود .
الإخفاءلإخفاء الوصلة نريد تفعيل وصلة الإغلاق بواسطة الدالة
function hideObject() { document.all['n1'].style.visibility = "hidden"; }?>
و لوصلة الإغلاق نضع
<a href="******:hideObject();">Close</a>?>
يتبع
