Добрый день! Сегодня появился вопрос в JS, который я не могу решить своими знаниями.  

К примеру есть на странице такие элементы:
1. Ссылка
2. DIV с опросом

(Показано на картинке)

Как реализовать всплывающий ДИВ поверх ссылки по событию "клик". Всплывший ДИВ живет только 10 сек, потом исчезает и больше не появляется. И по повторному клику на нашей ссылке уже идет нужный переход  

Огромное спасибо!  



Присоединённый файл ( Кол-во скачиваний: 18 )
 _____.jpg 48,92 Kb

Примерно

Ради IE нужно немного добавить:

Задача решена, но что мешает юзеру сделать так: правый клик мыши, затем нажать Open. Это к тому, что в href тогда не следует держать ссылку.

И для простоты, если задача позволяет, я бы сделал просто замещение текста this.text и this.className нужными значениями, затем обратную установку this.text и this.className + добавление this.href. Тогда не нужны позиции и кроссбраузерность.

Огромное спасибо за помощь!
Сейчас буду разбираться с кодом, чуть позже отпишусь о результатах  

Второй вариант не сумел интегрировать в свой код, а так он работает интересно  

Первый вариант - получилось выполнить, но с позициями выведения блока - проблемы  

А в целом, как внедрить в такой код, что-то максимально простое по этим же алгоритмам?



И если у меня <a href="#">LINK</a> - будет еще выполнено в форме кнопки картинки, это не повлечет за собой изменений?  

Проблемы какого рода, конкретнее? Если очень «lot of text», и до контейнера с вопросом и кнопками нужно прокручивать документ с помощью полос прокрутки, то к верхней координате выводимого плавающего div'а нужно прибавлять величину этой прокрутки — типа document.documentElement.scrollTop.

Добавлено через 1 минуту и 55 секунд
И, кстати не нужно располагать дескриптор <style> в секции <body>. Это невалидно.

Проблема связана с тем, что всплывающее окно выводится над ссылкой - не закрывая ее в целом.

Но отойдем от этого, возможна ли такая схема работы скрипта:

ссылка у нас задана картинкой ( т.е. высота и ширина есть).
Кликаем по этой ссылке и поверх нее появляется другая картинка (не знаю, как лучше картинка или див с текстом) проходит 10 секунд и всплывший элемент - исчезает.

Тогда вроде позиционирование не так и важно? Ведь можно отталкиваться от изначальной ссылки и подобрать такие габариты всплывающего элемента, что бы он грамотно перекрывал ее.  

У меня не возникает проблем с позиционированием и перекрытием.

Amphiluke

С позиционированием все стало ОК. А вот таймер теперь не работает: попробуйте нажать на зеленую кнопку "СКАЧАТЬ"

http://gamehouse.com.ua/for_girls/perepoloh-na-rancho

Блин, нашел, где ошибка. Разместите всплывающий div в прямо body, а не в другом div. Скрипт расчитан на то, что родительский объект — именно body.

Добавлено через 5 минут и 19 секунд
А можно просто заменить это:

на это:

и тогда безразлично, где размещать div.

Вот теперь все здорово! Проблема решенная!

width = sender.getElementsByTagName("img")[0].offsetWidth.toString() + "px";
height = sender.getElementsByTagName("img")[0].offsetHeight.toString() + "px";

А если я в этих строчках меняю "px" на "100 px", то должна увеличиваться длина и ширина всплывающего ДИВа на 100 пикселей? НИкак не могу найти строки, которые отвечают за размеры всплывающего элемента  
            

Чтобы увеличить на 100px, нужно написать:


Пробелы между числом и единицей измерения недопустимы.

Все огромнейшее спасибо!=)

На сегодня с ЯваСкриптом закончу=)        

Хм... Работает. А вот если снова нажать, то второй раз див уже не всплывает и пропускает по ссылке.   

Жена-тестер уперто нажала во второй раз. И ее пустило. 
Теперь она знает, что не надо больше читать всякие дивы и их открывать, а надо чуток подождать, и просто потом идти по ссылке. Долго материлась. Сказала нафиг это надо, я хочу быстро и сразу. И закрыла сайт... 
 

Это сообщение отредактировал(а) HARDMID - 14.1.2010, 10:13