سوال - hide و 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>