img src : اضافة صورة بواسطة جافاسكريبت

من أهم مزايا JavaScript هي img src وكما تعلم أن علامات HTML كثيرة ومتنوعة في مواقع الويب وهناك مواقع معقدة تحتوي على آلاف العلامات. ولأن JavaScript تتميز بالوصول إلى تلك العالامات مثل لغات البرمجة الأخرى ولكن بشكل خاص و نمط مختلف سوف نقدم لك برنامج تعليمي كامل حول كيفية إنشاء JavaScript img src.

إذا نظرنا إلى مواقع بدون صور سنجدها مملة إلى حد ما وقد تحتوي على الكثير من الكلمات التي يصعب تحليلها أثناء القراءة,  لذلك سنقوم بتوضيح أهمية وجود صور على المواقع وهي:

  • إعطاء جمالية عالية للصفحة.
  • معرفة المواضيع وتمييزها بسهولة لوجود الصور والوصف.
  • تسهيل فهم الشرح داخل الفقرات.

 

خاصية img src

img src عبارة عن صورة يتم تقديمها بواسطة JavaScript. وهي وسيلة يتم من خلالها إظهار الصور في الموقع. ولكن خاصية صورة JS عبارة عن مصفوفة توفر التحكم بخصائص إضافية بالتعاون مع كل من HTML و CSS.

على سبيل المثال ، توضح الوظيفة images.length عدد الصور في صفحة HTML التي تظهر للعيان. وبما أننا نشرح خاصية Image ، فهناك عدد من الوظائف التي تساعدنا في هذه المهمة. مثل طبيعة الصور على الصفحة ومدى دعم المتصفحات لهذه الصور.

 

آلية الوصول للصور

كما ذكرنا، فإن خاصية image تساعدنا في التحكم في صور المتصفح جيدًا وتوفر سرعة جيدة في التنقل بين الصفحات وذلك ضمن إطار عمل لغة JavaScript. وقبل أن نبدأ في استدعاء JavaScript img src ، سنقدم لك أولاً مثالاً على كيفية الوصول إلى هذا النوع من الكود ويتم ذلك من خلال:

<script>
if (document.images != null) { document.write(document.images.length); }
</script>

تكشف لك الشيفرة عن التحقق من وجود صور في المتصفح. فقد تحققت مما إذا كان توجد صورة أم لا في المصفوفة وأوعز للمتصفح بطباعة طول وحجم هذه المصفوفة. وعندما قمنا بتنفيذ النتيجة وجدنا أنه لا توجد صور وهذا أمر طبيعي لأننا لم نزود المتصفح بأي شيء من قبل img src.

 

إضافة img src عن طريق جافاسكريبت

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

<script>
var _image = new Image(150 , 100);
</script>

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

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

<script>
if (document.images != null) {
 var _image = new Image(); 
     _image.src="your_img.gif"; //fill your url inside image source
     }
 </script>

 

المراجع
  1. ^ كتاب الإصدار الثالث من جافاسكريبت.
  2. ^ دورة تعلم لغة HTML للمبتدئين.
  3. ^ أساسيات جافاسكريبت.

 

 

 

 

هل أعجبك المقال؟

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.

 - 
Arabic
 - 
ar
Bengali
 - 
bn
German
 - 
de
English
 - 
en
French
 - 
fr
Hindi
 - 
hi
Indonesian
 - 
id
Portuguese
 - 
pt
Russian
 - 
ru
Spanish
 - 
es