التخطي إلى المحتوى
شرح دوره الـ JavaScript للمبتدئين – الدرس السابع عشر

ما هو image object ؟

يتفرع image object من document object , وهذا object يسمح لنا بالتغيير فى الخصائص الخاصه بالصور الموجوده فى الصفحه مثل تغيير شكل الصوره أو تغيير مكانها أو تغيير حجمها ….ألخ.

بعض الخصائص (properties) الخاصه بـ (image object)

وهناك أحداث معينه خاصه بالـ (image object) ومنها :-

  1. onLoad  ——> هذا الحدث يتم تنفيذ ما بداخله عند اكتمال تحميل الصوره بنجاح.
  2. onError ——-> هذا الحدذ يتم تنفيذ ما بداخله عند حدوث خطأ فى تحميل الصوره.

لإضافه صوره فى الصفحه يتم كتابه هذا الكود فى body

 

ونلاحظ أنه يمكن أن توجد أكثر من صوره فى الصفحه , فيتم التعامل مع الصور من خلال..

  1.  اسم الصوره الموجود فى الكود , مثل الكود السابق فإن اسم الصوره هو (p1) , والشكل العام لاستخدام (image object) هو:-

document.imageName.propertyName=”value”;

Example
document.p1.height=”100″;

     2.   أو من خلال ترتيب هذه الصوره فى الصفحه ويبدأ الترتيب من الصفر وليس من الواحد, فإذا كنا نتحدث على الصوره الثانيه فى الصفحه فإن كتابه الكود ستكون بالشكل التالى :-

document.images[1].height=”100″;

مــثـــال

فى هذا المثال تم استخدام الخاصيه (height) والخاصيه (width) لتغيير حجم الصوره.

لاستخدام الكود فى المثال السابق يتم ازاله وسوم التعليق من البدايه والنهايه وهى –!> , <–

 

وعند الضغط على (change size) سوف نلاحظ تغير حجم الصوره كما هو واضح فى الصوره التاليه.

وعند استخدامك هذا الكود الموجود بالمثال لابد من تغيير مسار الصوره التى تم وضعها بمسار لصوره موجوده فى جهازك مع العلم أن هناك حالتان فى كتابه المسار :-

  1. إذا كانت الصوره موضوعه مع الملف الذى به الكود فى (folder) واحد يتم كتابه اسم الصوره مع كتابه نوع الصوره كتالى:

cat1.gif

     2.  أما اذا كانت الصوره فى (folder) والملف المكتوب به الكود فى (folder) آخر , لابد من كتابه مسار الصوره كامل كالتالى :-

C:UsersPublicPicturesSample PicturesDesert.jpg

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares