PEOP

Ок Вот код <div id="links"> <a href="" class="point" id="1">ONE</a> <a href="" class="point" id="2">TWO</a> <a href="" class="point" id="3">THREE</a> </div> <div id="rotator"> <ul> <li class="show"><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul> </div> CSS: #rotator {position: relative; height: 800px; height: 300px; /*margin-left: -19px;*/} #rotator ul li {float: left; position: absolute; list-style: none;} #rotator ul li.show {z-index: 500;} JAVASCRIPT: $(document).ready(function(){ $('div#rotator ul li').css({opacity: 0.0}); $('div#rotator ul li:first').css({opacity: 1.0}); $("a.point").hover(function() { var current = $('div#rotator ul li.show'); var hoverID = $(this).attr("id"); var elemLI = $('li:eq('+hoverID+')'); elemLI.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); current.css({opacity: 0.0}, 1000).removeClass('show');}, function() {return false;}); });

Здравствуйте! Подскажите, как сделать следующее? Допустим, есть набор ссылок с id=1 id=2 id=3, а также список, элементы которого содержат картинки, расположенные одна под другой. Как сделать, чтоб при наведении на ссылку соответсвующий номеру элемент списка "всплывал" на первый план, поверх остальных картинок, т.е. текущий элемент становится прозрачным, а соответсвующий ссылке - появлялся (opacity = 1.0). Вот код <div id="links"> <a href="" class="point" id="1">ONE</a> <a href="" class="point" id="2">TWO</a> <a href="" class="point" id="3">THREE</a> </div> <div id="rotator"> <ul> <li class="show"><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul> </div> CSS: #rotator {position: relative; height: 800px; height: 300px; /*margin-left: -19px;*/} #rotator ul li {float: left; position: absolute; list-style: none;} #rotator ul li.show {z-index: 500;} JAVASCRIPT: $(document).ready(function(){ $('div#rotator ul li').css({opacity: 0.0}); $('div#rotator ul li:first').css({opacity: 1.0}); $("a.point").hover(function() { var current = $('div#rotator ul li.show'); var hoverID = $(this).attr("id"); var elemLI = $('li:eq('+hoverID+')'); elemLI.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); current.css({opacity: 0.0}, 1000).removeClass('show');}, function() {return false;}); }); Получается Бред! Картинки меняются непонятно как вообще. Спасибо заранее.

Спасибо) Дак вот в этом то и есть вся проблема... половина сцен в видео уже подделано более или менее, просто если сравнить с оригиналом.. камера-то не айс, мягко говоря.. хотя все равно картинка оставляет желать лучшего.

Спасибо, народ)) Кстати, в зале сайгаки те же, что и в лесу. А музыка - это саундтрек к какой-то игрушке, не помню уже какой. Так вот ее чисто случайно взяли.

Постоянно кидаю их сюда.. )) теперь с целью оценки монтажа, благо для него была убита неделя работы в Photoshope, blender'е и Pinnacle =)) и вот оно)) готовое и забавное видео))

))) но комментировать ничего не значащие сообщения, которые привлекают к теме внимание, вы конечно все умеете. не в обиду сказано, но уровень форума в последнее время понижается все большими темпами: знающие теряют интерес тут находиться, модераторам пох (у них и так полномочий выше крыши), а желающие получить ответ на вопрос не находят его.. и им ничего не остается, как покинуть это место, сохранив где-то пароль от учетной записи, на всякий случай, дабы в будущем когда-нибудь вернуться ради интереса не закрылся ли форум вообще... А теперь, чтобы не полететь в бессмысленный бан за оффтоп или еще что.., мой вопрос звучал так: сам не понял, поэтому сюда и пришел. не знал, что для вас правильно вызвать функцию - сложнейшая задача, за которую не платят ничем взамен.. ))) более чем уверен, вы лично на этом форуме в качестве помощи писали намного более объемные коды, чем обращение у функции, что говорит либо о вашем незнании вопроса, либо о личной неприязни (что сразу исключается).. за длительный срок в этой теме появился только 1 комментарий (от вас), и тот не по теме.. вывод напрашивается сам собой: самое время удалить раздел форума JavaScript из-за его некомпетентности))) удачи в вашем сложном деле написания объемных кодов)))

Че никто не знает? правда? просто весьма забавно наблюдать статистику: 12 просмотров 0 ответов.. ))) а вопрос, казалось бы, простой очень.. код коротенький, плагины для JQUERY все используют.. мдааа. всем интересно, но помочь никто не в состоянии.

