رفتن به مطلب

نقشه ایران با تفکیک شهرها ، فرمت SVG و بصورت ریسپانسیو


rahbar2

پست های پیشنهاد شده

1442003574251.png

 

 

سازگاری با جی کوئری ورژن ۱.۶.۴ و بالاتر

 

توجه: این فایل (نقشه ایران) بصورت رایگان عرضه شده و استفاده از آن در پروژه های مختلف (تجاری، دانشجویی یا …) آزاد و رایگان است ولی استفاده از آن برای کسب درآمد مستقیم (فروش و…) غیرمجاز میباشد.

 

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

  • Like 5
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 8 ماه پیش ...

دوستان من یه سایت خبری دارم میخوام چنین چیزی براش بزارم برای (وردپرس) مثلا کسی موس رو روی کرمانشاه برد اخبار کرمانشاه رو نمایش بده چطوری هست ؟

الان خبرگذاری مهر هم چنین چیزی داره از این تو قالب بکار ببریم چطوری هست ؟

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن


@irmacfa

نقل قول

دوستان من یه سایت خبری دارم میخوام چنین چیزی براش بزارم برای (وردپرس) مثلا کسی موس رو روی کرمانشاه برد اخبار کرمانشاه رو نمایش بده چطوری هست ؟

الان خبرگذاری مهر هم چنین چیزی داره از این تو قالب بکار ببریم چطوری هست ؟

درود.

شما با استفاده از همین پروژه ای که دوست گرامی استارتر قرار دادن می تونید چنین چیزی ایجاد کنید اما نیاز خواهید داشت جهت اجرای بهتر و جلوگیری از تداخلات احتمالی :

  1. یک فایل جداگانه در فرمت php ایجاد کنید و اون رو به عنوان یک قالب برگه (Page Template) در نظر بگیرید. 
  2. سپس کدهای پروژه را داخل فایل جدید اضافه کنید و تمامی فایل های مورد نیاز JS و CSS را به نحو صحیح در همان برگه پیوند دهید. (تا صرفا در همان صفحه بارگذاری شوند. می توانید به صورت مستقیم در همان فایل کدهای مربوط به بارگذاری منابع را وارد کنید)
  3. لینک مربوط به استان ها را با لینک دسته بندی اخبار در سایتتون جایگزین کنید.
  4. سپس یک برگه جدید در پیشخوان ایجاد کنید و قالب جدیدی که برای برگه ایجاد کردید را در هنگام افزودن برگه انتخاب کنید.
  5. اکنون می توانید لینک برگه را در فهرست سایت اضافه کنید و در اختیار کاربرانتان قرار دهید.

در مرحله 3 منظور تغییر لینک لیست استان هایی هست که در سمت راست پروژه لیست شده و کلا کاری به نقشه نداشته باشید!

 

اما شما فرمودید :

نقل قول

مثلا کسی موس رو روی کرمانشاه برد اخبار کرمانشاه رو نمایش بده چطوری هست ؟

فایل موجود در تاپیک اول را دریافت و بررسی کنید. اگر خود نقشه به صورت JS بود و با Hover قابلیت تغییر رنگ داشت ، می تونید با استفاده از دستورات جاوا اسکریپت On Hover تعیین کنید که در صورت رفتن موس روی یکی از قسمت های نقشه ، لینک دسته بندی مربوطه باز بشه . همچنین می تونید با استفاده از کدهای دریافت آخرین مطالب هر دسته بندی ، برای هر شهر یک DIV تهیه کنید که بتونید در همون صفحه نقشه ، بدون انتقال به صفحه دیگه ، فقط با تابع جاوا اسکریپت On Hover ، آخرین مطالب هر بخش رو به صورت Hover نمایش بدید که نیازمند چند خط استایل هست .

اما اگر قصد داشتید چنین طرحی رو روی خوده نقشه پیاده کنید ، می تونید عنصر مربوط به هر استان رو لینک بدید ، یا برای هر عنصر استان در نقشه با تابع on click جاوا اسکریپت لینک رو تعیین کنید.

  • Like 4
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 1 year پیش...

سلام 

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

لطفاً راهنمایی کنید .

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن
در ۱ ساعت قبل، e.rahmati856 گفته است :

سلام 

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

لطفاً راهنمایی کنید .

 

درود.

شما اگه می خواهید نام کشورها قابل کلیک باشه، باید اول فایل iranmap.html که دانلود کردید رو با نرم افزار نوت پد یا ترجیحا NotePad++ باز کنید. کد جاوا اسکریپت زیر رو حذف کنید :

