Javascript-форум - <map>, <area>, onclick, z-index

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - <map>, <area>, onclick, z-index (https://javascript.ru/forum/dom-window/26956-map-area-onclick-z-index.html)

<map>, <area>, onclick, z-index

Карта-изображение, которая реагирует на клики

<img src="http://yandex.st//metro-data/maps/moscow-blur.gif?1.0.25" usemap="#metromap">
<map id="metromap" name="metromap">
<area id="st122" shape="rect" coords="455,361,537,370" href='#' onclick="JavaScript:alert('ploshad ili4a')">
<area id="st130" shape="rect" coords="508,308,578,317" href='#' onclick="JavaScript:alert('aviamotornaya')">

Как должен выглядеть код вместо alert, чтобы после выбора двух точек он выводил одну картинку поверх другой:

<img style="position: absolute; z-index:2; top: 10px; left: 10px;" src="http://yandex.st/metro-data/stages/122-130.gif?1.0.25">
<img style="position: absolute; z-index:1; top: 10px; left: 10px;" src="http://yandex.st//metro-data/maps/moscow-blur.gif?1.0.25">

?
Или такие вещи делаются совсем по другому?

Готово: выбираем Площадь Ильича, затем Авиамоторную.

<html><head><script type="text/javascript">

  var start="z"; var end="z";
  function ххх(xx)
   {if (start=="z") 
     {start=xx;
      document.images[1].src="http://yandex.st/metro-data/stations/"+start+".ru.gif?1.0.25"; 
     }  
    else 
     {end=xx;
      document.images[2].src="http://yandex.st/metro-data/stages/"+start+"-"+end+".gif?1.0.25";        
      document.images[3].src="http://yandex.st/metro-data/stations/"+end+".ru.gif?1.0.25";   
     }
   }
</script></head><body>

<img style="position: absolute; z-index:5; top: 10px; left: 10px;" src="http://yandex.st/metro-data/stations/119.ru.gif?1.0.25" usemap="#metromap" alt="пустая картинка">

<map id="metromap" name="metromap">
<area id="st122" shape="rect" coords="455,361,537,370" alt="ploshad ili4a" href='#' onclick="ххх('122')">
<area id="st130" shape="rect" coords="508,308,578,317" alt="aviamotornaya" href='#' onclick="ххх('130')">

<img  style="position: absolute; z-index:2; top: 10px; left: 10px;" src="">
<img  style="position: absolute; z-index:2; top: 10px; left: 10px;" src="">
<img  style="position: absolute; z-index:2; top: 10px; left: 10px;" src="">

<img style="position: absolute; z-index:1; top: 10px; left: 10px;" src="http://yandex.st//metro-data/maps/moscow-blur.gif?1.0.25">

</body></html>

Может подкинете к этому говнокоду палок рассказав как создавать картинки непосредственно перед выводом? А то не понятно сколько их резервировать в случае маршрута от конечной до конечной.