Вход

Просмотр полной версии : <map>, <area>, onclick, z-index

mimimi
29.03.2012, 06:56
Карта-изображение, которая реагирует на клики
<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">
?
Или такие вещи делаются совсем по другому?
mimimi
30.03.2012, 04:48
Готово: выбираем Площадь Ильича, затем Авиамоторную.
<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>Может подкинете к этому говнокоду палок рассказав как создавать картинки непосредственно перед выводом? А то не понятно сколько их резервировать в случае маршрута от конечной до конечной.