كيفية إدراج صورة في جافا سكريبت: دليل بسيط للمبتدئين

يعد إدراج صورة على صفحة الويب عنصرا مهما عند إنشاء مواقع ويب تفاعلية. جافا سكريبت يسمح لك بسهولة إدارة محتوى موقع الويب الخاص بك ، بما في ذلك تضمين وإدارة الصور. في هذا الدليل البسيط للمبتدئين ، سننظر في الطرق الرئيسية لإدراج الصور باستخدام جافا سكريبت.

بادئ ذي بدء ، لإدراج صورة باستخدام جافا سكريبت ، سوف تحتاج إلى علامة إمغ. تستخدم هذه العلامة لعرض الصور على موقع الويب وتحتوي على عدد من السمات التي تسمح لك بتخصيص عرض الصورة.

أولا وقبل كل شيء ، تحتاج إلى تحديد المسار إلى الصورة التي تريد إدراجها. للقيام بذلك ، يمكنك استخدام

السمة سرك

. على سبيل المثال ، إذا كانت صورتك في مجلد "الصور" وتسمى "صورة".جبغ " ، فإن المسار تبدو مثل هذا:

سرك= " صور / صورة.جي بي جي "

1. المبادئ الأساسية لإدراج الصور في جافا سكريبت
2. إعداد واختيار صورة للإدراج
3. إنشاء عنصر إمغ وتحديد السمات
4. تحديد حجم وموضع الصورة
5. إدراج صورة في شجرة دوم
6. أمثلة على استخدام إدراج الصورة في جافا سكريبت
7. تحميل الصور الديناميكية وتغييرها
8. 1. باستخدام العلامة
9. 2. باستخدام كس الخلفية صورة
10. 3. باستخدام التلاعب دوم
11. التحسين وميزات إدراج الصور في جافا سكريبت
12. سؤال وجواب

المبادئ الأساسية لإدراج الصور في جافا سكريبت

يتطلب إدراج صورة في جافا سكريبت بضع خطوات بسيطة:

1. حدد المكان الذي تريد إدراج الصورة فيه.
2. إنشاء عنصر إمغ التي سوف تمثل الصورة.
3. تعيين سمات سرك (وصلة إلى الصورة) ، واختياريا ، ألت (نص بديل عرض إذا كانت الصورة غير متوفرة).
4. أضف عنصر إمغ الذي تم إنشاؤه إلى الموقع المحدد مسبقا.

مثال رمز يوضح هذه العملية:

نتيجة لتنفيذ هذا الرمز ، سيتم إدراج الصورة داخل عنصر إيماجيكونتينر.

لا تنس استبدال "المسار" إلى الصورة.جبغ "إلى المسار الفعلي للصورة و" نص بديل " إلى النص البديل المطلوب.

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

إعداد واختيار صورة للإدراج

1. قبل إدراج صورة على صفحة ويب ، تحتاج إلى إعداد الصورة المناسبة وتحديدها. وهنا بعض الخطوات التي سوف تساعدك مع هذا:
2. تحديد أبعاد الصورة: أولا وقبل كل شيء ، تحديد أبعاد الصورة المطلوبة. حدد العرض والارتفاع لتناسب الصورة في الإطارات المحددة على الصفحة.
3. حدد تنسيق الصورة: حدد التنسيق المناسب لصورتك. تنسيقات الصور على شبكة الإنترنت الأكثر شعبية هي الحياة السياسية في فرنسا ، ينغ و جيف. جبيغ هو جيد للصور ، بابوا نيو غينيا يوفر دعم الشفافية أفضل ، وصور جيف مثالية للرسوم المتحركة.
4. معالجة الصورة: إذا كانت صورتك تتطلب معالجة إضافية ، مثل الاقتصاص أو تغيير الحجم أو تصحيح الألوان ، فاستخدم أدوات تحرير الرسوم المناسبة.
5. حفظ الصورة: بعد المعالجة ، احفظ الصورة بالتنسيق المحدد باسم الملف والملحق المناسبين.

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

بعد الانتهاء من هذه الخطوات ، ستكون جاهزا لإدراج الصورة في صفحة الويب الخاصة بك باستخدام جافا سكريبت.

إنشاء عنصر إمغ وتحديد السمات

لإدراج صورة على صفحة ويب باستخدام جافا سكريبت ، ونحن إنشاء عنصر إمغ وتعيين السمات اللازمة.

1. هنا هو نموذج التعليمات البرمجية التي تبين كيفية إنشاء عنصر إمغ وتعيين سماته:

إنشاء عنصر إمغ جديد باستخدام المستند.كريتيليمنت () منشئ:
شفرة جافا سكريبت

2. كونست صورة = وثيقة.كريتيليمنت ('إمغ');

تعيين سمات الصورة:
شفرة جافا سكريبت
صورة.سرك = 'صورة المسار.جي بي جي;
صورة.البديل = 'نص بديل';

3. صورة.العنوان = 'شرح الصورة';

إضافة صورة إلى صفحة ويب باستخدام طريقة أدفينتشيلد() :
شفرة جافا سكريبت

وثيقة.الجسم.ملحق الطفل (صورة);

