Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Блок не отображается с position:relative и заданными координатами
 
 автор: OLi   (25.08.2010 в 01:50)   письмо автору
 
 

Есть html

<div id="map"><a href="#"><img src="images/metkaa.jpg" id="tira" onMouseOver="win()"></a>

<div id="header2">
    sdqdqeqeqe
</div> 

</div>

JS:

<script type="text/javascript">
function win() {

var rzY;
var rzX;

rzY=document.getElementById('tira').offsetTop;rzX=document.getElementById('tira).offsetLeft; rzX=rzX-27; rzY=rzY-73;document.getElementById('header2').style.position="relative";document.getElementById('header2').style.visibility="visible";document.getElementById
('header2').style.top=rzY;document.getElementById('header2').style.left=rzX;


}
</script>





#header2  { visibility: hidden; color: #666666;  font-size:12px; position:relative;  background-image:url(../images/okno2.png); background-repeat:no-repeat;width:120px;  height:100px;   
            }

#tira{ position: relative; top:310px; border:0px; left:190px}


Не получается отобразить блок div с position:relative и координатами rzX rzY
Т-е по чути надо отобразить блок header2 в той точке где блок с id=tira

  Ответить  
 
 автор: OLi   (25.08.2010 в 11:23)   письмо автору
 
   для: OLi   (25.08.2010 в 01:50)
 

Значения rzX rzY выводятся алертом

  Ответить  
 
 автор: АЯ   (25.08.2010 в 11:52)   письмо автору
 
   для: OLi   (25.08.2010 в 01:50)
 

Для начала напишем функцию поаккуратнее и пограмотнее:
function win ()
{
var A = document.getElementById ('tira'), rzX = (A.offsetLeft - 27) + 'px', rzY = (A.offsetTop - 73) + 'px';
with (document.getElementById ('header2').style) {top = rzY; left = rzX; visibility = 'visible'}
}
PS1. Повторять relative не надо - оно есть в блоке стилей.
PS2. Указывать размерность обязательно.

Теперь расскажите - что в этом Вас не устраивает.
Ибо код в браузере я не запускал.

  Ответить  
 
 автор: OLi   (25.08.2010 в 12:39)   письмо автору
 
   для: АЯ   (25.08.2010 в 11:52)
 

Работает! Но выводит слой div не в точке, где располагается tira

  Ответить  
 
 автор: OLi   (25.08.2010 в 12:43)   письмо автору
 
   для: OLi   (25.08.2010 в 12:39)
 

Примерно понял почему, когда считываются координаты tira отсчет происходит от верхнего и левого края экрана, а мне надо от краев слоя div id="map" ...Как добиться этого?

  Ответить  
 
 автор: АЯ   (25.08.2010 в 15:10)   письмо автору
 
   для: OLi   (25.08.2010 в 12:43)
 

Проще всего внешнему div'у установить position=relative, а внутренним объектам - position=absolute.

  Ответить  
 
 автор: OLi   (25.08.2010 в 16:00)   письмо автору
 
   для: АЯ   (25.08.2010 в 15:10)
 

Как вариант - да, но в таком случае div по нажатию отображается там где надо , а вот сам объект внутренний ссылка - нет....А мне надо чтоб все было завязано с внешним div, потому как при задании position absolut top left - не знаю как поведет себя внутренний объект в др браузерах и др разрешении

  Ответить  
 
 автор: OLi   (25.08.2010 в 16:07)   письмо автору
 
   для: OLi   (25.08.2010 в 16:00)
 

Сделал наоборот, внешнему #header2 position: absolute; а внутреннему #tira position: relative

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования