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

usemap یکی از صفت‌های تگ img یا عکس‌ها در html است که به همراه افزودن لینک به تصویر و ساخت بنر ثابت، در این مقاله نیوسان‎وب معرفی و آموزش داده می‌شود.

صفت usemap در تصاویر چیست؟

در مقاله قبلی در خصوص صفت‌های مختلف تصاویر html توضیحاتی را ارائه کردیم. صفت usemap در تصاویر برای ساخت نواحی قابل کلیک روی آنها به کار می‌رود. usemap از طریق آیدی با تگی به نام map ارتباط دارد و بین تصویر و المان map رابطه برقرار می‌کند. برای اینکه درک این مساله برای شما روشن‌تر شود، یک مثال می‌زنیم. مطابق روش مقالات قبل یک فولدر به نام 007 ایجاد کنید؛ آن را با visual studio code باز کنید و با استفاده از آن، یک فایل به نام Index.html ایجاد کنید. تگ های لازم را جانمایی کنید. در داخل فولدر 007، یک پوشه به نام images هم ایحاد کنید. برای این مثال، فایل‌های مربوطه در پایان ضمیمه خواهند شد. ما در داخل پوشه Images پنج تصویز قرار داده‌ایم که یکی از آنها نقشه جهان و 3 تای دیگر نقشه کشورهای ایران، استرالیا و برزیل هستند؛ یک نقشه از قاره آمریکا نیر در این فولدر قرار داده‌ایم. چهار فایل html دیگر به نام iran.html، australia.html، brazil.html و amricas.html ایجاد کنید و در هر یک تصاویر مربوط به آنها را آدرس دهی کنید تا در داخل صفحه آنها به نمایش در آیند. در واقع می‌خواهیم هنگامی که کاربر روی هر کدام ازکشورها روی نقشه جهان در فایل Index.html کلیک کرد، صفحه نمایش پرچم آن کشورها به نمایش در آید؛ در مورد نقشه قاره آمریکا هم می‌خواهیم چنانچه کاربر روی نواحی کشورهای قاره آمریکا کلیک کرد، فایل حاوی نقشه قاره آمریکا نشان داده شود. برای این کار باید تصویر اول را نقشه بندی کنیم و در نقشه بگوییم که چه محدوده‌ای از نقشه بندی ما به کدام فایل html متعلق است.

المان map شامل تعدادی تگ area است که هر یک از آنها شامل یک صفت shape که نوع نقشه بندی بر اساس شکل را نشان می‌دهد که در اینجا ما برای سادگی کار از circle (دایره) و rect (مستطیل) استفاده کردیم. صفت coords که نقاط مختصاتی را نشان می‌دهد که با توجه به نوع شکل ممکن است نشانگر گوشه، مرکز یا طول باشد؛ یک title صفت که قبلا با آن آشنا شدید (وقتی که به محدوده این نقشه بندی وارد می‌شوید، به صورت tooltip محدوده آن را نشان می‌دهد)، نحوه باز شدن صفحه که با target مشخص شده است و همچنین href برای لینک دهی یا ایجاد پیوند که در اینجا برای لینک به فایل html دیگر استفاده شده است.

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <img id="myImgId" src="images/wold.png" usemap="#newsunwebmap" width="1125" height="560" alt="world map" title="world map" />   
    <map name="newsunwebmap">
        <area shape="circle" coords="644,196,20" title="iran flag" href="iran.html">
        <area shape="circle" coords="283,357,40" title="brazil flag" href="brazil.html">
        <area shape="circle" coords="915,419,40" title="australia flag" href="australia.htm">
        <area shape="rect" coords="0,0,390,560" title="americas" href="americas.html">
      </map>
    </body>
</html>

حالا با ماوس روی محدوده‌هایی که گفتیم بروید و ببینید چه اتفاقی می‌افتد؛ روی آنها کلیک کنید و بقیه نقشه‌ها را هم بررسی کنید.

