الفرق بين المراجعتين لصفحة: «HTML/img»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
طلا ملخص تعديل
 
(6 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:العنصر <code><img></code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:العنصر <code><img></code>}}</noinclude>
يُمثِّل العنصر <code><img></code> صورةً في المستند.
يُمثِّل العنصر <code><img></code> صورةً في المستند.
مثال عن استخدام العنصر <code><img></code> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية <code>[[#alt|alt]]</code>):<syntaxhighlight lang="html">
<img src="logo-sm.png" alt="Logo">
</syntaxhighlight>مثال عن استخدام العنصر <code><img></code> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية <code>alt</code>) داخل العنصر <code>[[HTML/a|<a>]]</code> مما يسمح بالنقر على الصورة للانتقال:<syntaxhighlight lang="html">
<a href="/">Logo<img src="logo-sm.png" alt="Logo"></a>


مثال عن استخدام العنصر <code><img></code> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية <code>[[HTML/img#alt|alt]]</code>):<syntaxhighlight lang="html">
<img src="wiki-logo.png" alt="Wiki Hsoub Logo">
</syntaxhighlight>مثال عن استخدام العنصر <code><img></code> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية <code>alt</code>) داخل العنصر  مما يسمح بالنقر على الصورة للانتقال:<syntaxhighlight lang="html">
<a href="wiki.hsoub.com"><img src="wiki-logo.png" alt="Wiki Hsoub Logo"></a>
</syntaxhighlight>
</syntaxhighlight>
{{Course|course=frontend}}
__TOC__
== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
! scope="row" style="width: 20%;" | تصنيفات المحتوى
! scope="row" style="width: 20%;" |تصنيفات المحتوى
| عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
|عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
|-
|-
! scope="row" | المحتوى المسموح
! scope="row" |المحتوى المسموح
| لا يوجد، فهذا العنصر فارغ.
|لا يوجد، فهذا العنصر فارغ.
|-
|-
! scope="row" | الوسم المختصر
! scope="row" |الوسم المختصر
| لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية.
|لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية.
|-
|-
! scope="row" | العناصر الأب
! scope="row" |العناصر الأب
| أي عنصر يقبل العناصر التضمينية.
|أي عنصر يقبل العناصر التضمينية.
|-
|-
! scope="row" | واجهة DOM
! scope="row" |واجهة DOM
| <code>HTMLImageElement</code>
|<code>HTMLImageElement</code>
|}
|}
== دعم المتصفحات ==
==دعم المتصفحات==
{| class="wikitable" style="width: 50%;"
{| class="wikitable" style="width: 50%;"
!| Chrome
!|Chrome
! Firefox
!Firefox
! Edge
!Edge
! Safari
!Safari
! Opera
!Opera
|-
|-
|مدعوم
|مدعوم
سطر 38: سطر 40:
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
|}بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.
بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.


أضيفت الخاصية <code>srcset</code> في إصدار Chrome 35 و Firefox 32 و Opera 21 و Safari 7.1 وهي مدعومة في Edge.
أضيفت الخاصية <code>srcset</code> في إصدار Chrome 35 و Firefox 32 و Opera 21 و Safari 7.1 وهي مدعومة في Edge.
 
==الخاصيات==
== الخاصيات ==
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.
 
===<code>align</code>===
=== <code>align</code> ===
تحديد محاذاة الصورة بالنسبة للمحتوى المجاور، هذه الخاصية مهملة في HTML 4 وحُذِفَت في HTML5، ويجب استخدام الخاصية <code>[[CSS/float|float]]</code> و/أو <code>[[CSS/vertical-align|vertical-align]]</code> في [[CSS]] بدلًا منها، وذكرناها بغرض العلم بها.
تحديد محاذاة الصورة بالنسبة للمحتوى المجاور، هذه الخاصية مهملة في HTML 4 وحُذِفَت في HTML5، ويجب استخدام الخاصية <code>float</code> و/أو <code>vertical-align</code> في CSS بدلًا منها، وذكرناها بغرض العلم بها.
===<code>alt</code>===
 
=== <code>alt</code> ===
تُعرِّف هذه الخاصية نصًا بديلًا يصف الصورة، وسيشاهد المستخدمون هذا النص إن كان رابط URL للصورة غير موجود، أو لم يكن المتصفح يدعم صيغة الصورة، أو لم يكتمل تنزيل الصورة بعد.
تُعرِّف هذه الخاصية نصًا بديلًا يصف الصورة، وسيشاهد المستخدمون هذا النص إن كان رابط URL للصورة غير موجود، أو لم يكن المتصفح يدعم صيغة الصورة، أو لم يكتمل تنزيل الصورة بعد.


سطر 56: سطر 54:
إذا لم تضع هذه الخاصية بالمطلق فهذا يُشير إلى أنَّ الصورة هي جزءٌ مهمٌ من المحتوى ولا يمكن تعويضها بمحتوى نصي، أما ضبط هذه الخاصية إلى قيمةٍ فارغة (أي <code>alt=""‎</code>) فذلك يشير إلى أنَّ الصورة ليست جزءًا مهمًا من المحتوى، ويمكن للمتصفحات غير الرسومية أن تتجاهلها.
إذا لم تضع هذه الخاصية بالمطلق فهذا يُشير إلى أنَّ الصورة هي جزءٌ مهمٌ من المحتوى ولا يمكن تعويضها بمحتوى نصي، أما ضبط هذه الخاصية إلى قيمةٍ فارغة (أي <code>alt=""‎</code>) فذلك يشير إلى أنَّ الصورة ليست جزءًا مهمًا من المحتوى، ويمكن للمتصفحات غير الرسومية أن تتجاهلها.


==== أمثلة ====
مثال عن استخدام العنصر <code><img></code> لعرض صورة مهمة، وذلك بحذف الخاصية <code>alt</code> كليًا:<syntaxhighlight lang="html">
مثال عن استخدام العنصر <code><img></code> لعرض صورة مهمة، وذلك بحذف الخاصية <code>alt</code> كليًا:<syntaxhighlight lang="html">
<img src="im-img.png">
<img src="im-img.png">


</syntaxhighlight>
</syntaxhighlight>مثال عن استخدام العنصر <code><img></code> لعرض صورة غير مهمة، وذلك بإسناد سلسلة نصية فارغة إلى الخاصية <code>alt</code>:<syntaxhighlight lang="html">
مثال عن استخدام العنصر <code><img></code> لعرض صورة غير مهمة، وذلك بإسناد سلسلة نصية فارغة إلى الخاصية <code>alt</code>:<syntaxhighlight lang="html">
<img src="decoration.png" alt="">
<img src="decoration.png" alt="">


</syntaxhighlight>
</syntaxhighlight>
=== <code>border</code> ===
===<code>border</code>===
تحديد ثخن إطار الصورة، لكن هذه الخاصية أمست مهملة في HTML 4 وحُذِفَت في HTML5، لذا استخدام الخاصية <code>border</code> في CSS بدلًا عنها.
تحديد ثخن إطار الصورة، لكن هذه الخاصية أمست مهملة في HTML 4 وحُذِفَت في HTML5، لذا استخدام الخاصية <code>border</code> في CSS بدلًا عنها.
 
===<code>height</code>===
=== <code>height</code> ===
تحديد الارتفاع الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.
تحديد الارتفاع الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.
==== مثال ====
استخدام الخاصية <code>height</code> لضبط ارتفاع الصورة:<syntaxhighlight lang="html">
استخدام الخاصية <code>height</code> لضبط ارتفاع الصورة:<syntaxhighlight lang="html">
<img src="logo-sm.png" alt="Logo" height="64">
<img src="wiki-logo.png" alt="Wiki Hsoub Logo" height="70">
</syntaxhighlight>
</syntaxhighlight>


=== <code>width</code> ===
===<code>width</code>===
تحديد العرض الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.
تحديد العرض الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.


==== مثال ====
استخدام الخاصية <code>width</code> لضبط عرض الصورة:<syntaxhighlight lang="html">
استخدام الخاصية <code>width</code> لضبط عرض الصورة:<syntaxhighlight lang="html">
<img src="logo-sm.png" alt="Logo" width="192">
<img src="wiki-logo.png" alt="Wiki Hsoub Logo" width="70">
</syntaxhighlight>
</syntaxhighlight>
 
===<code>hspace</code>===
=== <code>hspace</code> ===
تحديد عدد البكسلات من الفراغ الأبيض لتُضاف على يمين ويسار الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية <code>[[CSS/margin|margin]]</code> في CSS بدلًا منها.
تحديد عدد البكسلات من الفراغ الأبيض لتُضاف على يمين ويسار الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية <code>margin</code> في CSS بدلًا منها.
===<code>vspace</code>===
 
تحديد عدد البكسلات من الفراغ الأبيض لتُضاف أعلى وأسفل الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية <code>[[CSS/margin|margin]]</code> في CSS بدلًا منها.
=== <code>vspace</code> ===
===<code>ismap</code>===
تحديد عدد البكسلات من الفراغ الأبيض لتُضاف أعلى وأسفل الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية <code>margin</code> في CSS بدلًا منها.
 
=== <code>ismap</code> ===
خاصية منطقية (Boolean) تُشير إذا كانت الصورة جزءًا من خريطة من طرف الخادوم (server-side map)، فلو كانت كذلك، فستُرسَل الإحداثيات الدقيقة لكل نقرة إلى الخادوم.
خاصية منطقية (Boolean) تُشير إذا كانت الصورة جزءًا من خريطة من طرف الخادوم (server-side map)، فلو كانت كذلك، فستُرسَل الإحداثيات الدقيقة لكل نقرة إلى الخادوم.


يُسمَح باستخدام هذه الخاصية إن كان العنصر <code><img></code> موجودًا داخل العنصر <code>[[HTML/a|<a>]]</code> له خاصية <code>href</code> صالحة.
يُسمَح باستخدام هذه الخاصية إن كان العنصر <code><img></code> موجودًا داخل العنصر له خاصية <code>href</code> صالحة.
 
===<code>longdesc</code>===
=== <code>longdesc</code> ===
رابط إلى وصف تفصيلي عن الصورة، القيم المسموحة لهذه الخاصية هي روابط URL أو مُعرِّف <code>id</code> لأحد العناصر الأخرى.
رابط إلى وصف تفصيلي عن الصورة، القيم المسموحة لهذه الخاصية هي روابط URL أو مُعرِّف <code>id</code> لأحد العناصر الأخرى.


==== مثال ====
وضع رابط لصفحة [https://academy.hsoub.com/learn/php-web-application-development/ دورة تطوير تطبيقات الويب باستخدام لغة PHP في أكاديمية حسوب] لشرح الصورة شرحًا وافيًا، وذلك عبر الخاصية <code>longdesc</code>:<syntaxhighlight lang="html">
وضع رابط لمقال في ويكيبيديا لشرح الصورة شرحًا وافيًا، وذلك عبر الخاصية <code>longdesc</code>:<syntaxhighlight lang="html">
<img src="hsoub-academy-php-web-application-development-course.png"  
<img src="terminal.png" alt="Computer Terminal" longdesc="https://en.wikipedia.org/wiki/Computer_terminal">
    alt="دورة تطوير تطبيقات الويب باستخدام لغة PHP"  
    longdesc="https://academy.hsoub.com/learn/php-web-application-development/">
</syntaxhighlight>
</syntaxhighlight>
 
===<code>name</code>===
=== <code>name</code> ===
تحديد اسم للعنصر، لكن هذه الخاصية مهملة في HTML 4 (وأضيفت إليها لغرض التوافقية مع الإصدارات السابقة) ومحذوفة في HTML5؛ ويجب استخدام الخاصية <code>id</code> بدلًا منها.
تحديد اسم للعنصر، لكن هذه الخاصية مهملة في HTML 4 (وأضيفت إليها لغرض التوافقية مع الإصدارات السابقة) ومحذوفة في HTML5؛ ويجب استخدام الخاصية <code>id</code> بدلًا منها.
 
===<code>sizes</code>===
=== <code>sizes</code> ===
أُضيفت هذه الخاصية في HTML5، وهي تقبل سلسلة نصية فيها قيمة أو أكثر (مفصولة بفاصلة) لمصادر القياسات المختلفة للصور. يجب أن يحتوي كل مصدر على:
أُضيفت هذه الخاصية في HTML5، وهي تقبل سلسلة نصية فيها قيمة أو أكثر (مفصولة بفاصلة) لمصادر القياسات المختلفة للصور. يجب أن يحتوي كل مصدر على:
# عبارة media query، والتي يجب حذفها في آخر عنصر في القائمة.
#عبارة media query، والتي يجب حذفها في آخر عنصر في القائمة.
# قيمة لقياس الصورة
#قيمة لقياس الصورة
قيمة قياس الصورة تُحدِّد ما هو حجم الصورة المراد عرضه، وتستخدم المتصفحات عبارة media query لتحديد أحد مصادر الصورة المُعرَّفة في خاصية <code>srcset</code>، وذلك عندما تقترن تلك المصادر مع مُحدِّدات العرض (<code>w</code>).
قيمة قياس الصورة تُحدِّد ما هو حجم الصورة المراد عرضه، وتستخدم المتصفحات عبارة media query لتحديد أحد مصادر الصورة المُعرَّفة في خاصية <code>srcset</code>، وذلك عندما تقترن تلك المصادر مع مُحدِّدات العرض (<code>w</code>).


سطر 115: سطر 102:


إذا كانت الخاصية <code>srcset</code> غير موجودة، أو كانت لا تحتوي على أيّة قيمة فيها مُحدِّد العرض <code>w</code>، فلن يكون للخاصية <code>sizes</code> أي أثر.
إذا كانت الخاصية <code>srcset</code> غير موجودة، أو كانت لا تحتوي على أيّة قيمة فيها مُحدِّد العرض <code>w</code>، فلن يكون للخاصية <code>sizes</code> أي أثر.
 
===<code>src</code>===
=== <code>src</code> ===
رابط URL للصورة، وهذه الخاصية إجبارية لجميع عناصر <code><img></code>.
رابط URL للصورة، وهذه الخاصية إجبارية لجميع عناصر <code><img></code>.


إذا كان المتصفح يدعم الخاصية <code>srcset</code>، فستُعامَل قيمة الخاصية <code>src</code> على أنها صورة مرشحّة لها معامل الكثافة <code>1x</code> ما لم تُعرَّف صورة لها نفس معامل الكثافة في خاصية <code>srcset</code>، أو إذا لم تحتوي الخاصية <code>srcset</code> على المُحدِّد <code>w</code>.
إذا كان المتصفح يدعم الخاصية <code>srcset</code>، فستُعامَل قيمة الخاصية <code>src</code> على أنها صورة مرشحّة لها معامل الكثافة <code>1x</code> ما لم تُعرَّف صورة لها نفس معامل الكثافة في خاصية <code>srcset</code>، أو إذا لم تحتوي الخاصية <code>srcset</code> على المُحدِّد <code>w</code>.
 
===<code>srcset</code>===
=== <code>srcset</code> ===
قائمة أو أكثر من السلاسل النصية المفصولة بفاصلة <code>,</code> التي تُشير إلى مجموعة من مصادر الصورة المحتملة لكي يستخدم إحداها المتصفح.
قائمة أو أكثر من السلاسل النصية المفصولة بفاصلة <code>,</code> التي تُشير إلى مجموعة من مصادر الصورة المحتملة لكي يستخدم إحداها المتصفح.


تتألف كل سلسلة نصية من محتويات هذه الخاصية من:
تتألف كل سلسلة نصية من محتويات هذه الخاصية من:
# رابط URL لملف الصورة
#رابط URL لملف الصورة
# (اختياريًا) فراغ يتبعه أحد المُحدِّدات الآتية:
#(اختياريًا) فراغ يتبعه أحد المُحدِّدات الآتية:
#* مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف <code>w</code>، وستُقسَّم قيمة مُحدِّد العرض على الحجم المصدري المُعطى في خاصية <code>sizes</code> لحساب كثافة البكسلات الفعلية.
#*مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف <code>w</code>، وستُقسَّم قيمة مُحدِّد العرض على الحجم المصدري المُعطى في خاصية <code>sizes</code> لحساب كثافة البكسلات الفعلية.
#* مُحدِّد كثافة البكسلات التي هو عددٌ عشري موجب يتبعه الحرف <code>x</code> مباشرةً.
#*مُحدِّد كثافة البكسلات التي هو عددٌ عشري موجب يتبعه الحرف <code>x</code> مباشرةً.
إذا لم تعطى قيمة لأحد المُحدِّدَين السابقين فسيُسنَد للمصدر المُحدِّد الافتراضي <code>1x</code>.
إذا لم تعطى قيمة لأحد المُحدِّدَين السابقين فسيُسنَد للمصدر المُحدِّد الافتراضي <code>1x</code>.


سطر 135: سطر 120:
سيختار المتصفح أحد المصادر المذكورة في هذه الخاصية حسب تقديره، مما يعطي المتصفحات مجالًا لاختيار أفضل قياس للصورة اعتمادًا على تفضيلات المستخدم أو لتقييد استخدام التراسل الشبكي.
سيختار المتصفح أحد المصادر المذكورة في هذه الخاصية حسب تقديره، مما يعطي المتصفحات مجالًا لاختيار أفضل قياس للصورة اعتمادًا على تفضيلات المستخدم أو لتقييد استخدام التراسل الشبكي.


==== مثال ====
مثال عن استخدام الخاصية <code>srcset</code> لتحديد صورة بديلة للمتصفحات التي تعمل على أجهزة كثافتها <code>2x</code>، لاحظ أنَّ قيمة الخاصية <code>[[HTML/img#src|src]]</code> ستُفسَّر على أنها مصدر الصورة ذات الكثافة <code>1x</code>:<syntaxhighlight lang="html">
مثال عن استخدام الخاصية <code>srcset</code> لتحديد صورة بديلة للمتصفحات التي تعمل على أجهزة كثافتها <code>2x</code>، لاحظ أنَّ قيمة الخاصية <code>[[#src|src]]</code> ستُفسَّر على أنها مصدر الصورة ذات الكثافة <code>1x</code>:<syntaxhighlight lang="html">
<img src="wiki-logo.png"  
<img src="logo-sm.png"  
  alt="Wiki Hsoub Logo"  
      alt="Logo"  
  srcset="wiki-logo-HD.png 2x">
      srcset="logo-HD.png 2x">
</syntaxhighlight>مثال عن استخدام الخاصية <code>srcset</code> مع الخاصية <code>[[HTML/img#sizes|sizes]]</code>، وعندما ينطبق شرط media query الذي هو <code>min-width: 600px</code> فسيكون عرض الصورة <code>400px</code>، عدا ذلك ستكون بعرض <code>50vw</code> (أي 50% من عرض إطار العرض):<syntaxhighlight lang="html">
<img src="cover-small.png"
  alt="Cover Photo"
  srcset="cover-large.png 1640w,
      cover-small.png 965w"
  sizes="(min-width: 600px) 400px, 50vm">
</syntaxhighlight>
</syntaxhighlight>
مثال عن استخدام الخاصية <code>srcset</code> مع الخاصية <code>[[#sizes|sizes]]</code>، وعندما ينطبق شرط media query الذي هو <code>min-width: 600px</code> فسيكون عرض الصورة <code>200px</code>، عدا ذلك ستكون بعرض <code>50vw</code> (أي 50% من عرض إطار العرض):<syntaxhighlight lang="html">
===<code>usemap</code>===
<img src="clock-demo-thumb-200.png"
      alt="Clock"
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">
</syntaxhighlight>
 
=== <code>usemap</code> ===
تأخذ هذه الخاصية عنوان URL جزئي (يبدأ برمز <code>#</code>) لخريطة <code>[[HTML/map|<map>]]</code> مرتبطة بهذا العنصر.
تأخذ هذه الخاصية عنوان URL جزئي (يبدأ برمز <code>#</code>) لخريطة <code>[[HTML/map|<map>]]</code> مرتبطة بهذا العنصر.


يجدر بالذكر أنَّك لا تستطيع استخدام هذه الخاصية إن كان العنصر <code><img></code> موجودًا ضمن عنصر <code>[[HTML/a|<a>]]</code> أو [[HTML/button|<button>]].
يجدر بالذكر أنَّك لا تستطيع استخدام هذه الخاصية إن كان العنصر <code><img></code> موجودًا ضمن عنصر أو [[HTML/button|<button>]].


==== مثال ====
راجع صفحة العنصر <code>[[HTML/map|<map>]]</code> لمثال عن استخدام العنصر <code><img></code> مع هذه الخاصية.
راجع صفحة العنصر <code>[[HTML/map|<map>]]</code> لمثال عن استخدام العنصر <code><img></code> مع هذه الخاصية.
 
==ملاحظات الاستخدام==
== ملاحظات الاستخدام ==
===صيغ الصورة المدعومة===
 
=== صيغ الصورة المدعومة ===
لا يعطي معيار HTML قائمةً بصيغ الصورة التي يجب دعمها، لذا يدعم كل متصفح قائمةً مختلفةً من الصيغ، فمثلًا متصفح Firefox يدعم:
لا يعطي معيار HTML قائمةً بصيغ الصورة التي يجب دعمها، لذا يدعم كل متصفح قائمةً مختلفةً من الصيغ، فمثلًا متصفح Firefox يدعم:
* [[wikipedia:JPEG|JPEG]]
*[[wikipedia:JPEG|JPEG]]
* [[wikipedia:Graphics_Interchange_Format|GIF]] بما في ذلك صور GIF المتحركة
*[[wikipedia:Graphics_Interchange_Format|GIF]] بما في ذلك صور GIF المتحركة
* [[wikipedia:Portable_Network_Graphics|PNG]]
*[[wikipedia:Portable_Network_Graphics|PNG]]
* [[wikipedia:APNG|APNG]]
*[[wikipedia:APNG|APNG]]
* [[wikipedia:Scalable_Vector_Graphics|SVG]]
*[[wikipedia:Scalable_Vector_Graphics|SVG]]
* [[wikipedia:BMP_file_format|BMP]]
*[[wikipedia:BMP_file_format|BMP]]
* [[wikipedia:ICO_(file_format)|BMP ICO]]
*[[wikipedia:ICO_(file_format)|BMP ICO]]
* [[wikipedia:ICO_(file_format)|PNG ICO]]
*[[wikipedia:ICO_(file_format)|PNG ICO]]
وبعض المتصفحات مثل Chrome و Opera تدعم صيغة [[wikipedia:WebP|WebP]] الجديدة.
وبعض المتصفحات مثل Chrome و Opera تدعم صيغة [[wikipedia:WebP|WebP]] الجديدة.
 
===التفاعل مع CSS===
=== التفاعل مع CSS ===
إنَّ العنصر <code><img></code> هو عنصر سيستبدل بمورد خارجي، وليس له خط أساس (baseline)، لذا عندما تستخدم الصور في المحتوى السطري (inline) مع خاصية <code>[[CSS/vertical-align|vertical-align]]: baseline</code> في CSS فسيوضع أسفل الصورة على خط الأساس للعنصر الحاوي لها.
إنَّ العنصر <img> هو عنصر سيستبدل بمورد خارجي، وليس له خط أساس (baseline)، لذا عندما تستخدم الصور في المحتوى السطري (inline) مع خاصية <code>vertical-align: baseline</code> في CSS فسيوضع أسفل الصورة على خط الأساس للعنصر الحاوي لها.


قد يكون للصورة أبعاد صافية اعتمادًا على نوعها، لكن لبعض أنواع الصورة لا يكون لها أبعاد صافية، مثل صور SVG.
قد يكون للصورة أبعاد صافية اعتمادًا على نوعها، لكن لبعض أنواع الصورة لا يكون لها أبعاد صافية، مثل صور SVG.
===الأخطاء===
عندما يحدث خطأ عند محاولة تحميل أو عرض الصورة، فستستدعى الدالة التي تُعالِج الحدث <code>error</code>، وهذا قد يحدث في عدِّة حالات مثل:
*الخاصية <code>src</code> غير موجودة أو قيمتها فارغة.
*قيمة رابط URL للصورة هي نفس قيمة رابط URL للصفحة الحالية.
*الصورة المُحدَّدة معطوبة بطريقةٍ ما تمنع عرضها.
*البيانات الوصفية للصورة معطوبة بشكلٍ يمنع الحصول على أبعادها، ولم تكن أبعادها مُحدَّدة عبر خاصيات العنصر <code><img></code>.
*صيغة الصورة المُحدَّدة ليست مدعومة في المتصفح.


=== الأخطاء ===
== التنسيق الافتراضي ==
عندما يحدث خطأ عند محاولة تحميل أو عرض الصورة، فستستدعى الدالة التي تُعالِج الحدث <code>error</code>، وهذا قد يحدث في عدِّة حالات مثل:
تعرض أغلبية المتصفحات الصور مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>inline-block</code>:<syntaxhighlight lang="css">
* الخاصية <code>src</code> غير موجودة أو قيمتها فارغة.
img {
* قيمة رابط URL للصورة هي نفس قيمة رابط URL للصفحة الحالية.
  display: inline-block;
* الصورة المُحدَّدة معطوبة بطريقةٍ ما تمنع عرضها.
}
* البيانات الوصفية للصورة معطوبة بشكلٍ يمنع الحصول على أبعادها، ولم تكن أبعادها مُحدَّدة عبر خاصيات العنصر <code><img></code>.
</syntaxhighlight>
* صيغة الصورة المُحدَّدة ليست مدعومة في المتصفح.
==مصادر ومواصفات==
==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element HTML Living Standard].
*معيار [https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element HTML Living Standard].

المراجعة الحالية بتاريخ 16:06، 7 أكتوبر 2022

يُمثِّل العنصر <img> صورةً في المستند.

مثال عن استخدام العنصر <img> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية alt):

<img src="wiki-logo.png" alt="Wiki Hsoub Logo">

مثال عن استخدام العنصر <img> لعرض صورة مع تحديد نص بديل لها (عبر الخاصية alt) داخل العنصر مما يسمح بالنقر على الصورة للانتقال:

<a href="wiki.hsoub.com"><img src="wiki-logo.png" alt="Wiki Hsoub Logo"></a>
دورة تطوير واجهات المستخدم
  • 72 ساعة فيديو تدريبية
  • من الصفر دون الحاجة لخبرة مسبقة
  • شهادة معتمدة من أكاديمية حسوب
  • متابعة أثناء الدورة من فريق مختص

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح لا يوجد، فهذا العنصر فارغ.
الوسم المختصر لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية.
العناصر الأب أي عنصر يقبل العناصر التضمينية.
واجهة DOM HTMLImageElement

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

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.

أضيفت الخاصية srcset في إصدار Chrome 35 و Firefox 32 و Opera 21 و Safari 7.1 وهي مدعومة في Edge.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

align

تحديد محاذاة الصورة بالنسبة للمحتوى المجاور، هذه الخاصية مهملة في HTML 4 وحُذِفَت في HTML5، ويجب استخدام الخاصية float و/أو vertical-align في CSS بدلًا منها، وذكرناها بغرض العلم بها.

alt

تُعرِّف هذه الخاصية نصًا بديلًا يصف الصورة، وسيشاهد المستخدمون هذا النص إن كان رابط URL للصورة غير موجود، أو لم يكن المتصفح يدعم صيغة الصورة، أو لم يكتمل تنزيل الصورة بعد.

لا تعرض المتصفحات الصورة المُشار إليها عبر هذا العنصر دومًا، وهذا ينطبق على المتصفحات غير الرسومية (بما فيها تلك التي يستعملها ممن لديه قصور في النظر)، فإن اختار المستخدم ألّا يعرض الصور أو لم يتمكن المتصفح من عرض الوصرة لأنها غير صالحة أو لا يدعم صيغتها، فسيستبدل المتصفحُ النص البديل الموجود ضمن خاصية alt بالصورة؛ ولهذه الأسباب (ولغيرها) عليك توفير قيمة مفيدة للخاصية alt متى استطعت ذلك.

إذا لم تضع هذه الخاصية بالمطلق فهذا يُشير إلى أنَّ الصورة هي جزءٌ مهمٌ من المحتوى ولا يمكن تعويضها بمحتوى نصي، أما ضبط هذه الخاصية إلى قيمةٍ فارغة (أي alt=""‎) فذلك يشير إلى أنَّ الصورة ليست جزءًا مهمًا من المحتوى، ويمكن للمتصفحات غير الرسومية أن تتجاهلها.

مثال عن استخدام العنصر <img> لعرض صورة مهمة، وذلك بحذف الخاصية alt كليًا:

<img src="im-img.png">

مثال عن استخدام العنصر <img> لعرض صورة غير مهمة، وذلك بإسناد سلسلة نصية فارغة إلى الخاصية alt:

<img src="decoration.png" alt="">

border

تحديد ثخن إطار الصورة، لكن هذه الخاصية أمست مهملة في HTML 4 وحُذِفَت في HTML5، لذا استخدام الخاصية border في CSS بدلًا عنها.

height

تحديد الارتفاع الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.

استخدام الخاصية height لضبط ارتفاع الصورة:

<img src="wiki-logo.png" alt="Wiki Hsoub Logo" height="70">

width

تحديد العرض الصافي للصورة بالبكسل. كان يمكن تحديد قيمة هذه الخاصية بالبكسل أو كنسبة مئوية في HTML 4، لكن في HTML5 يجب ضبط هذه القيمة بالبكسل حصرًا.

استخدام الخاصية width لضبط عرض الصورة:

<img src="wiki-logo.png" alt="Wiki Hsoub Logo" width="70">

hspace

تحديد عدد البكسلات من الفراغ الأبيض لتُضاف على يمين ويسار الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية margin في CSS بدلًا منها.

vspace

تحديد عدد البكسلات من الفراغ الأبيض لتُضاف أعلى وأسفل الصورة. لكن هذه الخاصية أمست مهملةً في HTML 4 وحُذِفَت في HTML5، لذا استخدم الخاصية margin في CSS بدلًا منها.

ismap

خاصية منطقية (Boolean) تُشير إذا كانت الصورة جزءًا من خريطة من طرف الخادوم (server-side map)، فلو كانت كذلك، فستُرسَل الإحداثيات الدقيقة لكل نقرة إلى الخادوم.

يُسمَح باستخدام هذه الخاصية إن كان العنصر <img> موجودًا داخل العنصر له خاصية href صالحة.

longdesc

رابط إلى وصف تفصيلي عن الصورة، القيم المسموحة لهذه الخاصية هي روابط URL أو مُعرِّف id لأحد العناصر الأخرى.

وضع رابط لصفحة دورة تطوير تطبيقات الويب باستخدام لغة PHP في أكاديمية حسوب لشرح الصورة شرحًا وافيًا، وذلك عبر الخاصية longdesc:

<img src="hsoub-academy-php-web-application-development-course.png" 
     alt="دورة تطوير تطبيقات الويب باستخدام لغة PHP" 
     longdesc="https://academy.hsoub.com/learn/php-web-application-development/">

name

تحديد اسم للعنصر، لكن هذه الخاصية مهملة في HTML 4 (وأضيفت إليها لغرض التوافقية مع الإصدارات السابقة) ومحذوفة في HTML5؛ ويجب استخدام الخاصية id بدلًا منها.

sizes

أُضيفت هذه الخاصية في HTML5، وهي تقبل سلسلة نصية فيها قيمة أو أكثر (مفصولة بفاصلة) لمصادر القياسات المختلفة للصور. يجب أن يحتوي كل مصدر على:

  1. عبارة media query، والتي يجب حذفها في آخر عنصر في القائمة.
  2. قيمة لقياس الصورة

قيمة قياس الصورة تُحدِّد ما هو حجم الصورة المراد عرضه، وتستخدم المتصفحات عبارة media query لتحديد أحد مصادر الصورة المُعرَّفة في خاصية srcset، وذلك عندما تقترن تلك المصادر مع مُحدِّدات العرض (w).

يؤثر حجم الصورة المُختارة على الحجم الصافي للصورة (أي الحجم الذي ستُعرَض فيه الصورة إن لم تُطبَّق قواعد CSS عليها).

إذا كانت الخاصية srcset غير موجودة، أو كانت لا تحتوي على أيّة قيمة فيها مُحدِّد العرض w، فلن يكون للخاصية sizes أي أثر.

src

رابط URL للصورة، وهذه الخاصية إجبارية لجميع عناصر <img>.

إذا كان المتصفح يدعم الخاصية srcset، فستُعامَل قيمة الخاصية src على أنها صورة مرشحّة لها معامل الكثافة 1x ما لم تُعرَّف صورة لها نفس معامل الكثافة في خاصية srcset، أو إذا لم تحتوي الخاصية srcset على المُحدِّد w.

srcset

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

تتألف كل سلسلة نصية من محتويات هذه الخاصية من:

  1. رابط URL لملف الصورة
  2. (اختياريًا) فراغ يتبعه أحد المُحدِّدات الآتية:
    • مُحدِّد العرض الذي هو عدد صحيح موجب يتبعه الحرف w، وستُقسَّم قيمة مُحدِّد العرض على الحجم المصدري المُعطى في خاصية sizes لحساب كثافة البكسلات الفعلية.
    • مُحدِّد كثافة البكسلات التي هو عددٌ عشري موجب يتبعه الحرف x مباشرةً.

إذا لم تعطى قيمة لأحد المُحدِّدَين السابقين فسيُسنَد للمصدر المُحدِّد الافتراضي 1x.

من غير السليم استخدام مُحدِّد العرض مع مُحدِّد الكثافة في نفس خاصية srcset، ومن غير السليم تكرار المُحدِّدات (أي لا يجوز أن يكون لمصدرين مختلفين في نفس الخاصية srcset مُحدِّد الكثافة 2x).

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

مثال عن استخدام الخاصية srcset لتحديد صورة بديلة للمتصفحات التي تعمل على أجهزة كثافتها 2x، لاحظ أنَّ قيمة الخاصية src ستُفسَّر على أنها مصدر الصورة ذات الكثافة 1x:

<img src="wiki-logo.png" 
  alt="Wiki Hsoub Logo" 
  srcset="wiki-logo-HD.png 2x">

مثال عن استخدام الخاصية srcset مع الخاصية sizes، وعندما ينطبق شرط media query الذي هو min-width: 600px فسيكون عرض الصورة 400px، عدا ذلك ستكون بعرض 50vw (أي 50% من عرض إطار العرض):

<img src="cover-small.png" 
  alt="Cover Photo" 
  srcset="cover-large.png 1640w,
      cover-small.png 965w"
  sizes="(min-width: 600px) 400px, 50vm">

usemap

تأخذ هذه الخاصية عنوان URL جزئي (يبدأ برمز #) لخريطة <map> مرتبطة بهذا العنصر.

يجدر بالذكر أنَّك لا تستطيع استخدام هذه الخاصية إن كان العنصر <img> موجودًا ضمن عنصر أو <button>.

راجع صفحة العنصر <map> لمثال عن استخدام العنصر <img> مع هذه الخاصية.

ملاحظات الاستخدام

صيغ الصورة المدعومة

لا يعطي معيار HTML قائمةً بصيغ الصورة التي يجب دعمها، لذا يدعم كل متصفح قائمةً مختلفةً من الصيغ، فمثلًا متصفح Firefox يدعم:

وبعض المتصفحات مثل Chrome و Opera تدعم صيغة WebP الجديدة.

التفاعل مع CSS

إنَّ العنصر <img> هو عنصر سيستبدل بمورد خارجي، وليس له خط أساس (baseline)، لذا عندما تستخدم الصور في المحتوى السطري (inline) مع خاصية vertical-align: baseline في CSS فسيوضع أسفل الصورة على خط الأساس للعنصر الحاوي لها.

قد يكون للصورة أبعاد صافية اعتمادًا على نوعها، لكن لبعض أنواع الصورة لا يكون لها أبعاد صافية، مثل صور SVG.

الأخطاء

عندما يحدث خطأ عند محاولة تحميل أو عرض الصورة، فستستدعى الدالة التي تُعالِج الحدث error، وهذا قد يحدث في عدِّة حالات مثل:

  • الخاصية src غير موجودة أو قيمتها فارغة.
  • قيمة رابط URL للصورة هي نفس قيمة رابط URL للصفحة الحالية.
  • الصورة المُحدَّدة معطوبة بطريقةٍ ما تمنع عرضها.
  • البيانات الوصفية للصورة معطوبة بشكلٍ يمنع الحصول على أبعادها، ولم تكن أبعادها مُحدَّدة عبر خاصيات العنصر <img>.
  • صيغة الصورة المُحدَّدة ليست مدعومة في المتصفح.

التنسيق الافتراضي

تعرض أغلبية المتصفحات الصور مع ضبط الخاصية display إلى inline-block:

img {
  display: inline-block;
}

مصادر ومواصفات

مجلوبة من «https://wiki.hsoub.com/index.php?title=HTML/img&oldid=32445»