استفاده از تصویر به عنوان لینک در HTML

یکی از سناریوهای رایج در مورد تصاویر، استفاده از آن‌ها در قالب لینک یا پیوند در HTML است. به این ترتیب با کلیک روی تصویر، مشابه با یک لینک معمولی مقصد لینک باز می‌شود.

برای استفاده از یک تصویر به عنوان لینک می‌توانید از یک المان <a> برای ایجاد لینک و از یک المان <img> داخل المان <a> برای افزودن تصویر کمک بگیرید.

در مثال زیر نحوه درج تصویر به صورت پیوند در HTML را مشاهده می‌کنید. همانطور که می‌بینید در این حالت به جای متن ساده، یک المان <img> محتوای داخلی المان <a> را تشکیل می‌دهد. این المان به طور کامل مابین تگ شروع <a> و تگ پایان </a> قرار می‌گیرد.

<a href="https://example.com">
  <img src="example.jpg" alt="HTML Image as link">
</a>

به صورت پیشفرض هنگام قرارگیری نشانگر ماوس روی این تصویر (مشابه با یک لینک متنی)، نشانگر به صورت آیکن دست تغییر شکل پیدا می‌کند. مقصد لینک نیز همانند سایر لینک ها می‌تواند هر صفحه یا منبعی باشد. برای مثال ممکن است بخواهید کاربر با کلیک روی تصویر به نسخه اصلی فایل تصویر دسترسی پیدا کند یا به صفحه مربوط به محصول در فروشگاه آنلاین هدایت شود.

بیشتر بخوانید: نحوه درج لینک یا پیوند در HTML و آشنایی با المان <a>

بیشتر بخوانید: نحوه درج تصویر در HTML و آشنایی با المان <img>

بازگشت به فهرست مجموعه آموزشی HTML