Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > при клике одно изображение поверх другого


Автор: studentigor 19.5.2011, 21:17
всем привет.
Нужно сделать так чтоб при клике у меня на карте загоралось то место по которому кликнул, ну клики будут по определенным местам,
в на которые должна подгружатся гивка.
вот так создается элемент гивки 
Код

for (i = 0; i < 300; i++)
    if (metro[i]) {
        mimg[i] = document.createElement("img");
        mimg[i].src = "img/pp.gif";
        mimg[i].style.position = "absolute";
        mimg[i].style.left = metro[i][2];
        mimg[i].style.top = metro[i][3];
        mimg[i].style.width = 111;
        mimg[i].style.height = 111;
        mimg[i].style.cursor = "hand";
        mimg[i].onclick = (function(idx) { return function() { checkpoint(idx) }; })(i);
    }

metro[i][2] ,metro[i][3] - эти элементы отвечают за координатытого места где должна загорется лампочка(гивка).
а вот кусок хтмл с изображением(каотой), на которой все и происходит.
Код

<div id="metromap" name="mapp" style="position: relative; top: 0px; left: 0px; z-index:0;">
    <img usemap="#map" id="nana" src="img/map_2009b.gif" border=0>
</div>


Я клацаю по карте, инициализируются координаты(это все нормально срабатывает), но вот гивка не загорается на нужном месте, она вобще не на изображении(карте), а рядом.
вот собственно вывод этой гивки 
Код

a.metromap = documet.getElementById("mapp");//если id = nana - вобще нигде не горит, 
    a.metromap.appendChild(mimg[map_sel]);

и я не знаю что делать, думал что при id = nana эта гивка получается за самой карто, пробывал покрутить с z-index, не то.
Подскажите пожалуйста как можно сделать.

Спасибо

Автор: Котокобра 20.5.2011, 03:15
Цитата(studentigor @  19.5.2011,  21:17 Найти цитируемый пост)
documet.getElementById("mapp")


может быть, documet.getElementById("metromap")

Автор: studentigor 20.5.2011, 09:37
Не тут не в id дело
Код

<div id="mapp" name="mapp" style="position: relative; top: 0px; left: 0px; z-index:0;">
    <img usemap="#map" id="nana" src="img/map_2009b.gif" border=0>
</div>

Вот так  - не срабатывает.
гивка размещяется не на рисунке, а в блоке.
А если брать 
Код

document.getElementById("nana");

ну чтобы разместить на карте - вобще не появляется.
Незнаю что и делать.

Автор: Котокобра 20.5.2011, 15:49
честно говоря, не представляю, что там может не работать...

Код

<body>
<script >
function fn(x){
//    alert(x);
    var e = document.createElement('div');
    e.style.position = 'absolute';
    e.style.top = (x-1)*61 + 15 + 'px';
    e.style.left = '20px';
    e.style.width = '50px';
    e.style.height = '40px';
    e.style.backgroundColor = '#cccccc';
    document.getElementById('d').appendChild(e);
}
</script>

<div id="d" style="position:relative">
<img src="коллаж/shar.jpg" width="392" height="556" border="0" usemap="#Map" />
<map name="Map">
  <area shape="rect" coords="2,2,390,65" href="javascript:fn(1)">
  <area shape="rect" coords="2,63,390,126" href="javascript:fn(2)">
  <area shape="rect" coords="2,124,390,187" href="javascript:fn(3)">
  <area shape="rect" coords="2,185,390,248" href="javascript:fn(4)">
  <area shape="rect" coords="2,246,390,309" href="javascript:fn(5)">
  <area shape="rect" coords="2,307,390,371" href="javascript:fn(6)">
  <area shape="rect" coords="2,369,390,432" href="javascript:fn(7)">
  <area shape="rect" coords="2,430,390,493" href="javascript:fn(8)">
  <area shape="rect" coords="2,491,390,554" href="javascript:fn(9)">
</map>
</div>

</body>

Автор: studentigor 20.5.2011, 20:14
Котокобра - СПАСИБО.
Я правда так и не понял в чем была бочина, но меняя твои данные на свои у меня все начало работать.
 smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)