آموزش HTML - پیوندهای تصویری

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

ایجاد پیوندهای تصویری

برای ایجاد یک پیوند تصویری در HTML، به یک تگ <img> و یک عنصر لنگر (anchor) نیاز داریم. عنصر تصویر برای نمایش تصویر در صفحه وب استفاده می‌شود و عنصر لنگر برای مشخص کردن نشانی اینترنتی مقصد پیوند به کار می‌رود.

در اینجا، ویژگی href در عنصر <a> شامل پیوند مقصد است و ویژگی src در تگ <img> مسیر تصویر را مشخص می‌کند.

نحو

در اینجا، ویژگی href در عنصر <a> شامل پیوند مقصد است و ویژگی src در تگ <img> مسیر تصویر را مشخص می‌کند.

<a href=" destination URL">
   <img src="image URL" alt="alternative text">
</a>

نمونه‌هایی از پیوندهای تصویری در HTML

در ادامه، چند نمونه کد آورده شده است که نحوه استفاده از پیوندهای تصویری در HTML را توضیح می‌دهند:

• ایجاد پیوند برای یک تصویر
• پیوند تصویری همراه با راهنمای شناور
• تصاویر حساس به موقعیت ماوس
  • نقشه‌های تصویری سمت سرور
  • نقشه‌های تصویری سمت کاربر

ایجاد پیوند برای یک تصویر

در مثال زیر، از یک تصویر به‌عنوان پیوند استفاده می‌کنیم. اگر کد زیر را اجرا کنید، تصویری نمایش داده می‌شود و با کلیک روی آن، به صفحه اصلی وب‌سایت Tutorials Point هدایت خواهید شد.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>Image Hyperlink Example</title>
</head>
<body>
   <a href="https://www.tutorialspoint.com">
      <img src="/html/images/logo.png" 
           alt="Tutorials Point" 
           border="0" />
   </a>
</body>
</html>

پیوند تصویری همراه با راهنمای شناور

همچنین می‌توانید برای یک پیوند تصویری، راهنمای شناور تعریف کنید. هنگامی که شخصی نشانگر ماوس را روی تصویر پیونددار حرکت می‌دهد، یک راهنمای شناور نمایش داده می‌شود. برای تنظیم این راهنما، می‌توانید ویژگی ویژگی title را در تگ <a> تنظیم کنید.

مثال

مثال زیر نحوه نمایش راهنمای شناور برای یک پیوند تصویری را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Image Hyperlink Example</title>
</head>
<body>
   <a href="https://www.tutorialspoint.com" title="Go to TutorialsPoint">
      <img src="/html/images/logo.png" 
           alt="Tutorials Point" 
           border="0" />
   </a>
</body>
</html>

در مثال بالا، با قرار دادن نشانگر ماوس روی لوگو، راهنمای شناور «Go to TutorialsPoint» نمایش داده می‌شود.

تصاویر حساس به موقعیت ماوس

استانداردهای HTML و XHTML قابلیتی ارائه می‌دهند که به ما امکان می‌دهد چندین پیوند متفاوت را درون یک تصویر واحد قرار دهیم. می‌توانیم بر اساس مختصات مختلف موجود در تصویر، پیوندهای متفاوتی برای بخش‌های مختلف همان تصویر ایجاد کنیم.

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

برای ایجاد نقشه‌های تصویری دو روش وجود دارد:

• نقشه‌های تصویری سمت سرور: این روش با استفاده از ویژگی ismap در تگ <img> فعال می‌شود و به دسترسی به یک سرور و برنامه‌های مرتبط برای پردازش نقشه تصویری نیاز دارد.
• نقشه‌های تصویری سمت کاربر: این روش با استفاده از ویژگی usemap در تگ <img> و همراه با تگ‌های متناظر <map> و <area> ایجاد می‌شود.

نقشه‌های تصویری سمت سرور

در نقشه‌های تصویری سمت سرور، کافی است تصویر را داخل یک پیوند قرار دهیم و از ویژگی ismap استفاده کنیم تا تصویر به یک تصویر ویژه تبدیل شود. هنگامی که کاربر روی نقطه‌ای از تصویر کلیک می‌کند، مرورگر مختصات نشانگر ماوس را همراه با نشانی اینترنتی مشخص‌شده در تگ <a> به وب‌سرور ارسال می‌کند. سرور از مختصات نشانگر ماوس استفاده می‌کند تا مشخص کند کدام سند را باید به مرورگر برگرداند.