Привет) Вот код страницы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.scrollTo-min.js" type="text/javascript"></script> <script src="jquery.localscroll-min.js" type="text/javascript"></script> <title>Test page</title> <script type="text/javascript"> </script> </head> <body> <style type="text/css"> *{margin: 0px; padding: 0px;} body {background: #ffffff; position: absolute; left: 0px; top: 0px; color: #777777; font-size: 16pt; overflow: hidden; width: 3900px;} a:link, a:visited {color: #555555; text-decoration: underline;} a:hover, a:active {color: #222222; text-decoration: underline;} div {border: none;} img {border: none;} .sec {margin: 0px; bottom: 0px; width: 1300px; float: left; height: 100%;} .sec p {padding-left: 20px;} div.menu {width: 100%; height: 70px; color: #ffffff; background: #999999; top: auto; left: 0px; right: 0px; bottom: 0px; position: fixed; text-align: center;} </style> <div class="sec" id="sec1"> <p>Sec1</p> </div> <div class="sec" id="sec2"> <p>Sec2</p> </div> <div class="sec" id="sec3"> <p>Sec3</p> </div> <div class="menu"> <a href="#sec1">sec1</a> <a href="#sec2">sec2</a> <a href="#sec3">sec3</a> </div> </body> </html> не понимаю куда надо дописать обращение, чтобы при нажатии на ссылку в div.menu происходил плавный переход к div с соответствующим #id (#sec1, #sec2 и т.д.) Спасибо за помощь.

Спс за коменты) попробуем учесть.

Свежачек http://www.youtube.com/watch?v=uG3i0qRxbAc Веселое настроение, теплая погода, простенькое небольшое видео))

=) Приму к сведению!

Всем доброго времени суток)) Рад предложить к просмотру новое видео: Паркур. Лето. Санкт-Петербург / Ставрополь )) Смотрите наше новое видео (Keep Balance / Sunrise): http://www.youtube.com/watch?v=towxxax84kc Рад каждому комментарию сайтостроителей,))) Приятного просмотра)

Justnewone, благодю! ;-) Проблема решена. Еще раз большое спасибо, теперь буду знать как такая вещь реализуется.. )) Тема больше не актуальна.

Можно и одним дивом обойтись, если тебе нужно, чтобы цвет переходил в картинку только с одной стороны. Если с двух, то, как минимум, два дива (один в другом) нужно будет.

ЭЭЭй, Searcher, ты тут? =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> валидатор зеленый!! ))

Кто-нибудь знает??.... :-))))

вобщем, суть такая. Есть страница, на которой таблица из трех ячеек: первая и третья заданы явно (точнее фиксированно), а вторая, которая по идее по центру страницы должна быть, определяет свою ширину по остратку от максимальной ширины экрана. В этой центральной ячейке (самой ячейке присвоено text-align: center;) есть таблица, у которой ширина задана фиксированно (причем ширина внутренней таблицы меньше ширины центральной ячейки), скажем, 400px. У внутренней таблицы указан параметр align="center" и в браузерах iE и Opera эта таблица, как и должно, выравнивается по центру второй (центральной) ячейки основной таблицы. А вот в Mozill'е почему-то прижимается к левому краю... =( Заранее спасибо за любую помощь в решении этой проблемы. ))

Ну может кто-нибудь знает хотя бы что-то для решения этой проблемы......... ???????? ммммммм???????

да. абсолютно. вообще-то на месте одинаковых цветов там разные фоны будут. не буду же я здесь это выкладывать. тем более к вопросу это никакого отношения не имеет. про куски картинки вы угадали, Юлия. =)

