ویژگی border برچسب <img> HTML
مثال
این HTML می‌تواند لبه‌های تصویر با ضخامت‌های مختلف تولید کند:
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="1" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="2" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="4" /> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_codew3c.gif" border="8" /> </a> </body> </html>
تعریف و استفاده
ویژگی border برچسب <img> پهنای حاشیه اطراف تصویر را مشخص می‌کند، یعنی می‌توانید حاشیه تصویر را اضافه یا حذف کنید.
توضیحاتبه طور پیش‌فرض، تصاویر هیچ حاشیه‌ای ندارند (مگر اینکه تصویر در داخل یک برچسب a باشد).
معمولاً مرورگرها تصاویر نمایانگر پیوند (مثلاً تصاویر قرار داده شده در برچسب <a>) را در داخل یک حاشیه دو پیکسلی نمایش می‌دهند تا نشان دهد که خواننده می‌تواند با انتخاب این تصویر به مستند مرتبط دسترسی پیدا کند.
با استفاده از ویژگی border و مقدار پهنای پیکسلی، می‌توانید حاشیه تصویر را حذف کنید (border="0") یا پهنای آن را افزایش دهید.
توجه:این ویژگی در HTML 4 و XHTML نیز دیگر توصیه نمی‌شود و باید به جای آن از استایل استفاده شود، اما همچنان توسط مرورگرهای محبوب به خوبی پشتیبانی می‌شود.
پشتیبانی مرورگر
با اینکه استفاده از ویژگی border توصیه نمی‌شود، اما تمام مرورگرهای اصلی این ویژگی را پشتیبانی می‌کنند.
توضیحات و توصیه‌ها
توضیحاتاستفاده از ویژگی "border" تصاویر در HTML 4.01 توصیه نمی‌شود. در XHTML 1.0 Strict DTD و HTML 5، این ویژگی دیگر پشتیبانی نمی‌شود.
توضیح:لطفاً از ویژگی حاشیه CSS برای تغییر سبک حاشیه عناصر. شما می‌توانید از ویژگی حاشیه CSS در یک جدول استایل خارجی استفاده کنید تا برای تمام تصاویر وب‌سایت یک حاشیه یکسان تنظیم کنید. این روش به طور قطع کارایی بیشتری نسبت به تنظیم ویژگی border برای هر تصویر به طور جداگانه دارد.
توضیحات سازگاری
استفاده از ویژگی border عناصر img توصیه نمی‌شود؛ در HTML 4.01 Strict و XHTML 1.0 Strict DTD، ویژگی border عناصر img پشتیبانی نمی‌شود.
لطفاً از CSS استفاده کنید.
نحوه نوشتن CSS: <img style="border:5px solid black">
در آموزش CSS ما، می‌توانید اطلاعات بیشتری در مورد ویژگی border جزئیات.
نحوه نوشتن
<img border="value" />
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| pixels | پهنای حاشیه، به واحد پیکسل. |
مثال TIY
- ویژگی border برچسب <img>
- این مثال نشان می‌دهد که چگونه می‌توان از ویژگی border در برچسب <img> برای تغییر قاب تصاویر استفاده کرد.
مطالعه بیشتری در مورد حذف قاب تصاویر
با استفاده از ویژگی border="0" در برچسب <img>، می‌توانید قاب پیرامون لینک تصویر را حذف کنید. برای برخی از تصاویر، به ویژه تصاویر نقشه‌ای، حذف قاب ممکن است ظاهر صفحه را بهبود بخشد. برای دکمه‌هایی که واضحاً به عنوان لینک به تصویر دیگر اشاره دارند و بدون قاب به نظر می‌رسند، ممکن است تصویر بهتر به نظر برسد.
اگرچه حذف قاب‌ها کارایی مستند را کاهش نمی‌دهد، اما باید بسیار احتیاط کنید. زیرا بدون قاب به این معناست که یکی از نشانه‌های بصری بسیار معمول برای اشاره به لینک‌ها از بین رفته است، که ممکن است خوانندگان به اندازه قبل به راحتی این لینک‌ها را پیدا نکنند. مرورگرها معمولاً شکل موس را تغییر می‌دهند وقتی موس بر روی تصویر لینک حرکت می‌کند، اما نباید انتظار داشته باشید که مرورگرها همیشه این کار را انجام دهند و حتی نباید کاربران را وادار به جستجوی لینک‌های پنهان در تصاویر بدون قاب کنید.
ما به شدت توصیه می‌کنیم که هنگام استفاده از تصاویر بدون قاب، بهتر است از روش‌های دیگر نیز استفاده کنید تا خوانندگان بدانند که باید روی این تصاویر کلیک کنند. حتی با استفاده از متون ساده، بهبود دسترسی مستند برای خوانندگان بسیار دشوار است.