هنگامی که از circle استفاده می‌کنیم، باید به ترتیب مختصات x سپس y مرکز و آنگاه اندازه شعاع دایره مربوط به area را بدهیم. برای rect هم کافی است به ترتیب مختصات قطر مورب که از بالا و سمت چپ شروع می‌شود را ابتدا بدهیم و سپس مختصات انتهای همین قطر را (همانطور که مشخص است، یک مستطیل که مورب نباشد، تنها با داشتن یک قطر قابل رسم است). شکل زیر را به عنوان یک راهنما مشاهده کنید:

usemap - area

اگر نگران هستید که ممکن است در استفاده از این تگ اشتباه کنید، باید بگوییم که نگران نباشید؛ اگر واقعا نیاز به استفاده از این تگ دارید، می‌توانید از ابزارهایی که برای آن در دنیای وب در نظر گرفته شده است، استفاده کنید. یکی از این ابزارهای نقشه بندی آنلاین تصویر (Online Image Map Generator) و استفاده از usemap در لینک مشخص شده قرار دارد که می‌تواند گزینه مناسبی برای استفاده باشد. اگر این ابزار را بررسی کنید متوجه می‌شوید که صفت shape یک مقدار به نام poly نیز دارد که برای شکل‌های پیچیده و نامنظم می‌تواند به کار رود. شکل زیر را ببینید:

نقشه بندی آنلاین تصویر همانطور که مشاهده می‌کنید، ما shape را poly انتخاب کردیم و بعد روی تصویر نقشه ایران دقت کنید، با هر بار کلیک ما، یک نقطه ثبت شد که در نهایت می‌توانیم با زدن Add New Area، نقشه‌های دیگر هم اضافه کنیم و در پایان با زدن show me the code، کدهای آن را کپی کرده و در محلی که نیاز داریم پیست کنیم. فقط دقت کنید که در صورت تغییر دادن طول و عرض تصویر، این نقاط هم باید به همان نسبت تغییر یابند.

نکته: usemap در تصاویری که به صورت لینک هستند و در بخش بعد توضیح داده خواهند شد، قابل استفاده نیست.

لینک‌دهی به تصویر و ساخت بنر

بنر در واقع تصویری قابل کلیک است که با کلیک روی آن به لینک خاصی کاربر را هدایت می‌کند. ابتدا همینجا لازم است بگویم که در واقع عنوان درست برای این بخش تصویر دهی به لینک است چرا که لینک دارای تگ دو بخشی است و می‌تواند یک تصویر را در خود جای دهد؛ نه تصویر. برای این کار کافی است بعد از لینک دهی در صفت href تگ هایپرلینک، در بین دو تگ <a></a>، تگ تصویر را قرار دهیم؛ به همین سادگی! به این منظور ابتدا تصویر newsunweb.png را در فولدر images قرار دادیم و سپس کدهای لازم را نوشتیم.

کد زیر را ببینید که در همان فایل Index.html و زیر بخش قبلی که در فایل ضمیمه شده هم می‌توانید آن را مشاهده کنید، قرار دادیم:

      <div>
          <a href="https://newsunweb.com/" target="_blank">
            <img id="myImgId" src="images/wold.png" alt="newsunweb" title="newsunweb"  /> 
          </a>
      </div>

به این ترتیب یک تصویر قابل کلیک ساخته شده است که در صورت کلیک روی آن به آدرس مربوط به آن هدایت خواهید شد.

جمع بندی

در این مقاله که در خصوص ادامه کار با تگ تصویر بود، چگونگی قابل کلیک کردن آنها را گفتیم. این قابلیت با استفاده از usemap و المان map و سپس چندین تگ area به تصویر اضافه می‌شود که به این ترتیب با استفاده از محدوده هر یک از این تگ‌ها امکان ایجاد پیوند به فایل ها، آدرس‌ها یا المان‌های مختلفی که مد نظر طراح است، وجود دارد. روش دیگر که تنها به یک آدرس مشخص کاربر را هدایت می‌کند، استفاده از تگ تصویر در داخل یک تگ هایپرلینک <a></a> است که از این روش معمولا برای تولید بنرها و تبلیغات در صفحات html استفاده می‌شود. با نیوسان‌وب همراه باشید که به زودی با مقالات جدیدتری همراه شما خواهیم بود. در پایان برای دانلود فایل‌های پروژه می‌توانید آنها را از لینک زیر دانلود کنید.

فایل های مقاله آموزشی

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.