آموزش لینک کردن تصاویر در HTML | آموزش نقشه تصویر

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

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

برای این کار لازم است که تگ تصویر را داخل تگ لینک قرار دهیم. به مثال زیر دقت کنید :

            < p> Click following link 
            < a href="http://www.tahlildadeh.com">
                < img src="https://www.tahlildadeh.com/Content/images/img/LogicBanner.webp" alt="tahlildadeh" border="0" />
            < /a>

خروجی کد بالا :

این ساده ترین راه ایجاد لینک با استفاده از تصاویر می باشد.

---

تصاویر حساس به موس در HTML

استانداردهای HTML و XHTML با ارائه ی یک ویژگی خاص به شما اجازه می دهد تا لینک های مختلفی را در داخل یک تصویر قرار دهید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر به صورت مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن آن ها روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.

---

آموزش ساخت نقشه تصویر در HTML

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

1. تعریف نقشه تصویر

نقشه تصویر شامل یک تصویر است که به وسیله تگ img در HTML نمایش داده می‌شود و یک تگ map که مناطق قابل کلیک را تعریف می‌کند. این مناطق با استفاده از تگ area مشخص می‌شوند.

2. ساختار نقشه تصویر

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

• تصویر (با استفاده از تگ img)
• تعریف نقشه (با استفاده از تگ map)
• تعریف مناطق قابل کلیک (با استفاده از تگ area)

3. نحوه استفاده از تگ map

تگ map برای تعریف نقشه تصویر استفاده می‌شود و نیازمند یک شناسه یکتا (ID) است که توسط ویژگی name مشخص می‌شود. این شناسه به تگ img متصل می‌شود تا تصویر و نقشه به هم مرتبط شوند.

            < map name="workmap">
             < !-- مناطق قابل کلیک در اینجا تعریف می‌شوند -- >
            < /map>

4. اتصال نقشه به تصویر

برای اتصال نقشه به تصویر، از ویژگی usemap در تگ img استفاده می‌کنیم. مقدار این ویژگی باید با نام نقشه که در تگ map تعریف شده مطابقت داشته باشد.

                < img src="workplace.jpg" alt="Workplace" usemap="#workmap">
                < map name="workmap">
                    < !-- مناطق قابل کلیک در اینجا تعریف می‌شوند -- >
                < /map>

5. تعریف مناطق قابل کلیک با تگ area

هر منطقه قابل کلیک در نقشه تصویر با تگ area تعریف می‌شود. این تگ دارای چندین ویژگی مهم است:

shape

شکل منطقه، که می تواند مستطیل شکل (rect)، دایره شکل (circle)، یا چندضلعی (poly) باشد

coords

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

href

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

alt

متن جایگزین برای منطقه

---

مثال مستطیل

< area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">

مثال دایره

< area shape="circle" coords="337,300,44" alt="Phone" href="phone.html">

مثال چندضلعی

< area shape="poly" coords="130,136,160,60,250,80,280,210,210,290,120,260" alt="Desk" href="desk.html">

6. ترکیب کامل یک نقشه تصویر

کد زیر یک مثال کامل از نقشه تصویر با چند منطقه قابل کلیک است:

            < img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
            < map name="workmap">
            < area shape="rect" coords="34,44,270,350" alt="Computer" href="#">
            < area shape="rect" coords="290,172,333,250" alt="Phone" href="#">
            < area shape="circle" coords="337,300,44" alt="Cup of coffee" href="#">
            < /map>

---

خروجی

در عکس زیر، لپ تاپ، لیوان قهوه و تلفن همراه قابل کلیک هستند

---