يقوم هذا الرمز بإنشاء عنصر إمغ جديد ويضيفه إلى نهاية محتوى عنصر نص المستند.

يمكنك تعيين سمات أخرى للصورة ، مثل العرض والارتفاع ، حسب احتياجاتك.

تحديد حجم وموضع الصورة

بعد إدراج صورة في صفحة الويب الخاصة بك باستخدام جافا سكريبت ، يمكنك تعيين حجم وموضع هذه الصورة. يمكن أن يكون هذا مفيدا لجعل الصورة أكثر جاذبية بصريا أو لتغيير موضع الصورة على الصفحة.

لتعيين حجم الصورة ، يمكنك استخدام سمات العرض والارتفاع. على سبيل المثال ، لتعيين عرض الصورة إلى 200 بكسل والارتفاع إلى 150 بكسل ، يمكنك استخدام التعليمات البرمجية التالية:

صورة.العرض = 200;

صورة.الارتفاع = 150;

يمكنك أيضا استخدام وحدات القياس مثل النسب المئوية أو م لتعيين الحجم النسبي للصورة. على سبيل المثال ، لتعيين عرض صورة إلى 50 ٪ من العنصر الأصل ، يمكنك استخدام التعليمات البرمجية التالية:

صورة.أسلوب.العرض = " 50٪";

لتعيين موضع الصورة ، يمكنك استخدام السمات أعلى ، يسار ، يمين وأسفل. على سبيل المثال ، لتعيين صورة إلى الزاوية العلوية اليمنى من الصفحة ، يمكنك استخدام التعليمات البرمجية التالية:

صورة.أسلوب.الموقف = "مطلق";

صورة.أسلوب.أعلى = "0";

صورة.أسلوب.اليمين = "0";

يمكنك أيضا استخدام القيم السالبة لتعيين موضع الصورة داخل العنصر الأصل. على سبيل المثال ، لتحويل الصورة إلى اليسار بمقدار 50 بكسل ، يمكنك استخدام الكود التالي:

صورة.أسلوب.اليسار = "-50 بكسل";

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

إدراج صورة في شجرة دوم

1. لإدراج صورة في شجرة دوم في جافا سكريبت ، نحتاج إلى عنصر نريد وضع الصورة فيه. يمكن إنشاء عنصر من هذا النوع باستخدام الطرق التالية:
2. وثيقة.كريتيليمنت — تاغنام) - يخلق عنصر جديد مع العلامة المحددة;

وثيقة.كريتيكستنود — نص) - ينشئ عقدة نصية جديدة بالنص المحدد.

1. بعد إنشاء عنصر النص والعقدة ، تحتاج إلى تعيين سمات للصورة ، سمات نموذجية:
2. سرك هو المسار إلى ملف الصورة;
3. بديل-نص بديل يتم عرضه في حالة عدم توفر الصورة;
4. العرض-عرض الصورة;

الارتفاع-ارتفاع الصورة.

1. لإضافة عناصر إلى شجرة دوم ، استخدم الطريقة:

عقدة.اذيلشيلد — تشايلدنود) - يضيف عقدة الطفل إلى نهاية قائمة العقد التابعة للعقدة الأم.

سيقوم المثال المعطى بإنشاء عنصر سيتم تعيين سماته على القيم المحددة في شفرة جافا سكريبت. ثم ، سيتم إضافة هذا العنصر داخل العنصر مع معرف "حاوية".

1. السماح تارجيتيليمنت = وثيقة.جيتليمنتبيد ("الهدف");

في هذا المثال ، نستخدم الوظيفة

جلب

لتحميل صورة باستخدام المسار المحدد. ثم نقوم بتحويل الاستجابة إلى نقطة (كائن بيانات ثنائي) باستخدام الطريقة

النقطة

. بعد ذلك ، نقوم بإنشاء عنصر جديد ، وتعيين مصدره باستخدام الطريقة

كريتيوبجيكتورل

وأدخله في العنصر الهدف.

باستخدام ترميز قاعدة 64

هناك طريقة أخرى لإدراج صورة في جافا سكريبت وهي استخدام ترميز القاعدة 64 للصورة كسلسلة من البيانات. أدناه مثال:

السماح إمجليمنت = وثيقة.كريتيليمنت ("إمغ");

إمجليمنت.سرك = " البيانات: صورة/الحياة السياسية في فرنسا ؛ قاعدة 64 ، /9 ي / 4اقسكزجرجاباقية..."؛//القاعدة 64-سلسلة مشفرة

السماح تارجيتيليمنت = وثيقة.جيتليمنتبيد ("الهدف");

الهدف.ملحق الطفل (إمجليمنت);

1. في هذا المثال ، نقوم بإنشاء عنصر جديد وتعيين مصدره كسلسلة بيانات مشفرة 64. ثم ندخله في العنصر الهدف.

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

2. تحميل الصور الديناميكية وتغييرها

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

3. 1. باستخدام العلامة

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

4. // جافا سكريبت

وثيقة.جيتليمنتبيد ("ميماج").سرك = " نيويماج.جي بي جي";

2. باستخدام كس الخلفية صورة

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