HTML+CSS+JavaScript

Всем привет!!!
Создал карту с помощью map, на ней распологаются объекты, при наведении на объект выходит подсказка (картинка с надписью). Это все нормально работает, но почему то карта сдвигается вниз при появлении подсказки.
Вот код

<style> #rep {visibility:hidden; display:inline; position:relative; top:635px; left:699px; border:1px solid red; background:url("i/img_podsk.jpg") left top no-repeat;} </style> <map name="Map">       <area shape="poly" coords="690,676,585,621,624,567,714,602,714,666,704,678" href="#" onMouseOver="repl('rep');" onmouseOut="div_setTime('rep');"> </map> <td colspan="4" style="vertical-align:top;">     <div style="width:959px;">         <div style="display:block; float:left;">                                         <!-- это подсказка -->             <img id="rep" src="i/img_podsk.jpg" width="189" height="40" />                                         <!-- Карта на которой находятся объекты -->             <img src="i/center_cont.jpg" width="937" height="955" usemap="#Map" />         </div>     </div> </td>

Прикрепил картинку (как нужно сделать)

А вот что происходит сейчас

А вот что происходит сейчас
Прикерпил картинку!!!
Если нужно могу весь html файл прикрепить
А да забыл сказать, карта находится в центре окна браузера. Так что position:absolute; отпадает. Сделал через relative карта смещается вниз.
Помогите плиз

Кто нибудь помогите. Знаю точно что влеяет картинка подсказка, пробывал поставить после карты, тогда подсказка не показывается. Что нужно сделать или какой стиль прописать подсказке!

А где функция repl() ? Да и на div_setTime() не мешало бы глянуть.

Навскидку могу сказать, что нужно подсказку и карту разнести в разные дивы или табличку туда, с указанием height

Либо <div style="width:959px;"> меняем на <div style="width:959px;height:1010px;"> и прижимаем содержимое этого дива вниз. Тогда карта прыгать не будет.

Если же подсказка должна быть прямо на карте - тогда их надо в разные дивы.

Код

<script type="text/javascript">     function repl(namef)     {         document.getElementById(namef).style.display='block';     }     var aBo;     function div_setTime(h_div)     {         aBo = h_div;         setTimeout('repl_none(aBo);',2000);     }     function repl_none(nameR)     {         document.getElementById(nameR).style.display='none';     } </script>

Подсказка появляется там где нужно, проблема в том что когда подсказка появляется то карта сдвигается вниз
Если в разных дивах то как тогда будет осуществлятся позиционирование подсказки на карте, absolut не подходит потому что карта в центре страницы находится.

Тогда предлагаю карту делать бэкграундом в табличке, которая будет в этом диве. Ну а подсказка в hidden/visible дива, который уже внутри table/tr/td

у td нету свойства usemap, usemap есть только у img. Тоже думал так сделать, но не выходит

Вообще должен работать очень простой вариант:

<div style="height:100px;">
<div style="height:30px;">подсказка</div>
<div style="height:70px;">карта</div>
</div>

То есть нужно четко размерчики указать. Они же известны заранее... и тогда ничего не будет прыгать.

Да при таком раскладе будет работать, если у подсказки будет стоять position:absolute;, a мне нужно чтоб она брала точку от родительского объекта (получается position:relative), а не от окошко браузера. Потому что сайт сделан по центру страницы, а не резиновый.
Вот я парюсь с этой проблемой уже 3 день

<DIV ALIGN="center"><DIV id=karta STYLE="position: relative; left: 20px; top: 20px; width: 200px; height: 200px; background-color: #87CEFA;"> <DIV id=marker STYLE="position: absolute; left: 20px; top: 20px; width: 20px; height: 20px; background-color: #FFFFFF;"></DIV> </DIV></DIV>

у дива тоже нету свойства usemap!
и

<DIV id=marker STYLE="position: absolute; left: 20px; top: 20px; width: 20px; height: 20px; background-color: #FFFFFF;"></DIV>  </DIV>

немогу использовать position:absolute; потому что при разных разрешениях подсказка будет появлятся в разных местах

А зачем диву мап? Ложте в див картинку, не забывайте о z-index, а указаель можно сделать один, изменяя его координаты с помощью JS. Можете и кучу, скрывая/показывая.

sim5, не подскажите как в JS сделать указатель, может где примерчик есть или статья про эти указатели?

DIV с фоном картинки указателя, с вложенным текстом (цифра и надпись), который менять в зависимости от положения указателя. Но вот я немного не понял какую роль у вас играет маппинг на изображении. Если, например, надо показывать эти указатели именно при наведении мыши на цифры на карте, то я бы назначил мап этим цифрам. Этим горячим областям назначил бы обработку события ONMOUSEOVER="myFunction(N)", где N это номер на карте, а в функции по этому номеру получал бы из описанного массива координаты указателя и его текст, номер для указателя - это N.

Спасибо всем!!!
Sim5, ваш вариант получился как надо, спасибо большое!!!

Не знаю как вы сделали, вот так я себе представлял все.

И забудьте вы об absolute - никто вам его не предлагает. Я говорил именно о релативе.

Вот код который Вы написали

<div style="height:100px; border:1px solid black;"> <div style="height:30px; border:1px solid blue; z-index:999; top:20px; position:relative;">подсказка</div> <!--<div style="height:30px; border:1px solid blue; z-index:999; top:20px; left:30px; position:relative;">подсказка 2</div>--> <div style="height:100px; border:1px solid red; z-index:100; position:relative;">карта</div> </div>

при таком раскладе карта смещается вниз на размер подсказки, а если ещё добавить подсказку то ещё ниже карта станет
Прикрепил картинку как получается по вашемоу варианту