dhtml: ظ†ظ‚ظ„ ظƒط§ط¦ظ† ط¹ظ„ظ‰ طµظپط*ط©


بسم الله ، الحمد لله والصلاة والسلام على محمد النبي الكريم
الدرس مفصل من موقع فرنسي
ترجمة: يونس المغربي
سامحوني ع الترجمة الغير جيدة نظرا لان الوقت ادركني ، كنت مسرع ههه



قد تبدو الامور معقدة للوهلة الاولى في لغة dhtml لكن ما ان نحددوا ماعلين القيام به الا وتسهل الامور بحول الله، لنعرفوا اولا ماسنقوم به.

صورة يمكنها التحرك في صفحة بفضل ازرار

تتكون صفحتنا من :




صورة ستكون متحركة
و نموذج مع أربعة أزرار لتحريك الصورة

الصورة:

سنبدأ من خلال تنفيذ العلامة أتش تي أم أل &quot;<IMG>&quot; الأساسية في منطقتنا الصفحة

رمز Code:
<IMG SRC=&quot;ar4help.gif&quot;>
لجعل هدا العنصر اكثر حيوية سنضيف اليه بعض الخصائص

رمز Code:
<SCRIPT LANGUAGE=&quot;javascript&quot;> var hautimage = 100; var gaucheimage = 100; document.write('<IMG SRC=&quot;../images/test/ar4help.gif&quot; ID=smile STYLE=&quot;position:absolute;top:'+hautimage+';le ft:'+gaucheimage+'&quot;>'); </SCRIPT>
هذا الرمز هو بالطبع أن توضع بين <BODY>و</ الهيئة لأنه يشكل عنصرا من جسد الصفحة.
نخلق متغيرين ، وgaucheimage hautimage ، التي تحدد موقع صورتنا.
نعطي صورة الهوية لدينا (ابتسامة) ، والتي ستشير لهم بعد ذلك. ونحن أيضا تعريف الأنماط :
-- السمة الموقف : إنه يمكن أن تأخذ قيمتين : المطلق والنسبي. لنقل صورتنا ، لا بد أن نحدد الموقف كما المطلق ، مما يعني أنه سيتم وضع صورة لدينا وفقا لإحداثيات مطلقة ، وليس لها مكان في أتش تي أم أل التالية لدينا صفحة.
-- السمة قمة : قمة مجموعة المسافة بين الحافة العلوية من الصورة والجزء العلوي من المستعرض. مع أكبر 100 شركة ، وطرح لذلك نحن صورة في 100 بكسل من أعلى المتصفح.
-- السمة ترك : أنها تحدد المسافة بين الحافة اليسرى من المستعرض وصورة. مع اليسار : 100 ، صورة هو 100 بكسل من الحافة اليسرى من المستعرض



النموذج

الآن نستعملوا النموذج للسماح للصورة بالتحرك

رمز Code:
<FORM> <INPUT TYPE=button VALUE=gauche> <INPUT TYPE=button VALUE=droite> <INPUT TYPE=button VALUE=haut> <INPUT TYPE=button VALUE=bas> </FORM>
الدالة التي تعمل كل ذلك:
ننشؤوا دالة او ستتكلف بإدارة وسائل نقل الصورة ، ستسمى فيما بعد الضغط على الازرار

رمز PHP:
<code style="white-space:nowrap"> <code> <SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
{
if(document.getElementById)
{
hautimage += y;
gaucheimage += x;
document.getElementById("ar4help").style.top = hautimage;
document.getElementById("ar4help").style.left = gaucheimage;
}
}
</SCRIPT>
</code> </code>



رمز PHP:
<code style="white-space:nowrap"> <code> <SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
{
</code> </code>

أنشأنا دالة سميناها bouge وهي تعني تحرك او متحركة وهذه الدالة تقبل التحول في وضع اثنين من المتغيرات x,y
x: افقي
y: عمودي



رمز PHP:
<code style="white-space:nowrap"> <code> if(document.getElementById)
{
</code> </code>


باقي الاكواد واضحة ، لم يبقا لنا الا اضافة الدالة بالنمودج


رمز PHP:
<code style="white-space:nowrap"> <code> <FORM>
<INPUT TYPE=button VALUE=gauche onClick="bouge(-10,0)">
<INPUT TYPE=button VALUE=droite onClick="bouge(10,0)">
<INPUT TYPE=button VALUE=haut onClick="bouge(0,-10)">
<INPUT TYPE=button VALUE=bas onClick="bouge(0,10)">
</FORM>
</code> </code>


مثلا ادا تم الضغط على الزر الايمن فستنطلق الدالة المتحركة (0.10)
اي انها ستتحرك 10 بكسل افقيا و0 عموديا


نتيجة الدرس مفصل:
http://www.editeurjavascript.com/cours/dhtml_01_ex.php


رمز Code:
<HTML> <HEAD> <TITLE>DHTML exemple 01 : deplacement d'image</TITLE> <SCRIPT LANGUAGE=JavaScript> function bouge(x,y) { if(document.getElementById) { hautimage += y; gaucheimage += x; document.getElementById(&quot;smile&quot.style.top = hautimage; document.getElementById(&quot;smile&quot.style.left = gaucheimage; } } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=&quot;javascript&quot;> var hautimage = 100; var gaucheimage = 100; document.write('<IMG SRC=&quot;/img/img_exemples/droite.gif&quot; ID=smile STYLE=&quot;position:absolute;top:'+hautimage+';le ft:'+gaucheimage+'&quot;>'); </SCRIPT> <FORM> <INPUT TYPE=button VALUE=gauche onClick=&quot;bouge(-10,0)&quot;> <INPUT TYPE=button VALUE=droite onClick=&quot;bouge(10,0)&quot;> <INPUT TYPE=button VALUE=haut onClick=&quot;bouge(0,-10)&quot;> <INPUT TYPE=button VALUE=bas onClick=&quot;bouge(0,10)&quot;> </FORM><BR><BR> </BODY> </HTML>




التعديل الأخير كان بواسطة يونس المغربي; 28 - 05 - 2014 الساعة 23:33





©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©