| تعداد فروش | 0 دانشجو |
|---|---|
| امتیاز | 5.00 از 5 |
| پرسش و پاسخ ها | 1 کاربر |
| تاریخ انتشار | 05 خرداد 1402 |
| سطح تمرین | متوسط |
در این پست قصد داریم نحوه ایجاد لینک بر روی نقشه ایران در html را به صورت کاملا حرفه ای پیاده سازی نماییم.
سوال: با توجه به تصویر نقشه ایران لینک های چندین شهر را فعال نمایید؟
بدین معنا که اگر کاربر از روی تصویر نقشه بر روی کرمان کلیک کرد یک سایتی باز شود.
ویدیو آموزش را مشاهده نمایید.
برای ایجاد لینک به صورت نقشه ای بر روی صفحه باید بر روی نواحی تصویر تمرکز کنیم.
با کمک تگ map در html میتوانیم لینک بر روی نقشه ایران ایجاد نماییم.
با کمک این تگ میتوانیم با shape های مختلف از جمله rect,poly و … نواحی مختلف بر روی تصویر ایجاد نماییم.
نمونه ای از این تگ به صورت زیر میباشد:
<map name="image-map">
<area target="_blank" alt="Google" title="Google" href="http://google.com" coords="95,126,107,134,113,142,121,152,124,160,120,168,110,173,102,168,95,162,89,153,80,140,90,142,88,131" shape="poly">
<area target="_blank" alt="alotamrin" title="alotarin" href="https://alotamrin.ir" coords="171,126,133,160" shape="rect">
</map>
با کمک تگ area داخل تگ map همانطور که نواحی را مشخص میکنیم لینک ها را نیز تعیین میکنیم.
برای هر لینک title, href در نظر میگیریم تا هنگام قرار گرفتن موس کاربر بر روی ناحیه اون عنوان نمایش داده شود.
بیشتر بخوانید:تمرین طراحی جدول تخفیف
همانطور که در بخش قبلی توضیح دادیم برای لینک دار کردن نقشه ایران باید از نواحی استفاده کنیم.
اما تنظیم اعداد این ناحیه ها اگر به صورت دستی باشد کار بسیار سخت و وقت گیری خواهد بود.
با کمک وب سایت image-map.net میتوانیم این کار را به سادگی هرچه تمام تر انجام دهیم.
در صفحه اصلی وب سایت ابتدا باید تصویر نقشه را انتخاب نمایید.
به دو صورت این کار امکان پذیر میباشد یکی از طریق یک آدرس اینترنتی که مثلا از گوگل پیدا میکنید.
دوم از طریق انتخاب تصویر از روی سیستم خودتان که ما از این گزینه استفاده میکنیم.
همانطور که مشاهده میکنیم پس از انتخاب نقشه ایران از قسمت پایین نقشه میتوانید نواحی را تنظیم کنید.
فقط کافیه ابتدا ناحیه را active و سپس نوع شکل را انتخاب و با موس بر روی صفحه نقطه گذاری نمایید.
برای ایجاد لینک بر روی نقشه ایران پس از نقطه گذاری فیلد های title , link را تنظیم کنید.
گزینه Target برای این استفاده میشود که لینک پس از کلیک بر روی تب جدید باز شود یا خیر.
بیشتر تمرین کنید:تمرین نمایش دکمه های شبکه اجتماعی
در انتها پس از تنظیم نواحی دلخواه بر روی گزینه Show Me The Code کلیک نمایید.
کد html مربوط به کاری که انجام شد را به شما نمایش میدهد.
نمونه سورس کد برای تصویر نقشه ای که در ابتدا مقاله وجود دارد به صورت زیر میباشد:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test Validator </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="download.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Google" title="Google" href="http://google.com" coords="95,126,107,134,113,142,121,152,124,160,120,168,110,173,102,168,95,162,89,153,80,140,90,142,88,131" shape="poly">
<area target="_blank" alt="Mft" title="Mft" href="http://mftbuali.com" coords="171,126,133,160" shape="rect">
</map>
</body>
</html>
ما در این پست یاد گرفتیم که ایجاد لینک بر روی نقشه ایران در html را چگونه میتوانیم انجام دهیم.
که بدین صورت بود که از تگ map , area استفاده میکردیم و نواحی با شکل های مستطیل و poly را تنظیم میکردیم.
با کمک وب سایت image-map.net به سادگی هر چه تمام تر این کار را انجام دادیم و با چند کلیک ساده و تنظیم با موس به راحتی به خروجی html رسیدیم.
28 نوشته
نوشته های آموزشی الو تمرین
399 تمرین با جواب
تمرین های با جواب الو تمرین
4710 دانشجو
دانشجویان الو تمرین
86 دیدگاه
دیدگاههای ارسال شده در الو تمرین
صادقی –
خیلی روش خوبی بود حتما فیلمو ببینید