<script type="text/javascript">
            $(function() {
                $('#IranMap .map .province path').click(function() {
                    var province = $(this).attr('class');
                    var provinceName = $('#IranMap .list>ul>li>ul>li.' + province + ' a').html();
                    if (provinceName) {
                        $('#IranMap .city').html('نمایش شهرهای استان ' + provinceName);
                    }
                });
                $('#IranMap .list li.province>ul>li>a').click(function(e) {
                    var provinceName = $(this).html();
                    if (provinceName) {
                        $('#IranMap .city').html('نمایش شهرهای استان ' + provinceName);
                    }
                    e.preventDefault();
                });
            });
        </script>

 

بعد از حذف کد بالا، در انتهاب فایل، کدهای لینک ها وجود داره. مثلا :

<li class="tehran"><a href="#tehran">تهران</a></li>

که شما باید بجای #tehran یک لینک کامل وارد کنید :

<li class="tehran"><a href="https://20script.ir">تهران</a></li>

 

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

 

فایل های جاوا و استایل های مورد نیازش رو هم آپلود کنید داخل هاستتون کنار فایل iranmap.html ، کار تموم هست .

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 2 هفته پیش...

سلام من برای یک سایت پزشکی گذاشتم اوکیه ولی چند باری امتحان کردم وقتی میرم رو نقطه مورد نظر هیچ اطلاعاتی بهم نداده اما بعد خودش درست میشه دلیلش چیه؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن
در 5 ساعت قبل، bestcar گفته است :

سلام من برای یک سایت پزشکی گذاشتم اوکیه ولی چند باری امتحان کردم وقتی میرم رو نقطه مورد نظر هیچ اطلاعاتی بهم نداده اما بعد خودش درست میشه دلیلش چیه؟

درود

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

اگر اطلاعات خاصی مدنظرتون هست که روی نقشه نمایش داده بشه باید کد نقشه رو دستکاری کنید. یا اگه می خواهید استان ها قابل کلیک باشند و به یک صفحه دیگه ارجاع داده بشن که می تونید این پاسخ رو انجام بدید :

 

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام و عرض ادب خدمت دوستان و جناب masih

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

چکار باید کرد ممنون میشم راهنمایی کنید 

سپاسگزارم 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن
در 5 ساعت قبل، sajads گفته است :

موقعی که موس میره رو هر استان به صورت تولتیپ نام استان نمایش داده بشه ولی با این تفاوت که اگر رو نام استان کلیک کردیم بره تو یه آدرس خاص 

درود.

