Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Дублирование слоёв.

Автор: GAM 15.5.2005, 20:32

Есть слой, который отображается при наведении на определённый элемент.
А вот как можно сделать, чтобы при наведении на этот элемент показывался не 1 слой, а 2 или больше?
При чём другие слои были копией первого, чтобы не захламлять код прописывая содержимое div'ов по несколько раз.

Опишу поточнее положение вещей:
Есть слой с id="Layer", есть функции показа/скрытия слоя, а так же функция выставления слоя в определённое место, с заданием размера слою.

Заранее благодаорю за ответ.

Автор: Aliance 15.5.2005, 20:45

В 15 строке пропиши тоже, что и в 69 прописал smile

PS: это значит, что сказать без кода не могу - телекинезом не владею =(

Автор: Sardar 15.5.2005, 22:29

У нод есть метод cloneNode выдающий точную копию ноды, заюзай smile

Автор: Aliance 15.5.2005, 22:32

Автор: Guest 15.5.2005, 22:49

Вот код.

Код


<HTML>
<HEAD>
<TITLE>prob</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE type=text/css>
.layerStyle {position:absolute; z-index:1; width:100px; top:100px; visibility:visible; background-color:#999999; color:#FFFFFF; text-align:center;}
.but {height: 50px; width: 120px; text-align: center;    background-color: #CCCCCC;}
</STYLE>
<script language="JavaScript" type="text/JavaScript">
<!--
// browser
function init() {
IE = (document.all)
NC = (document.layers)
Opera = (document.getElementById)
}
// past layer
function pastLayer() {
init();
widthBrowser = getWidth()/2;
if(IE) eval('document.all["Layer"].style.left = widthBrowser');
if(NC) eval('document.layers["Layer"].left = widthBrowser');
if(Opera) eval('document.getElementById("Layer").style.left = widthBrowser');
setTimeout('putLayer()',1000);
}
function getWidth() {
init();
if (IE || Opera) sendX = document.body.clientWidth;
if (NC) sendX = window.innerWidth;
return sendX;
}
//hide layer
function hiddenLayer() {
init();
if(IE) eval('document.all["Layer"].style.visibility = "hidden"')
if(NC) eval('document.layers["Layer"].visibility = "hidden"')
if(Opera) eval('document.getElementById("Layer").style.visibility = "hidden"')
}
// show layer
function showLayer() {
init();
if(IE) eval('document.all["Layer"].style.visibility = "visible"')
if(NC) eval('document.layers["Layer"].visibility = "visible"')
if(Opera) eval('document.getElementById("Layer").style.visibility = "visible"')
}
//-->
</script>
</HEAD>
<BODY onLoad="pastLayer(),hiddenLayer()">
<!-- layer'a BEGIN -->
    <div id=Layer class="layerStyle"><p>qwe<br>qwe<br>qwe<br>qwe</p></div>
    <div class="but" onMouseOver="showLayer()" onMouseOut="hiddenLayer()">button</div>
<!-- layer'a END -->
</BODY>
</HTML>

Я вот подумал, а может просто вызывать функцию поставки слоя в нужное место 2 раза?
т.е продублировал в body функцию pastLayer(), передавая параметры положения, но, видать, 2 документа с одинаковым id поставить на страницу невозможно.

Есть идея засунуть слой в какую-нибудь переменную, а потом как-то выставлять её на странице.
Или дублировать слой програмно.

Конечным итогом должно быть отоброжение двух и более слоёв при наведении на "button"(из приведённого выше кода).

Как вот более корректно реализорать этот процесс?

Автор: Aliance 15.5.2005, 23:24

Ужасный код. Я так понимаю это не твой. Советую тебе писать самому, а не брать готовые.
Мы легко поможем тебе в этом, если ты канечно захочешь smile

Автор: Sardar 16.5.2005, 00:14

GAM скажи по человечески какой результат должен быть, т.к. твой код выше это мягко говоря "ничто" smile

Опиши задачу, а не как это должно происходить smile

Автор: GAM 16.5.2005, 01:38

2Aliance
Я то хочу, просто на всё времени не хватает так вот сесть и заняться изучением всего.
Я немного поглубже изучаю flash параллельно дизайнерской работы, а javascript очень похож по коммандам, да и по принцыпам тоже на ActionScript во flash - в общем ООП, ну не суть, просто когда требуется то требуется это всё сделать быстро, а самому быстро не получается - приходится брать готовые варианты, выложенные в уроках/статьях и компоновать.

2Sardar
Ну, в общем такая задача (реальная ситуация):
на странице есть flash'ка оттуда по наведению вызывается скрипт явский, в следствии чего дожны отобразиться 2 слоя поверх основной страницы. При ухода мышки со flash вызывается другой скрипт, который эти окна убирает.

+ к этому ещё косяк с выпадающим списком, который в ie не хочет уходить под слой, но эту проблему обошёл с помощью позиционирования и изменения размера слоя, но так я и не решил проблему перекрытия - видел примеры, как-то обходят, но там какие-то непонятные коды, ну да ладно, не важно, сейчас вот с показом/скрытием разобраться бы smile

Воть... вот такая вот штука.

Автор: Aliance 16.5.2005, 13:51

слои всегда одни и теже? Их всего 2ое?
Тогда так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>© AlianceHTMLEditor [ http://editor.sut.net.ru/editor.html ]</TITLE>
<script type="text/javascript" language="JavaScript">
<!--
function visibleLayer() {

   var layer1 = document.getElementById('q1');
   var layer2 = document.getElementById('q2');

 if (layer1.style.display == 'none' && layer2.style.display == 'none') {
   layer1.style.display = 'block';
   layer2.style.display = 'block';
 } else {
   layer1.style.display = 'none';
   layer2.style.display = 'none';
 }

}
// -->
</SCRIPT>
</HEAD>

<BODY>

<INPUT type="button" value="Показать слои" onclick="visibleLayer()" />
<div id="q1" style="display: none; border: 1px solid #ff0000">qqqqqqqqqq</div> 
<div id="q2" style="display: none; border: 1px solid #ff0000">wwwwwwwwww</div>

</BODY>
</HTML>