Здравствуйте все. В общем, так: есть файл со сценарием, таблица стилей, html страница, по клику ссылки на странице должен действовать сценарий, который задействует таблицу стилей и выводит окно. Проблема в том, что в строке сценария:
document.getElementById(‘Как тут указать путь к стилю «Shwind_u»?‘).style.clip = rect;
В этом вся суть проблемы, нужно указать пути к стилю, кто знает, исправьте, пожалуйста.
Может эту конструкцию можно как-то упростить? А то у меня ссылок много и для каждой нужно писать свой скрипт?
Код страницы:
<div id="Shwind_u">
<div class="hrift">1</div>
<p class="hrift_c">2.<br>
<button style="clear:both; margin-top:30px;" type="button" onClick="shtrClose_1()">Закрыть!</button></p>
</div>
<a href="javascript:shtrOpen_1()" class="strong">1</a>
Скрипт:
var shtrStep = 10; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var shtrTimeout = 15;//задержка перед последующей итерацией для эффекта плавности
//текущее количество обрезаемых пикселей слоя слева и справа
var shtrLeft = 300;
var shtrRight = 300;
var shtrWidth = 600;//ширина слоя
function shtrOpen_1()
{
if (shtrLeft>0)
{
shtrRight += shtrStep; //раскрываем область усечения справа на curtainStep пикселей
shtrLeft -= shtrStep; //раскрываем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ shtrRight +'px, auto, '+ shtrLeft +'px)';
document.getElementById('Shwind_u',"../CSS/Stranichnie_of").style.clip = rect;
setTimeout(shtrOpen,shtrTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
function shtrClose_1()
{
if (shtrLeft<shtrRight)//Пока левая граница области усечения не встретилась с правой
{
shtrRight -= shtrStep; //сужаем область усечения справа на curtainStep пикселей
shtrLeft += shtrStep; //сужаем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ shtrRight +'px, auto, '+ shtrLeft +'px)';
document.getElementById(('Shwind_u'),"../CSS/Stranichnie_of").style.clip = rect;
setTimeout(shtrClose,shtrTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
function clipImg_1(on)
{
document.getElementById("clipEx1").style.clip=on?'rect(78px 146px 183px 84px)':'rect(auto,auto,auto,auto)';
}
Таблица стилей:
#Shwind_u
{
/* Настраиваем внешний вид слоя */
width: 600px; /* шириша слоя диалогового окна */
height: 400px; /* высота слоя диалогового окна */
background-color: #FFFFCC; /* цвет слоя диалогового окна */
border: 1px dotted gray; /* рамка слоя диалогового окна*/
/* Позиционируем слой по центру */
position: absolute; /* устанавливаем абсолютное позиционирование */
left: 30%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
top: 42%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
margin-top: -150px; /* сдвигаем слой вверх на половину высоты слоя */
margin-left: -100px; /* сдвигаем слой влево на половину ширины слоя */
/* делаем слой невидимым */
clip: rect(auto 300px auto 300px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}
-----------------------------------------
С уважением, Антон.
