Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2008, 01:19
Stepan Rebrov
 
Сообщений: n/a

не работает layer
Помогите новичку.
Нужно сделать следующее. На странице есть картинка. Когда кликаем мышкой, в этом месте на картинку накладывается другая.
Хотел сделать с помощью слоев, но как понял layers не поддерживается ни Мозилой, ни IE. А надо чтобы работало под любым браузером.
Подскажите пожалуйста, как можно это сделать. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2008, 04:50
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Если я правильно Вас понял, необходимо при клике на картинку, отображать n-ый div, с позиционированием, относительно клика. Если да, то вот основные этапы решения этой проблемки:
1. на онКлик картинки пишем функцию которая передаёт координаты указателя (абсолютные),
2. далее по ним выстраиваем координаты ДИВа
3. включаем видимость ДИВа
3. для body в стиль padding:0px; margin:0px;

ОСТОРОЖНО: у ИЕ отклонение по относительной координате с оперой +1рх с файерфоксом -1рх (насколько я помню)

Но пользоваться этим способом в крайнем случае... если накладываемая картинка не будет выходить за область ДИВа то может, есть смысл сделать кучу картинок и менять их в соответствии кликом на какую-либо область картинки.
Ответить с цитированием
  #3 (permalink)  
Старый 24.09.2008, 10:17
Stepan Rebrov
 
Сообщений: n/a

проблемы со слоями
Спасибо за ответ. Уточню задачу.
Есть одна большая картинка. Когда кликаем на ней, в том месте на нее накладывается другая - маленькая. Когда кликаем в другом месте, то и там тоже появляется та же картинка. То есть маленькая картинка "размножается". Копий может быть 100 и более.
В соответствие с этим вопрос: можно ли динамически генерировать div-ы с картинками или придется заранее создавать 100 и более невидимых слоев и потом отображать их по мере необходимости ?

И второй вопрос. Сейчас я сделал так:
.......
#s3 {position: absolute; left: 50; top:50; padding:0px; margin:0px }
#s4 {position: absolute; left: 50; top:50; padding:0px; margin:0px }
.......
<div name="big_pic.png" id="s3">
<img src="smoll_pic.png">
</div>
<div name="l2" id="s4">
<img src="bs.png">
</div>

В Firefox 3.0.1 все ОК, левый верхний край картинок совпадает. А в ИЕ 7.0 вторая картинка смещена вниз на 5 пикселей. Может я что-то не так сделал или это особенность ИЕ ? Можно ли как то сделать универсально или придется подстраиваться под каждый браузер (а может и их разные версии) ?
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2008, 14:51
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Ответ 1: да дивы можно генерировать по ходу выполнения скрипта. Для этой цели служит такая вещь как "DOM"- Document Object Model. Наберите запросы в поисковике, и там найдётся множество статей с подобными задачами.
Ответ на второй вопрос: а вы не забыли для body в стиль "padding:0px; margin:0px;" прописать? Обычно, если есть такого рода смещения, то вызвано это этими свойствами. Также можете все дивы, вместе с рисунком вставить в ячейку таблицы. Я сам не гений javascript, но четко заню, что идеального совпадения во всех браузерах добиться очень тяжело.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работает в IE, не работает в Opera SunYang Общие вопросы Javascript 19 27.02.2009 23:43
Prototype + Ajax - не работает в IE, FF. silvek Prototype & script.aculo.us 0 30.08.2008 16:06
В IE не работает динамическое изменение colspan, нужна помощь! Extasy Общие вопросы Javascript 8 17.08.2008 11:55
Не работает SetInterval(SetInterval в скрипте на компе) Гость Общие вопросы Javascript 0 01.08.2008 21:10
Код не работает в седьмом Эксплорере... vol4ara Общие вопросы Javascript 0 14.07.2008 18:53