Хм........ Мда. Если бы я еще знал как это исправить???? =(

вот код страницы, которая требуется: ———————————————————————————————————— <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>...::: Тестовая страничка. Почему по-разному отображается??? :::...</title> <style type="text/css"> html {width: 100%; height: 100%; padding: 0; margin: 0;} body {width: 100%; height: 100%; padding: 0; margin: 0; background-color: #dedede; font-size: small; color: #000000; font-family: Verdana, Arial, sans-serif; text-align: justify;} a:link, a:visited {color: #0000ff; text-decoration: underline;} a:hover, a:active {color: #ff0000; text-decoration: none;} .main {padding: 0px; margin: 0px; border-collapse: collapse; width: 100%; border: none;} .maindiv {padding: 0px; border: none; margin-left: 50px; margin-right: 50px;} .main td {padding: 0px; margin: 0px; border: none;} .u_s_lt, .u_s_rt, .u_s_lb, .u_s_rb, .u_b_lt, .u_b_rt, .u_b_lb, .u_b_rb {height: 12px; width: 4px;} .u_s_lt {background-color: #000000;} .u_s_rt {background-color: #000000;} .u_s_lb {background-color: #000000;} .u_s_rb {background-color: #000000;} .u_b_lt {background-color: #000000;} .u_b_rt {background-color: #000000;} .u_b_lb {background-color: #000000;} .u_b_rb {background-color: #000000;} .ms_t, .ms_b {height: 12px; width: 190px;} .ms_l, .ms_r {width: 4px;} .ms_t {background-color: #559900;} .ms_b {background-color: #559900;} .ms_l {background-color: #559900;} .ms_r {background-color: #559900;} .mb_t, .mb_b {height: 12px;} .mb_l, .mb_r {width: 4px;} .mb_t {background-color: #ff3333;} .mb_b {background-color: #ff3333;} .mb_l {background-color: #ff3333;} .mb_r {background-color: #ff3333;} .left, .right {width: 190px; color: #ffffff; vertical-align: top; text-align: center;} .left {background-color: #8899ff;} .right {background-color: #8899ff;} .content {background-color: #7755dd; height: 300px; color: #ffffff; vertical-align: top; padding: 20px;} .content a:link, a:active, a:visited {color: #00ff00; text-decoration: none;} .content a:hover {color: #00aa00; text-decoration: underline;} .tabl {padding: 0px; margin: 0px; border-collapse: collapse; border: none;} .verh {margin: 0px; padding-left: 25px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; text-align: left; border: none; font-weight: bold; background: url(temp/cc.png) repeat-x top center;} .iverh {margin: 0px; padding: 2px; border: none; font-size: xx-small; text-align: right; font-weight: bold; vertical-align: bottom; background: url(temp/icc.png) repeat-x top center;} .open {margin: 0px; text-align: justify; padding: 5px; padding-top: 7px; padding-bottom: 7px; border: none; background: url(temp/ccc.png) center bottom repeat-x;} img.nimg {border: none; margin: 0px; width: 200px; margin-right: 14px; margin-bottom: 7px;} table.menu {width: 190px; font-size: 12pt; font-weight: bold; text-align: center; padding: 0px; margin: 0px; border: none;} table.menu td {margin: 0px; margin-top: 2px; padding: 0px;} a.amenu:link, a.amenu:visited {display: block; width: 100%; text-decoration: none; color: #111111; border: none; background-color: #e5e5ff; padding-top: 7px; padding-bottom: 7px;} a.amenu:hover, a.amenu:active {display: block; width: 100%; text-decoration: none; color: #666666; border: none; background-color: #a3a3ff; padding-top: 7px; padding-bottom: 7px;} table.dop {width: 176px; margin: 5px; margin-left: 7px; margin-right: 7px; padding: 0px; font-size: small; text-align: left; background-color: #000000; border: none; border-collapse: collapse;} td.dopt {margin: 0px; padding-left: 7px; padding-right: 3px; padding-top: 3px; padding-bottom: 5px; text-align: left; border: 1px #646464 solid; border-bottom: none; font-weight: bold; color: #393939; background-color: #a2a2a2;} td.dopi {margin: 0px; padding: 5px; border: 1px #646464 solid; border-top: 0px; background-color: #000000; color: #ffffff; font-style: italic;} </style> </head> <body> <div class="maindiv"> <table class="main" cellpadding="0" cellspacing="0"> <tr> <td class="u_s_lt"></td> <td class="ms_t"></td> <td class="u_b_lt"></td> <td class="mb_t"></td> <td class="u_b_rt"></td> <td class="ms_t"></td> <td class="u_s_rt"></td> </tr> <tr> <td class="ms_l"></td> <td class="left"> <table class="menu"> <tr><td><a href="index.html" class="amenu">ПУНКТ1</a></td></tr> <tr><td><a href="index.html" class="amenu">ПУНКТ2</a></td></tr> <tr><td><a href="index.html" class="amenu">ПУНКТ3</a></td></tr> <tr><td><a href="index.html" class="amenu">ПУНКТ4</a></td></tr> <tr><td><a href="index.html" class="amenu">ПУНКТ5</a></td></tr> </table> </td> <td class="mb_l"></td> <td class="content"> <table class="tabl"> <tr><td class="verh">ТЕКУЩЕЕ ОБНОВЛЕНИЕ</td><td class="iverh">дд.мм.гггг</td></tr> <tr><td class="open" colspan="2"><img src="test" class="nimg" alt="здесь находится любое изображение шириной 200 пикселов. высота рассчитывается автоматически с целью сохранения пропорций данного графического файла">основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. основная информация. основная информация размещается в этом месте на странице. основная информация. вся требуемая информация изображается в этом поле. </td></tr> </table> </td> <td class="mb_r"></td> <td class="right"> <table class="dop"> <tr><td class="dopt">дополнительно</td></tr> <tr><td class="dopi">дополнительное поле. дополнительное поле. дополнительное поле. дополнительное поле. дополнительное поле. дополнительное поле.</td></tr> </table> </td> <td class="ms_r"></td> </tr> <tr> <td class="u_s_lb"></td> <td class="ms_b"></td> <td class="u_b_lb"></td> <td class="mb_b"></td> <td class="u_b_rb"></td> <td class="ms_b"></td> <td class="u_s_rb"></td> </tr> </table> </div> </body> </html> —————————————————————————————————————————————— В Интернет Эксплорере и в Мозилле смотрится почти так, как мне хотелось бы... потом отдельно спрошу по этому поводу. так вот в чем вопрос: я установил денверовский пакет, создал пробный хост, залил ^^^^ЭТУ^^^^ страницу. далее, как и полагается, открыл ее, чтобы посмотреть. и что я вижу..... вот какой ужас я вижу. ничего не понимаю почему отображается не моя страница, а ее кусок. вот код отображаемого в денвере документа: ——————————————————————————————————————————————- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>...::: Тестовая страничка. Почему по-разному отображается??? :::...</title> <style type="text/css"> html {width: 100%; height: 100%; padding: 0; margin: 0;} body {width: 100%; height: 100%; padding: 0; margin: 0; background-color: #dedede; font-size: small; color: #000000; font-family: Verdana, Arial, sans-serif; text-align: justify;} a:link, a:visited {color: #0000ff; text-decoration: underline;} a:hover, a:active {color: #ff0000; text-decoration: none;} .main {padding: 0px; margin: 0px; border-collapse: collapse; width: 100%; border: none;} .maindiv {padding: 0px; border: none; margin-left: 50px; margin-right: 50px;} .main td {padding: 0px; margin: 0px; border: none;} .u_s_lt, .u_s_rt, .u_s_lb, .u_s_rb, .u_b_lt, .u_b_rt, .u_b_lb, .u_b_rb {height: 12px; width: 4px;} .u_s_lt {background-color: #000000;} .u_s_rt {background-color: #000000;} .u_s_lb {background-color: #000000;} .u_s_rb {background-color: #000000;} .u_b_lt {background-color: #000000;} .u_b_rt {background-color: #000000;} .u_b_lb {background-color: #000000;} .u_b_rb {background-color: #000000;} .ms_t, .ms_b {height: 12px; width: 190px;} .ms_l, .ms_r {width: 4px;} .ms_t {background-color: #559900;} .ms_b {background-color: #559900;} .ms_l {background-color: #559900;} .ms_r {background-color: #559900;} .mb_t, .mb_b {height: 12px;} .mb_l, .mb_r {width: 4px;} .mb_t {background-color: #ff3333;} .mb_b {background-color: #ff3333;} .mb_l {background-color: #ff3333;} .mb_r {background-color: #ff3333;} .left, .right {width: 190px; color: #ffffff; vertical-align: top; text-align: center;} .left {background-color: #8899ff;} .right {background-color: #8899ff;} .content {background-color: #7755dd; height: 300px; color: #ffffff; vertical-align: top; padding: 20px;} .content a:link, a:active, a:visited {color: #00ff00; text-decoration: none;} .content a:hover {color: #00aa00; text-decoration: underline;} .tabl {padding: 0px; margin: 0px; border-collapse: collapse; border: none;} .verh {margin: 0px; padding-left: 25px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; text-align: left; border: none; font-weight: bold; background: url(temp/cc.png) repeat-x top center;} .iverh {margin: 0px; padding: 2px; border: none; font-size: xx-small; text-align: right; font-weight: bold; vertical-align: bottom; background: url(temp/icc.png) repeat-x top center;} .open {margin: 0px; text-align: justify; padding: 5px; padding-top: 7px; padding-bottom: 7px; border: none; background: url(temp/ccc.png) center bottom repeat-x;} img.nimg {border: none; margin: 0px; width: 200px; margin-right: 14px; margin-bottom: 7px;} table.menu {width: 190px; font-size: 12pt; font-weight: bold; text-align: center; padding: 0px; margin: 0px; border: none;} table.menu td {margin: 0px; margin-top: 2px; padding: 0px;} a.amenu:link, a.amenu:visited {display: block; width: 100%; text-decoration: none; color: #111111; border: none; background-color: #e5e5ff; padding-top: 7px; padding-bottom: 7px;} a.amenu:hover, a.amenu:active {display: block; width: 100%; text-decoration: none; color: #666666; border: none; background-color: #a3a3ff; padding-top: 7px; padding-bottom: 7px;} table.dop {width: 176px; margin: 5px; margin-left: 7px; margin-right: 7px; padding: 0px; font-size: small; text-align: left; background-color: #000000; border: none; border-collapse: collapse;} td.dopt {margin: 0px; padding-left: 7px; padding-right: 3px; padding-top: 3px; padding-bottom: 5px; text-align: left; border: 1px #646464 solid; border-bottom: none; font-weight: bold; color: #393939; background-color: #a2a2a2;} td.dopi {margin: 0px; padding: 5px; border: 1px #646464 solid; border-top: 0px; background-color: #000000; color: #ffffff; font-style: italic;} </style> </head> <body> <div class="maindiv"> <table class="main" cellpadding="0" cellspacing="0"> <tr> <td class="u_s_lt"></td> <td class="ms_t"></td> <td class="u_b_lt"></td> <td class="mb_t"></td> <td class="u_b_rt"></td> <td class="ms_t"></td> <td class="u_s_rt"></td> </tr> <tr> <td class="ms_l"></td> <td class="left"> <table class="menu"> <tr><td><a href="index.html" class="amenu">ПУН —————————————————————————————————————————————————-- Первоначально я подумал, что страницу не мешало бы проверить валидатором. Так вот, как ни странно, ответ валидатора: This document was successfully checked as HTML 4.01 Strict! Затем я отдельно проверил стили: Congratulations! No Error Found. This document validates as CSS level 2.1 ! —————————————————————————————————————————————————— Кто может подсказать в чем и почему возникает такая проблема? Спасибо заранее. =)

все... сделал.. исправил несколько ошибок, которые были любезно указаны. спасибо =)) видимо, Mozilla как-то не так, как я подразумевал, воспринимает использование слоев.. получилось, что одно перекрывает другое и ссылки не работают. сейчас все перекроил, сделал просто таблицами и дивами, благо на моей странице это вполне позволительно.. всем спасибо. эта тема более не является актуальной.