نیاز به تغییرات در جاوا اسکریپت داره. باید جاوا اسکریپت فعلی داخل فایل رو حذف کنید و بجاش این رو قرار بدید. جایی که باید لینک مربوط به اون استان را وارد کنید رو کامنت زدم جلوش و به فارسی اسم اون استان رو نوشتم تا متوجه بشید کجا رو باید لینک بدید. دقیقا بجای لینک گوگل باید لینک مورد نظر خودتون رو وارد کنید. این برای کل استان ها :

        <script type="text/javascript">
            $(function() {
                $('#IranMap .map .province .alborz').click(function() {
                    window.open("https://google.com"); // لینک البرز
                });
				$('#IranMap .map .province .ardabil').click(function() {
                    window.open("https://google1.com"); // اردبیل
                });
				$('#IranMap .map .province .azerbaijan-east').click(function() {
                    window.open("https://google2.com"); // آذربایجان شرقی
                });
				$('#IranMap .map .province .azerbaijan-west').click(function() {
                    window.open("https://google3.com"); // آذربایجان غربی
                });
				$('#IranMap .map .province .bushehr').click(function() {
                    window.open("https://google4.com"); //بوشهر
                });
				$('#IranMap .map .province .chahar-mahaal-bakhtiari').click(function() {
                    window.open("https://google5.com"); // چهارمحال بختیاری
                });
				$('#IranMap .map .province .fars').click(function() {
                    window.open("https://google6.com"); // فارس
                });
				$('#IranMap .map .province .gilan').click(function() {
                    window.open("https://google7.com"); // گیلان
                });
				$('#IranMap .map .province .golestan').click(function() {
                    window.open("https://google8.com"); // گلستان
                });
				$('#IranMap .map .province .hamadan').click(function() {
                    window.open("https://google9.com"); // همدان
                });
				$('#IranMap .map .province .hormozgan').click(function() {
                    window.open("https://google0.com"); // هرمزگان
                });
				$('#IranMap .map .province .zanjan').click(function() {
                    window.open("https://google0.com"); // زنجان
                });
				$('#IranMap .map .province .yazd').click(function() {
                    window.open("https://google0.com"); // یزد
                });
				$('#IranMap .map .province .tehran').click(function() {
                    window.open("https://google0.com"); // تهران
                });
				$('#IranMap .map .province .sistan-baluchestan').click(function() {
                    window.open("https://google0.com"); // سیستان بلوچستان
                });
				$('#IranMap .map .province .semnan').click(function() {
                    window.open("https://google0.com"); // سمنان
                });
				$('#IranMap .map .province .qom').click(function() {
                    window.open("https://google0.com"); // قم
                });
				$('#IranMap .map .province .qazvin').click(function() {
                    window.open("https://google0.com"); // قزوین
                });
				$('#IranMap .map .province .mazandaran').click(function() {
                    window.open("https://google0.com"); // مازندران
                });
				$('#IranMap .map .province .markazi').click(function() {
                    window.open("https://google0.com"); // مرکزی
                });
				$('#IranMap .map .province .lorestan').click(function() {
                    window.open("https://google0.com"); // لرستان
                });
				$('#IranMap .map .province .kurdistan').click(function() {
                    window.open("https://google0.com"); // کردستان
                });
				$('#IranMap .map .province .kohgiluyeh-boyer-ahmad').click(function() {
                    window.open("https://google0.com"); // کهگلویه بویراحمد
                });
				$('#IranMap .map .province .khuzestan').click(function() {
                    window.open("https://google0.com"); // خوزستان
                });
				$('#IranMap .map .province .khorasan-south').click(function() {
                    window.open("https://google0.com"); // خراسان جنوبی
                });
				$('#IranMap .map .province .khorasan-razavi').click(function() {
                    window.open("https://google0.com"); // خراسان رضوی
                });
				$('#IranMap .map .province .khorasan-north').click(function() {
                    window.open("https://google0.com"); // خراسان شمالی
                });
				$('#IranMap .map .province .kermanshah').click(function() {
                    window.open("https://google0.com"); // کرمانشاه
                });
				$('#IranMap .map .province .kerman').click(function() {
                    window.open("https://google0.com"); // کرمان
                });
				$('#IranMap .map .province .isfahan').click(function() {
                    window.open("https://google0.com"); // اصفهان
                });
				$('#IranMap .map .province .ilam').click(function() {
                    window.open("https://google0.com"); // ایلام
                });
            });
        </script>

فقط باید لینک رو تغییر بدید.

این هم فایل کامل همراه با این تغییرات :

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
  • Like 4
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام 

دمت گرم masih

خیلی زحمت کشیدی خود فایل رو هم ویرایش شده فرستادی :)

ممنونم ازت 

راستی کسی رو سراغ ندارین با پرداخت هزینه نقشه یه استان رو برام به همین شکل در بیاره مثل نقشه ایران و شهرستانهاشو جدا کنه دقیقا مثل نقشه ایران 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 3 ماه پیش ...

سلام من این نقشه خیلی عجله ای لازم دارم

میخام بزارم تو یه سایتم 

ولی اون لیست کنارش رو نمیخام اونو با کمک های بالاتون درست کردم 

 

فقط یه مشکلی که هست اینه که وقتی لیست رو حذف میکنم اون TipToll همون اسم شهر ها با رفتن موس روی استان دیگه نمیاد

 

ممنون میشم بگید چکار کنم یا فایل ادیت شده رو بفرستین

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن
در 12 ساعت قبل، jirun@mail-share.com گفته است :

سلام من این نقشه خیلی عجله ای لازم دارم

میخام بزارم تو یه سایتم 

ولی اون لیست کنارش رو نمیخام اونو با کمک های بالاتون درست کردم 

 

فقط یه مشکلی که هست اینه که وقتی لیست رو حذف میکنم اون TipToll همون اسم شهر ها با رفتن موس روی استان دیگه نمیاد

 

ممنون میشم بگید چکار کنم یا فایل ادیت شده رو بفرستین

درود.

اون لیست کنار نقشه برای عنوان استان ها و جزایر هم استفاده میشه. پس وجودش ضروریه.

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

تنها کاری که می تونید بکنید اینه که لیست کناری رو با استفاده از css مخفی کنید تا فقط نقشه رو نمایش بده اما همچنان نام ها رو هم نمایش بده. نمونه زیر رو دانلود و تست کنید:

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن
در 9 ساعت قبل، jirun@mail-share.com گفته است :

چطور این رنگ های نقشه رو تغییر بدم ؟!

درود.