هنگامی که از ismap استفاده می‌شود، ویژگی href در تگ <a> که تصویر را در بر می‌گیرد، باید نشانی اینترنتی یک برنامه سمت سرور، مانند یک اسکریپت CGI یا PHP، را داشته باشد تا درخواست ورودی را بر اساس مختصات ارسال‌شده پردازش کند.

مختصات موقعیت ماوس بر حسب پیکسل‌های صفحه نمایش محاسبه می‌شوند و مبدأ آن‌ها گوشه بالا و سمت چپ تصویر است که مختصات (0,0) دارد. این مختصات با علامت سؤال در ابتدای خود، به انتهای نشانی اینترنتی اضافه می‌شوند.

مثال

قطعه کد زیر نحوه استفاده از نقشه‌های تصویری سمت سرور را نشان می‌دهد.

<!DOCTYPE html>
<html>
<head>
   <title>ISMAP Hyperlink Example</title>
</head>
<body>
   <p>
      Click on the Image to get its coordinates. 
   </p>
   <a href="#" target="_self">
      <img src="/images/logo.png" 
           alt="Tutorials Point" 
           ismap/>
   </a>
</body>
</html>

با اجرای کد بالا، لوگوی Tutorials Point نمایش داده می‌شود. هنگامی که روی لوگو کلیک می‌کنیم، مختصات مربوطه در نوار نشانی مرورگر نمایش داده می‌شوند؛ همان‌طور که در زیر مشاهده می‌کنید:

به این روش می‌توانیم پیوندهای متفاوتی را به مختصات مختلف تصویر اختصاص دهیم. با کلیک روی هر یک از این مختصات، به اسناد مرتبط با آن‌ها هدایت می‌شویم. برای آشنایی بیشتر با ویژگی ismap، به صفحه ویژگی ismap در HTML مراجعه کنید.

نقشه‌های تصویری سمت کاربر

نقشه‌های تصویری سمت کاربر با استفاده از ویژگی usemap در تگ <img /> فعال می‌شوند و با استفاده از تگ‌های توسعه‌یافته ویژه <map> و <area> تعریف می‌شوند. تگ <map> به همراه تگ‌های <area> تمام مختصات تصویر و پیوندهای متناظر با آن‌ها را مشخص می‌کنند. تگ <area> درون تگ map شکل و مختصات را برای تعیین مرز هر ناحیه قابل کلیک در تصویر مشخص می‌کند.

تصویری که قرار است نقشه تصویری را تشکیل دهد، مانند یک تصویر معمولی با استفاده از تگ <img /> در صفحه قرار می‌گیرد؛ با این تفاوت که یک ویژگی اضافی به نام usemap دارد.

با اجرای کد زیر، تصویری دارای نواحی قابل کلیک نمایش داده می‌شود. اگر روی یکی از این نواحی کلیک کنید، به آموزش مربوط به همان بخش هدایت خواهید شد.

برای آشنایی با نحوه محاسبه مقدار ویژگی coords، می‌توانید توضیحات مربوط به ویژگی coords را مطالعه کنید.

مثال

<!DOCTYPE html>
<html lang="en">

<body>
   <h1>Welcome to our interactive map!</h1>
   <p>
      Click on a region to visit the 
      respective language page:
   </p>
   <img src="/html/images/lang.jpg" 
        usemap="#langmap" 
        alt="language Map" />

   <map name="langmap">
      <area shape="rect" 
            coords="0,0,180,165" 
            alt="HTML" 
            href="html/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="180,0,375,167" 
            alt="JavaScript" 
            href="javascript/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="0,166,180,338" 
            alt="PHP" 
            href="/php/index.htm" 
            target="_blank" hreflang="en" />
      <area shape="rect" 
            coords="180,165,375,338" 
            alt="ReactJS" 
            href="reactjs/index.htm" 
            target="_blank" 
            hreflang="en" />
   </map>
</body>
</html>

سیستم مختصات در تصاویر HTML

مقدار واقعی مختصات کاملاً به شکل ناحیه قابل کلیک بستگی دارد. بیایید مختصات شکل‌های مختلف را بررسی کنیم.

نکته: تمام مختصات نسبت به گوشه بالا و سمت چپ تصویر (0,0) محاسبه می‌شوند. هر شکل، نشانی اینترنتی مرتبط با خود را دارد. برای تعیین مختصات موقعیت‌های مختلف، می‌توانید از هر نرم‌افزار ویرایش تصویر استفاده کنید. برای مثال، برنامه Paint در ویندوز.