————————————————————————————————————————————————-- в странице: <ul class="menu"> <li id="limargin"><a href="" class="limenu">пункт 1</a></li> <li id="limargin"><a href="" class="limenu">пункт 2</a></li> <li id="limargin"><a href="" class="limenu">пункт 3</a></li> </ul> в стилях к этому коду (выше который): ul.menu {width: 190px; list_style: none; margin: 0px; padding: 0px; font-size: 12pt; font-weight: bold; text-align: center;} #limargin {margin: 0px; margin-top: 2px;} a:active.limenu, a:link.limenu, a:visited.limenu {display: block; width: 100%; text-decoration: none; color: #d9d9d9; border: none; background: url(temp/limenu_do.png); background-repeat: repeat-y; padding-top: 7px; padding-bottom: 7px;} a:hover.limenu {display: block; width: 100%; text-decoration: none; color: #d9d9d9; border: none; background: url(temp/limenu_after.png); background-repeat: repeat-y; padding-top: 7px; padding-bottom: 7px;} ————————————————————————————————————————-- как сделать такое меню, чтобы работало не только в Internet Explorer.? в mozilla и firefox не работает....

body {margin: что-то там;} не канает, потому как тот кусочек, который я привел - не вся страница. это только таблица, которая находится в центре. ну вы, вобщем-то все правы. но про 98 процентов я бы точно не додумался. всем спасибо. для начала попробую запихать в дивы.