نقشه های تصویر HTML

نقشه های تصویر HTML


نقشه های تصویر، تصاویری با زمینه قابل کلیک هستند که معمولا به صفحات وب دیگر لینک می شوند. گاهی اوقات آنها را با نام نقطه اتصالها «Hotspots» می شناسند.

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

برای ساخت نقشه تصویر:

تگ <img> را اضافه کنید

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

اضافه کردن map

برای ایجاد نقشه از تگ <map> زبان HTML استفاده کنید و یک نام برای این تگ برگزینید. در داخل این تگ، شما مشخص می کنید که کدام نقطه ها قابل کلیک باشند و این کار را با تگ <area> انجام می دهید.

مناطق را با ویژگی usemapلینک دهید

این ویژگی نقشه تصویر را لینک می دهد.

عنصر usemap را به تگ <img> اضافه کنید. مقدار آن باید نام نقشه باشد و البته قبل از یک نماد هش (#).

برای مثال اگر نام نقشه به صورت name=”logo-m” باشد، باید از usemap=”#logo-m” در تصویر استفاده کنید.

اگر تا الآن کمی سردرگم شده اید نگران نباشید در مثال زیر بیشتر متوجه خواهید شد.

مثال نقشه تصویر

<!-- Image -->

<img usemap="#logo-m" src="http://uupload.ir/files/ioz_نقشه_های_تصویر.jpg" width="251" height="128"

alt="Map of Australia and New Zealand">

<!-- Map -->

<map name="logo-m">

    <area shape="rect" coords="1, 1, 110, 122" href="http://www.computerquestion.ir/معرفی-html.html/" target="_blank" alt="آموزش اچ تی ام ال">

    <area shape="rect" coords="130,1,240,125" href="http://www.computerquestion.ir/آموزش-کامل-notepad.html/" target="_blank" alt="آموزش نت پد">

</map>

برای مشاهده نتیجه اینجا کلیک کنید.

خب، در مقایسه با درس قبلی، این کد به نظر خیلی پیچیده تر است. با این حال، هنگامی که تمرین کن اصلا پیچیده نخواهد بود. تمام کاری که انجام دادیم اضافه کردن یک تصویر و سپس یک نقشه با مختصات آن است. سخت ترین قسمت آن این است که مختصات را به درستی وارد کنید.

در مثال بالا، ما از تگ <area> در ارتباط با ویژگی shape و coord استفاده کردیم. این ویژگی ها مقدارهای زیر را می پذیرند:

Shape: نوع شکل برای منطقه قابل کلیک را تعریف می کند. این شکل می تواند مقدارهای زیر را داشته باشد:

-         Default (پیشفرض)

-         Rect (مستطیل)

-         Circle (دایره)

-         Poly (چندضلعی)

Coords: مختصات منطقه قابل کلیک را مشخص می کند. مختصات به شرح زیر تعیین می شوند:

-         برای مستطیل (اعداد از چپ به راست نوشته می شوند):

چپ، بالا، راست، پایین (مثل: 1, 1, 110, 122)

-         برای دایره:

مرکز ایکس، مرکز وای، شعاع

-         برای چندضلعی:

X1, y1, x2, y2…

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

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی