• 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
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ


پیام‌های این موضوع
ساخت نقشه بدون فلش - توسط hamid_80386 - ۱۳۹۱ شهریور ۱۳, ۱۱:۴۸ ب.ظ
RE: ساخت نقشه بدون فلش - توسط farhadfery - ۱۳۹۱ شهریور ۱۴, ۱۲:۵۶ ق.ظ
RE: ساخت نقشه بدون فلش - توسط hamid_80386 - ۱۳۹۱ شهریور ۱۴, ۰۱:۰۱ ق.ظ
RE: ساخت نقشه بدون فلش - توسط vejmad - ۱۳۹۱ شهریور ۱۴, ۱۰:۵۸ ق.ظ
RE: ساخت نقشه بدون فلش - توسط hamid_80386 - ۱۳۹۱ شهریور ۱۴, ۰۳:۰۳ ب.ظ
RE: ساخت نقشه بدون فلش - توسط ali786 - ۱۳۹۱ شهریور ۱۴, ۰۳:۴۵ ب.ظ
RE: ساخت نقشه بدون فلش - توسط hamid_80386 - ۱۳۹۱ شهریور ۱۴, ۰۴:۲۲ ب.ظ
RE: ساخت نقشه بدون فلش - توسط eskafild - ۱۳۹۲ دى ۰۲, ۰۳:۱۳ ق.ظ
RE: ساخت نقشه بدون فلش - توسط hamid_80386 - ۱۳۹۲ دى ۰۳, ۰۳:۴۸ ق.ظ
RE: ساخت نقشه بدون فلش - توسط eskafild - ۱۳۹۲ دى ۰۳, ۰۱:۰۱ ب.ظ

پرش به انجمن:


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