بخش های مختلف این نقشه رو میگم، تعیین نوع رنگ و ویرایش کردنش با خودتون! فایل iranmap.min.css در پوشه ی css رو باز کنید. بخش بخش میگم، خودتون پیدا و ویرایش کنید. در این مورد شما در اکثر موارد فقط باید fill رو ویرایش کنید و کد رنگ رو جایگزین کنید.

 

1 . خط سفید و فاصله بین استان ها:

#IranMap .map .border path,#IranMap .map .island path{fill:#fff}

 

2 . رنگ پس زمینه استان ها:

#IranMap .map .province path{fill:#999}

 

3 . رنگ Hover پس زمینه استان ها (در حال حاضر رنگ قرمزی که با رفتن موس روی استان ها مشاهده می کنید)

#IranMap .map .province path:hover,#IranMap .map .island path:hover,#IranMap .map .province path.hover,#IranMap .map .island path.hover{fill:#c33a2c!important;cursor:pointer}

 

4 . رنگ دریاها و دریاچه ها:

#IranMap .map .sea path,#IranMap .map .lake path{fill:#6caed8}

 

5 . تغییر رنگ پس زمینه تول تیپ (منظور همون پس زمینه اسم استان ها و جزایر هست که با رفتن موس روی موارد مختلف نمایش داده میشه که در حالت فعلی مشکی هست ولی می تونید تغییرش بدید.) فقط دقت کنید توی این مورد فقط قسمت background-color رو باید تغییر بدید:

#IranMap .show-title{display:none;position:absolute;background-color:#333;color:#fff;margin:0!important;padding:0 5px;text-align:center;line-height:26px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;opacity:.8}

 

همه موارد رو گفتم، باز اگه قسمتی بود که پیداش نکردید بگید.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 14 ساعت قبل، Masih گفته است :

درود.

بخش های مختلف این نقشه رو میگم، تعیین نوع رنگ و ویرایش کردنش با خودتون! فایل iranmap.min.css در پوشه ی css رو باز کنید. بخش بخش میگم، خودتون پیدا و ویرایش کنید. در این مورد شما در اکثر موارد فقط باید fill رو ویرایش کنید و کد رنگ رو جایگزین کنید.

 

1 . خط سفید و فاصله بین استان ها:


#IranMap .map .border path,#IranMap .map .island path{fill:#fff}

 

2 . رنگ پس زمینه استان ها:


#IranMap .map .province path{fill:#999}

 

3 . رنگ Hover پس زمینه استان ها (در حال حاضر رنگ قرمزی که با رفتن موس روی استان ها مشاهده می کنید)


#IranMap .map .province path:hover,#IranMap .map .island path:hover,#IranMap .map .province path.hover,#IranMap .map .island path.hover{fill:#c33a2c!important;cursor:pointer}

 

4 . رنگ دریاها و دریاچه ها:


#IranMap .map .sea path,#IranMap .map .lake path{fill:#6caed8}

 

5 . تغییر رنگ پس زمینه تول تیپ (منظور همون پس زمینه اسم استان ها و جزایر هست که با رفتن موس روی موارد مختلف نمایش داده میشه که در حالت فعلی مشکی هست ولی می تونید تغییرش بدید.) فقط دقت کنید توی این مورد فقط قسمت background-color رو باید تغییر بدید:


#IranMap .show-title{display:none;position:absolute;background-color:#333;color:#fff;margin:0!important;padding:0 5px;text-align:center;line-height:26px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;opacity:.8}

 

همه موارد رو گفتم، باز اگه قسمتی بود که پیداش نکردید بگید.

دمت گرم کارت درسته داداش ❤️❤️❤️❤️👌🏻

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن
در 5 ساعت قبل، jirun@mail-share.com گفته است :

بعد یه سوال دیگه این فضای کناری نقشه رو چطور حذف کنم که مربوط به لیست بود ؟؟

قسمتی که نقشه داخلش قرار گرفته، یک محدوده ی تمام عرض یا width: 100% هست که خوده نقشه با استفاده از دستور text-align در سمت چپ قرار گرفته. زمانی که داخل قالب مورد نظرتون ازش استفاده کنید، حالت نمایش بهتر خواهد بود.

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

#IranMap .map{display:block;float:left;width:50%;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}

اگه می خواهید نقشه سمت راست باشه ، text-align:left رو به این تغییر بدید:

text-align:right

و برای وسط چین کردن :

text-align:center

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 10 ماه پیش ...
  • مدیر انجمن
در در 15 دی 1398 در 15:56، eaterafi1987 گفته است :

با سلام

 

اگر بخواهیم اسامی استان ها نمایش داده بشه باید چیکار کرد؟

درود.

روی خود نقشه؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...