• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت نقشه بدون فلش
#1
Lightbulb 
سلام

این نقشه رو ببینید

حتماً افسوس میخورید که چرا با فلش ساخته شد و html نیست!!

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

شاید این مطلب رو ندونید که با html میشه همچین نقشه ای ساخت:

اینجا رو نگاه کنید:

Create Html Map

تگ map در html برای همین کار ساخته شده،
این تگ یک تگ فرزند داره بنام area که توی اون باید بیاید تو یه مختصاتی از نقشه یه shape بسازید، shape های قابل قبول دایره، مستطیل و چند ضلعی هست، در مورد دایره و مستطیل چون با یه مختصات و شعاع و یا ضلع ساده درست میشه حرفی نیست؛
اما شاید بگید برای ایجاد یک استان توی یک نقشه باید یک چند ضلعی با ده ها ضلع ساخت، خب راستم میگید، همین کار رو باید کرد که اگه ریاضی دان نباشید، شاید اصلاً نتونید دستی همچین کاری کنید!!

اما اینم راه حل داره Shy

حتماً تا حالا نرم افزار های کوچیک شرکت معروق CofeeCup رو دید!
این بار هم CofeeCup یه ابزار سودمند داره:
CoffeeCupImageMapper ابزاری هست که به شما اجاره میده یه عکس رو بندازید تو زمینه (مثلاً نقشه ایران) و روی اون برای هر استان با ابزارهای خاص خودش چند ضلعی بکشید و بعبارتی استان ها رو در بیآرید Shy

این نرم افزار دارای 15 روز TRIAL هست Cool

همچنین میتونید از ابزار آنلاین: Image Map استفاده کنید.

فقط میمونه یه مسأله که وقتی میرید روی یه استان رنگ استان عوض شه،
که اونم که فتوشاپ و جاوااسکریپت یا جی کوئری Wink
بیاید برای هر استان رو تو همون size کل نقشه ایران در بیارید، دقیقاً همونجایی که هست، یعنی بقیه شهر ها رو با فتوشاپ از دور اون استان حذف کنید، بعد رنگ اون استان رو تغییر بدید و ذخیره کنید...

حالا نکته اینجاست که شما میتونید به هر نقشه (یعنی تگ map) چند عکس اختصاص بدید، یعنی تو تگهای img تون یه property میزارید به صورت زیر:
کد:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"
خاصیت usemap همه عکس ها باید برابر خاصیت name تگ map تون باشه،
و بعد نکته اینه که شما میاید مثلاً z-index عکس اصلی رو 100 میزارید و z-index بقیه عکس ها رو 100- ، بعد میآید با جاوااسکریپت میگید که مثلاً وقتی موس رفت روی تگ area با id فلان، z-index تصویر 2 بشه 200
تصویر 2 هم که مثلاً عکس استان اصفهان هست و سایزش هم که اندازه تصویر اصلی و دور استان هم که transparent هست، به این ترتیب تصویر 2 میوفته روی تصویر 1، منتهی اطراف استان اصفهان تصاویر تصویر 1 نشون داده میشه Shy
وقتی هم که موس از رو area استان اصفهان با id فلان رفت کنار، دوباره z-index تصویر 2 میشه 100- Rolleyes

شما همچنین میتونید بجای z-index از خاصیت display استفاده کنید و یا از رویداد های fadeIn و fadeOut در جی کوئری...

موفق باشید Heart
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
#2
شما نقشه ایران را به این صوزت که گفتید اماده کردید؟ می شه بگذارید اینجاBig Grin اماده خوری کنیم.
خدایا، این دنیا را بیهوده نیافریدی.
  پاسخ
تشکر شده توسط :
#3
من آماده کردم، منتهی اونی که آماده کردم برای شرکت خاصی هست و حق امتیازش مربوط به اونا Wink

اصولش رو گفتم که خیلی هم راحت هست، خیلی وقت نمیبره!
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : farhadfery undefined
#4
بخاطر زحمت و جامع و متنوع بودن مطالب ازت تشکر کردم.
ولی بله این از قدیم در HTML بوده. معلوم میشه تاحالا یه رفرنس HTML رو کامل نخوندیدا Big Grin
من بعکس تقریبا همیشه اول اون زبان، کتابخانه، و پروتکل و خلاصه هرچیزی رو که باهاش سروکار دارم کامل میخونم که بدونم چی داره و چی نداره.
ولی بیشتر افراد دیگه در حین کار عملی و نیاز و خورده خورده یاد میگیرن که ابزار کارشون چه قابلیت هایی داره.
خب این دو روش متفاوت بید. نمیگم کدوم بهتره یا بدتر.

البته از فلش هم درجاهاییکه نیاز به قابلیت های تعاملی و گرافیکی بیشتری هست استفاده میشه. ولی الان با پیشرفت امکانات و سازگاری و راحتی ابزارهای DHTML، استفاده از فلش دیگه خیلی کمتر شده و باید حتی الامکان ازش پرهیز کرد. این چند وقته هم که فلش رسما برای پیوستن به تاریخ معرفی شده! دیرتر یا زودتر تقریبا انتظار منقرض شدنش میره.
  پاسخ
تشکر شده توسط : hamid_80386
#5
نقل قول:معلوم میشه تاحالا یه رفرنس HTML رو کامل نخوندیدا

دقیقاً همینطوره، من معمولاً مباحث ابتدایی رو خوب میخونم، ولی جلوتر که میره زیاد اهمیت نمیدم، چون به قول شما تو کار در میآد
البته نه که نخوام بخونم، نمیرسم که بخونم Wink هر چی هم سن آدم میره بالاتر این نرسیدنه بیشتر میشه Undecided

ولی خب این بحث رو صرفاً برای یکی دو تا از بچه ها که قبلاً پست گذاشته بودن و اون موقع نرسیدم جامع جواب بدم گذاشتم Rolleyes
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :
#6
Wink 
سلام
دوستان قبلا همچین چیزی را دیده و بلافاصله ذخیره کرده بودم برای روز مبادا Cool
خدمت دوستان خصوصا آقا فرهاد :

http://ali786.persiangig.com/other/IranHtmlMap.zip


.html   IranHtmlMap.html (اندازه 7.23 KB / تعداد دانلود: 30)


فایل‌های پیوست تصاویر بندانگشتی
   
  پاسخ
تشکر شده توسط : farhadfery hamid_80386 shgninc
#7
خوبه، فقط خیلی کوچیکه، ولی شد نمونه آموزشی واسه مطالب بالا

ممنون Rolleyes
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :
#8
آقای عباسی امکانش هست یه نمونه بزارید در مورد رنگ هاش؟ من تو قرار دادن رنگ مشکل پیدا کردم! بی زحمت یه فایل نمونه!
تشکر
  پاسخ
تشکر شده توسط :
#9
رنگ که دیگه به اچ تی ام ال ربط نداره، فایل png رو که برای شهر خاصی میبرید با یه رنگ دیگه بزارید...
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط :
#10
(۱۳۹۲ دى ۰۳, ۰۳:۴۸ ق.ظ)hamid_80386 نوشته: رنگ که دیگه به اچ تی ام ال ربط نداره، فایل png رو که برای شهر خاصی میبرید با یه رنگ دیگه بزارید...

یعنی به این صورت نیست که موس رو روی هر شهر بردیم اونجا رنگش عوض بشه؟
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان