شرح العنصر (object) في لغة HTML

الشرح الكامل والشامل لعنصر <object> في HTML

HTML

مقدمة عن عنصر <object>

عنصر <object> هو عنصر HTML قوي يُستخدم لتضمين أنواع مختلفة من الوسائط والموارد الخارجية في صفحات الويب. يمكن استخدامه لعرض الصور ومقاطع الفيديو وملفات PDF والتطبيقات الصغيرة (applets) والمحتوى التفاعلي الآخر.

الاستخدامات الأساسية لعنصر <object>

1 تضمين ملفات PDF

<object data="document.pdf" type="application/pdf" width="100%" height="500px">
  <p>المتصفح الخاص بك لا يدعم عرض ملفات PDF. 
  يمكنك <a href="document.pdf">تنزيل الملف</a> بدلاً من ذلك.</p>
</object>

2 تضمين مقاطع الفيديو

<object data="video.mp4" type="video/mp4" width="640" height="360">
  <embed src="video.mp4" type="video/mp4" width="640" height="360">
</object>

3 تضمين الصور

<object data="image.svg" type="image/svg+xml" width="300" height="200">
  <img src="image.png" alt="صورة بديلة">
</object>

السمات (Attributes) الرئيسية لعنصر <object>

• data — عنوان URL أو المسار النسبي للكائن.
• type - نوع MIME للكائن.
• name - اسم الكائن.
• usemap — عنوان URL لخريطة الصورة.
• width - عرض الكائن.
• height - ارتفاع الجسم.

1 data (مطلوبة)

• تحدد عنوان URL للمورد المراد تضمينه

<object data="example.swf" type="application/x-shockwave-flash"></object>

2 type

• تحدد نوع MIME للمورد

<object data="presentation.pptx" type="application/vnd.ms-powerpoint"></object>

3 width و height

• تحدد أبعاد العنصر بالبكسل

<object data="game.swf" width="800" height="600"></object>

4 form

• يربط العنصر بنموذج معين في الصفحة

<form id="myform"></form>
<object data="widget.html" form="myform"></object>

5name

• يحدد اسم العنصر لاستخدامه في البرامج النصية

<object data="calculator.swf" name="mycalc"></object>

6 usemap

تُستخدم لتحديد خريطة صور (image map) مرتبطة بالكائن. إليك التفاصيل:

وظيفة usemap:

• تربط العنصر <object> بـ خريطة صور (<map>) محددة في الصفحة.
• خرائط الصور تسمح بجعل أجزاء معينة من الكائن (مثل الصورة) قابلة للنقر وتوجه إلى روابط أو تفاعلات مختلفة.

صياغة السمة:

<object data="image.png" type="image/png" usemap="#map-name">

القيمة تبدأ بعلامة # متبوعة بـ اسم خريطة الصورة (مثل #myMap).

مثال عملي:

<object data="example.jpg" type="image/jpeg" usemap="#example-map"></object>

<map name="example-map">
  <area shape="rect" coords="0,0,50,50" href="link1.html" alt="Area 1">
  <area shape="circle" coords="100,100,30" href="link2.html" alt="Area 2">
</map>

ملاحظات مهمة:

1. اسم الخريطة (name) في <map> يجب أن يتطابق مع قيمة usemap (بدون #).
2. يمكن استخدام usemap مع عناصر أخرى مثل <img>.
3. الخريطة (<map>) يمكن وضعها في أي مكان في الصفحة، حتى لو كان <object> في مكان آخر.

ما الفرق بين usemap و ismap

• usemap → يربط كائنًا بخريطة صور موجودة في الصفحة.
• ismap → يُستخدم لخرائط الصور من جانب الخادم (قديم، نادر الاستخدام اليوم).

أمثلة متقدمة

1 تضمين خريطة تفاعلية

<object data="map.svg" type="image/svg+xml" width="500" height="400">
  <img src="map.png" alt="خريطة بديلة">
</object>

2 تضمين تطبيق صغير (Applet)

<object classid="java:MyApplet.class" width="300" height="200">
  <param name="code" value="MyApplet.class">
  <param name="archive" value="applet.jar">
  <p>يتطلب تشغيل هذا التطبيق دعم Java في المتصفح.</p>
</object>

3 تضمين محتوى Flash مع بدائل متعددة

<object data="animation.swf" type="application/x-shockwave-flash" width="550" height="400">
  <param name="movie" value="animation.swf">
  <param name="quality" value="high">
  <embed src="animation.swf" type="application/x-shockwave-flash" width="550" height="400" quality="high">
  <p>هذا المحتوى يتطلب مشغل Flash. يمكنك <a href="animation.mp4">مشاهدة الفيديو بدلاً من ذلك</a>.</p>
</object>

أفضل الممارسات لاستخدام <object>

• توفير محتوى بديل: دائماً ضع محتوى بديل داخل العنصر <object> للمتصفحات التي لا تدعمه.
• تحديد نوع MIME: استخدم سمة type لمساعدة المتصفح على التعامل مع المورد بشكل صحيح.
• استخدام <param>: استخدم عناصر <param> لتمرير معاملات إضافية للتطبيقات المضمنة.
• التوافق مع <embed>: أضف عنصر <embed> داخل <object> لتحسين التوافق مع المتصفحات القديمة.
• اختبار متعدد المتصفحات: تأكد من اختبار المحتوى المضمن في مختلف المتصفحات والأجهزة.

الفرق بين <object> و <embed>

الميزة	<object>	<embed>
التوحيد	جزء من مواصفات HTML5	غير موحد في HTML5
المرونة	يدعم أنواع متعددة من الوسائط	مصمم أساساً للوسائع المضمنة
الدعم	مدعوم جيداً في المتصفحات الحديثة	دعم أوسع في المتصفحات القديمة
المعاملات	يستخدم <param>	تستخدم السمات مباشرة

دعم المتصفحات

عنصر <object> مدعوم في جميع المتصفحات الحديثة:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

الخلاصة

عنصر <object> هو حل متعدد الاستخدامات لتضمين أنواع مختلفة من المحتوى في صفحات الويب. من أهم مزاياه:

• المرونة: يدعم أنواعاً متعددة من الوسائط والتطبيقات
• إمكانية الوصول: يسهل توفير محتوى بديل
• التكامل: يعمل جيداً مع التقنيات الأخرى مثل <param> و <embed>
• التوافق: مدعوم على نطاق واسع عبر المتصفحات

باستخدام <object> بشكل صحيح، يمكنك إثراء صفحات الويب بمحتوى تفاعلي وغني مع الحفاظ على تجربة مستخدم متسقة عبر مختلف المنصات.

كيف كان المقال؟