سوال - hide و show کردن عکس

[ar min]

سلام
۲ تا سواله سخت .
حتی توضیح دادن اش هم سخته .
Contact Us
تو این لینک یک سری مکان تو نقشه مشخص شده . و یک لیست از مکان ها (Locations List) پایین نقشه که با کلیک روی اسم مکان ها اون محل رو نقشه نشون داده میشه .
میخوام به جای استفاده از نقشه گوگل از یک سری عکس استفاده کنم -

به این صورت که اسامی محل ها (location lists) + آدرس اشون تو خط های جدا از هم زیر هم نمایش داده بشه . و با کلیک روی هر کدوم - بدون این که صفحه دوباره لود بشه نقشه اون محل که به صورت عکس هست نشون داده بشه .

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

مشکل ام اینه که اصلان نمیدونم دنبال چی بگردم برای این کار -

تعداد مکان ها زیاده - شاید حدوده ۲۰ ۳۰ تا محل تو شهر های مختلف - به خاطر همین نمیتونم از مپ گوگل که الان تو سایت هست استفاده کنم .
_________________________________________
قسمت دوومی که میخام انجام بدم اینه :::

چون تعداد مکان ها زیاده چشپ یوزر در میاد اگه بخوا همرو با چشم تک تک ببینه . میخام به شهر تفکیک بشن این مکان ها .

برای مثال : اول اسامی شهر ها نوشته بشه .
تهران اصفهان شیراز مشهد
با کلیک روی هر کدوم لیست مکان هایی که تو اون شهر هست ظاهر بشه . و بعد از کلیک روی هر مکان عکس اش show بشه .

[abbk]

چند راه وجود داره و من یکیش رو میگم :

- گذاشتن یک عکس با آدرس فایل کاملا" شفاف و ترجیحا" gif مثلا" به ابعاد 100x100 پیکسل

<img id="mapviewer" src="blank.gif" width=100 height=100 />

- کنار هم گذاشتن عکس تمام منطقه ها (برای کار کردن اسکریپت نوشته شده توسط من به ترتیب شماره از چپ به راست) کنار هم و ذخیره بعنوان یک عکس واحد برای هر شهر مثلا" در فرمت jpg (سایز هر منطقه طبق سایز عکسی که در کد گذاشته اید در اینجا من 100x100 رو مثال زدم که مثلا" اگر برای تهران 5 منطقه و برای اصفهان 3 منطقه باشد عکس تهران میشود 500x100 و اصفهان 300x100 پیکسل)
- نوشتن تابعی برای جوا اسکریپت عکس شهر در خواستی را در پسزمینه عکس قرار گرفته در کد اچ تی ام ال قرار دهد و با تغییر موقعیت پسزمینه بین مناطق سویچ کند.

function goToPosition(city,position){
    document.getElementById('mapviewer').style.backgroundImage = 'images/'+city+'.jpg';
    document.getElementById('mapviewer').style.backgroundPosition = (position*100)+'px 0';
}

- نوشتن لیست شهر ها و منطقه ها (میتونید برای بهتر بودن با کلیک روی هر شهر منطقه های اون نمایش در بیاد)
- اختصاص کد جاوا اسکریپت برای هر منطقه

<p>
  <h2>موقعیت های شهر تهران</h2><br>
  <a href="javascript:goToPosition('tehran',0)">شهر تهران - موقعیت اول</a><br>
  <a href="javascript:goToPosition('tehran',1)">شهر تهران - موقعیت دوم</a><br>
  <a href="javascript:goToPosition('tehran',2)">شهر تهران - موقعیت سوم</a><br>
  <a href="javascript:goToPosition('tehran',3)">شهر تهران - موقعیت چهارم</a><br>
  <a href="javascript:goToPosition('tehran',4)">شهر تهران - موقعیت پیجم</a>
</p>
<p>
  <h2>موقعیت های شهر اصفهان</h2><br>
  <a href="javascript:goToPosition('esfahan',0)">شهر اصفهان - موقعیت اول</a><br>
  <a href="javascript:goToPosition('esfahan',1)">شهر اصفهان - موقعیت دوم</a><br>
  <a href="javascript:goToPosition('esfahan',2)">شهر اصفهان - موقعیت سوم</a><br>
</p>