Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   не работает layer (https://javascript.ru/forum/misc/1830-ne-rabotaet-layer.html)

Stepan Rebrov 23.09.2008 01:19

не работает layer
 
Помогите новичку.
Нужно сделать следующее. На странице есть картинка. Когда кликаем мышкой, в этом месте на картинку накладывается другая.
Хотел сделать с помощью слоев, но как понял layers не поддерживается ни Мозилой, ни IE. А надо чтобы работало под любым браузером.
Подскажите пожалуйста, как можно это сделать. Спасибо.

greatilya 23.09.2008 04:50

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

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

Но пользоваться этим способом в крайнем случае... если накладываемая картинка не будет выходить за область ДИВа то может, есть смысл сделать кучу картинок и менять их в соответствии кликом на какую-либо область картинки.

Stepan Rebrov 24.09.2008 10:17

проблемы со слоями
 
Спасибо за ответ. Уточню задачу.
Есть одна большая картинка. Когда кликаем на ней, в том месте на нее накладывается другая - маленькая. Когда кликаем в другом месте, то и там тоже появляется та же картинка. То есть маленькая картинка "размножается". Копий может быть 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 пикселей. Может я что-то не так сделал или это особенность ИЕ ? Можно ли как то сделать универсально или придется подстраиваться под каждый браузер (а может и их разные версии) ?

greatilya 29.09.2008 14:51

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


Часовой пояс GMT +3, время: 18:40.