کلاس درس پیشنهادی:
ویژگی <img> alt HTML
توضیح و نکته تعریف و استفاده
ویژگی یک ویژگی اجباری است که متن جایگزین را در صورت نمایش داده نشدن تصویر مشخص می‌کند.
- فرض کنید کاربر نمی‌تواند تصویر را مشاهده کند به دلیل موارد زیر، ویژگی alt می‌تواند اطلاعات جایگزین برای تصویر ارائه دهد:
- سرعت اینترنت کم است
- اشتباه در ویژگی src
- مرورگر تصاویر را غیرفعال کرده است
کاربر از خواننده‌ی صفحه‌نمایی استفاده می‌کند
ویژگی alt عنصر <img> متن جایگزین را مشخص می‌کند که در صورت نمایش داده نشدن تصویر یا وقتی کاربر نمایش تصاویر را غیرفعال می‌کند، در مرورگر به جای تصویر نمایش داده می‌شود.
توضیح:ما به شدت توصیه می‌کنیم که در هر تصویر موجود در مستند از این ویژگی استفاده کنید. به این ترتیب حتی اگر تصویر نمایش داده نمی‌شود، کاربر می‌تواند برخی از اطلاعات درباره‌ی چیزی که از دست رفته است، ببیند. و همچنین برای افراد معلول، ویژگی alt معمولاً تنها راهی است که می‌توانند محتوای تصویر را بفهمند. ویژگی titleبرای ایجاد توضیح برای تصویر از
!
نکته:توضیح و نکته مقدار ویژگی یک رشته است که می‌تواند حداکثر 1024 کاراکتر شامل فضاهای خالی و علامت‌های نشانه‌گذاری داشته باشد. این رشته باید در قفل‌ها قرار گیرد. این متن جایگزین alt می‌تواند شامل ارجاع به کاراکترهای خاص باشد، اما نمی‌تواند شامل دیگر دسته‌های علامت‌گذاری باشد، به ویژه اینکه نباید هیچ برچسب استایل‌دهی داشته باشد.
نکته:وقتی کاربر ماوس را روی عنصر img حرکت می‌دهد، اینترنت اکسپلورر مقدار ویژگی alt را نمایش می‌دهد. این رفتار صحیح نیست. تمام مرورگرهای دیگر به استاندارد نزدیک می‌شوند، فقط وقتی تصویر نمایش داده نمی‌شود، متن جایگزین نمایش داده می‌شود.
توضیح:اگر می‌خواهید برای تصویر یک توضیح ایجاد کنید، از ویژگی title。
مثال
مثال 1
<img src="/i/eg_tulip.jpg" alt="شنگهای خوشبو - خشخاش" />
اگر تصاویر نمایش داده نمی‌شود، مرورگر متن جایگزین را نمایش می‌دهد، مانند این:
علاوه بر این، زمانی که کاربر موس را روی تصویر بالا می‌برد، مرورگرهای جدیدترین در یک مربع متنی متن توصیفی نمایش می‌دهند. کد زیر در پراپرتی alt متن توصیفی برای تصویر اضافه می‌کند:
می‌توانید موس را روی تصویر زیر حرکت دهید و نتیجه را ببینید:
متن دایره قرمز زمانی که کاربر موس را روی تصویر حرکت می‌دهد، در مرورگر IE7 نمایش داده می‌شود:
مثال 2
تصویر با متن جایگزین مشخص شده است:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
قوانین
<img alt="text">
مقدار پراپرتی
| مقدار | توصیف |
|---|---|
| text |
تعیین متن جایگزین تصویر. اصل استفاده از alt متن:
|
پشتیبانی از مرورگر
| کروم | اندروید | فایرفاکس | سافاری | اپرا |
|---|---|---|---|---|
| کروم | اندروید | فایرفاکس | سافاری | اپرا |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
