Вот JavaScript: HTML: <HTML> <HEAD> <style> <!-- DIV.clTop{position:absolute; width:170} DIV.clSub{position:absolute; left:10; width:170} #divCont{position:relative; left:1; top:0; height:600; width:170;} A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; font-weight:bold; color:202020} A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; color:111111} #divMain{position:absolute} //--> </style> <script language="JavaScript"> var stayFolded=false //This is the image that it changes to when it expands. var exImg=new Image(); exImg.src='arrow1.gif' //This is the image is changes to with it's "unfolded" or something :} //Remeber to change the actual images in the page aswell, but remember to //keep the name of the image. var unImg=new Image(); unImg.src='arrow.gif' /************************************************************************************ Browsercheck ************************************************************************************/ var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; var browser=((n || ie) && parseInt(navigator.appVersion)>=4) /************************************************************************************ Making cross-browser objects ************************************************************************************/ function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document'); this.height=n?this.ref.height:eval(obj+'.offsetHeight') this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt return this } function b_showIt(){this.css.visibility="visible"} function b_hideIt(){this.css.visibility="hidden"} function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} /************************************************************************************ Initiating the page. Just add to the arrays here to get more menuitems and add divs in the page ************************************************************************************/ function init(){ oTop=new Array() oTop[0]=new makeMenu('divTop1','divCont') oTop[1]=new makeMenu('divTop2','divCont') oTop[2]=new makeMenu('divTop3','divCont') oTop[3]=new makeMenu('divTop4','divCont') oTop[4]=new makeMenu('divTop5','divCont') oTop[5]=new makeMenu('divTop6','divCont') oTop[6]=new makeMenu('divTop7','divCont') oTop[7]=new makeMenu('divTop8','divCont') oSub=new Array() oSub[0]=new makeMenu('divSub1','divCont.document.divTop1') oSub[1]=new makeMenu('divSub2','divCont.document.divTop2') oSub[2]=new makeMenu('divSub3','divCont.document.divTop3') oSub[3]=new makeMenu('divSub4','divCont.document.divTop4') oSub[4]=new makeMenu('divSub5','divCont.document.divTop5') oSub[5]=new makeMenu('divSub6','divCont.document.divTop6') oSub[6]=new makeMenu('divSub7','divCont.document.divTop7') oSub[7]=new makeMenu('divSub8','divCont.document.divTop8') for(i=0;i<oSub.length;i++){ oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } /************************************************************************************ This is the function that changes the sub menus to folded or unfolded state. ************************************************************************************/ function menu(num){ if(browser){ if(!stayFolded){ for(i=0;i<oSub.length;i++){ if(i!=num){ oSub[i].hideIt() oTop[i].ref["imgA"+i].src=unImg.src } } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } if(oSub[num].vis()){ oSub[num].showIt() oTop[num].ref["imgA"+num].src=exImg.src }else{ oSub[num].hideIt() oTop[num].ref["imgA"+num].src=unImg.src } for(i=1;i<oTop.length;i++){ if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } } //Initiating the menus onload, if it's a 4.x+ browser. if(browser) onload=init; </script> </HEAD> <body text="#202020" bgcolor="ivory" link="#0000FF" vlink="#FFA500" alink="#FF0000" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"> <!-- МЕНЮ --> <div id="divCont"> <div id="divTop1" class="clTop"> <a href="#" onclick="menu(0); return false" class="clMain"> <img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> Главная</a><br> <div id="divSub1" class="clSub"> <a href="main.html" target="main" class="clSubb">-Старт</a><br> </div><br> </div> <div id="divTop2" class="clTop"> <a href="#" onclick="menu(1); return false" class="clMain"> <img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> HTML</a><br> <div id="divSub2" class="clSub"> <a href="#" class="clSubb">-O HTML</a><br> <a href="#" class="clSubb">-DHTML</a><br> <a href="html/html_faq.html" target="main" class="clSubb">-FAQ</a><br> </div><br> </div> <div id="divTop3" class="clTop"> <a href="#" onclick="menu(2); return false" class="clMain"> <img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> Скрипты</a><br> <div id="divSub3" class="clSub"> <a href="#" class="clSubb">-JavaScript</a><br> <a href="#" class="clSubb">-VBScript</a><br> <a href="#" class="clSubb">-FAQ</a><br> </div><br> </div> <div id="divTop4" class="clTop"> <a href="" onclick="menu(3); return false" class="clMain"> <img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> Требования</a><br> <div id="divSub4" class="clSub"> <a href="treb/system.html" target="main" class="clSubb">-Система</a><br> <a href="treb/browser.html" target="main" class="clSubb">-Браузер</a><br> <a href="treb/graphics.html" target="main" class="clSubb">-Графика</a><br> <a href="treb/editor.html" target="main" class="clSubb">-Редакторы</a><br> <a href="treb/ftp.html" target="main" class="clSubb">-FTP</a><br> <a href="treb/download.html" target="main" class="clSubb">-Скачивание</a><br> <a href="treb/dial.html" target="main" class="clSubb">-Дозвон</a><br> </div><br> </div> <div id="divTop5" class="clTop"> <a href="" onclick="menu(4); return false" class="clMain"> <img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> Интернет</a><br> <div id="divSub5" class="clSub"> <a href="internet/hostingrus.html" target="main" class="clSubb">-Хостинг(РФ)</a><br> <a href="internet/hostingen.html" target="main" class="clSubb">-Хостинг(МИР)</a><br> <a href="internet/redirect.html" target="main" class="clSubb">-Редирект</a><br> <a href="internet/extra.html" target="main" class="clSubb">-Еще кое-что</a><br> </div><br> </div> <div id="divTop6" class="clTop"> <a href="" onclick="menu(5); return false" class="clMain"> <img src="arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> Реклама</a><br> <div id="divSub6" class="clSub"> <a href="rating.html" target="main" class="clSubb">-Регистрация</a><br> <a href="bannersystem.html" target="main" class="clSubb">-Баннеры</a><br> <a href="#" target="main" class="clSubb">-Раскрутка 1</a><br> <a href="#" target="main" class="clSubb">-Раскрутка 2</a><br> </div><br> </div> <div id="divTop7" class="clTop"> <a href="" onclick="menu(6); return false" class="clMain"> <img src="arrow.gif" name="imgA6" width=12 height=12 alt="" border="0"> Деньги</a><br> <div id="divSub7" class="clSub"> <a href="#" class="clSubb">-Спонсоры</a><br> <a href="#" class="clSubb">-WebMoney</a><br> <a href="#" class="clSubb">-Кредитки</a><br> </div><br> </div> <div id="divTop8" class="clTop"> <a href="" onclick="menu(7); return false" class="clMain"> <img src="arrow.gif" name="imgA7" width=12 height=12 alt="" border="0"> Прочее</a><br> <div id="divSub8" class="clSub"> <a href="#" class="clSubb">-Гостевая книга</a><br> <a href="#" class="clSubb">-Голосование</a><br> <a href="#" class="clSubb">-Ссылки</a><br> <a href="#" class="clSubb">-Написать</a><br> </div><br> </div> </div> </HEAD> </HTML>
Сам недавно думал над этим)) Это вообще по идее можно несколькими способами реализовать. Вот мой. PHP: <script> function submenu(id, html) { document.getElementById(id).innerHTML = html; } </script> <a href="#" onclick="submenu('id1', ' submenu(1)<br> submenu(2)')">menu(1)</a> <div id="id1"></div> <a href="#" onclick="submenu('id2', ' submenu(3)<br> submenu(4)')">menu(2)</a> <div id="id2"></div> P.S. Как быть с фреймом не знаю.
Тогда уж на http://dhtml-menu.com понравившееся взять, только придется немного подумать, чтоб надпись trial version убрать.
а вот как я сделал: Code: ..... <script type="text/javascript" charset="utf-8"> function submenudisplay(submenuid) { submenu = document.getElementById(submenuid); if (submenu.style.display == "block") { submenu.style.display = "none"; } else { submenu.style.display = "block"; } } </script> </head> <body> <table width="210" height="50" border="0" align="left" class="navi"> <tr> <td><br><a href="../main.html" target="mainFrame">о компании</a></td> </tr> <tr> <td> <div class="link"> <a href="../exkurs.html" target="mainFrame" onClick="submenudisplay('exkurs'); return(false);">экскурсии</a> <div class="submenu" id="exkurs"> <div class="link"> <a href="../submenus/austria.html" target="mainFrame">- Австрия</a> </div> <div class="link"> <a href="../submenus/tschech.html" target="mainFrame">- Чехия и Словакия</a> </div> <div class="link"> <a href="../submenus/ungarn.html" target="mainFrame">- Венгрия</a> </div> <div class="link"> <a href="../submenus/italy.html" target="mainFrame">- Италия</a> </div> <div class="link"> <a href="../submenus/germany.html" target="mainFrame">- Германия</a> </div> </div> </div> </td> </tr> <tr> <td><a href="../adjust.html" target="mainFrame">трансферы</a></td> </tr> <tr> <td><a href="../contact.html" target="mainFrame">контакт</a></td> </tr> </table> ....... плюс в цсс вписал вот что: Code: div.submenu { margin-left: 10px; display: none; } div.link div.link a { text-decoration: none; font-size: 9pt; color: #026ba1; }
PHP: preg_match_all('|<form.*([\.\-_A-Za-z0-9]+?)@([\.\-A-Za-z0-9]+?[\.A-Za-z0-9]{2,}).*</form>|U', $text, $out); это регулярное выражение выбирает все email - если они находятся в форме как написать обратное выражение - выбрать все email- если они не в форме?
До формы: PHP: preg_match_all('|.*([\.\-_A-Za-z0-9]+?)@([\.\-A-Za-z0-9]+?[\.A-Za-z0-9]{2,}).*<form.*|U', $text, $out); После формы: PHP: preg_match_all('|.*</form>([\.\-_A-Za-z0-9]+?)@([\.\-A-Za-z0-9]+?[\.A-Za-z0-9]{2,}).*|U', $text, $out); P.S. Для php есть отдельная тема... [offtop] P.P.S. Корвин. а ты не Ваня случаем? =) [/offtop]
Помогите с CSS для тега <table> Вообщем нужно прописать параметры стиля для таблицы (может и ещё для чего) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>CMS</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table align="center"> <tr> <th scope="col"><div id="headerArea"> <span class="logo1"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="280" height="36"/></a></span></div></th> <th scope="col"><div id="headerArea"> <span class="logo2"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="160" height="36"/></a></span></div></th> <th scope="col"><div id="headerArea"> <span class="logo3"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="192" height="36"/></a></span></div></th> </tr> </table> </body> </html> css: Code: body { margin-left: 0px; margin-top: 0px; } #headerArea span.logo1 a { background: url(images/logo1.png); } #headerArea span.logo1 a:hover { background: url(images/logo1_light.png); } #headerArea span.logo2 a { background: url(images/logo2.png); } #headerArea span.logo2 a:hover { background: url(images/logo2_light.png); } #headerArea span.logo3 a { background: url(images/logo3.png); } #headerArea span.logo3 a:hover { background: url(images/logo3_light.png); } table { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border: 0; border-top-color: #000000; --> что ёще? } Смысл кода реализовать смену картинок (фона ячейки в таблице) после наведения курсора, посредством CSS - ну с этим всё ок. Только вот разница в отображении в IE (боле-менее норм.) и Опере (неправильно фон позицируется в ячейках), как исправить? P.S. none.gif - прозрачная гифка размером 1х1 пиксель (использовал, чтоб размеры ячеек таблицы соответсвовали размеру картинок для фона).
Во-первых параметр id для каждого элемента страницы должен быть уникальным, иначе теряется его смысл, поэтому нужно заменить #headerArea на .headerArea, и соответсвенно, использовать как класс. Во-вторых самое оптимальное решение в таком случае - создание картинки для фона, вдвое превышающей по высоте размеры ячейки. При этом в верхней ее части размещается фон в нормальном состоянии, в нижней - в наведенном. Теперь в стилях для нужного элемента указываешь: Code: a { background: url(image.gif) no-repeat top left; } a:hover { background-position: bottom left; } И третье: в твоем случае фон нужно задавать не для Code: #headerArea span.logo3 a а для Code: #headerArea span.logo3 a img
Может и легче, но я хочу через CSS сделать сие дело... Up: вот сделал как рекомендовал Helios Code: <body> <table align="center" id="1" cellspacing="0" cellpadding="0"> <tr> <th><span class="logo1"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="285" height="36"/></a></span></th> <th><span class="logo2"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="178" height="36"/></a></span></th> <th><span class="logo3"><a href="http://forum.antichat.ru"><img src="images/none.gif" width="205" height="36"/></a></span></th> </tr> </table> </body> style.css Code: body { margin-left: 0px; margin-top: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0; } a { background: top left; } a:hover { background-position: bottom left; } .logo1 a img { background: url(images/logo_1.png); } .logo1 a:hover img { background-position: bottom left; } .logo2 a img { background: url(images/logo_2.png); } .logo2 a:hover img { background-position: bottom left; } .logo3 a img { background: url(images/logo_3.png); } .logo3 a:hover img { background-position: bottom left; } Т.е. фоновая картинка в два раза больше ячейки таблицы по высоте, в начале отображается верхняя часть, при наведении курсора - нижняя. В принципе всё работает ок! Но в IE ячейки таблицы обраблены рамкой синего цвета, в Опере такого нету - там всё норм. В чём трабл?
Многие люди из морально-этических соображений выключают JavaScript у себя в браузере, поэтому эти функции работать не будут. Людей же, отрубающих CSS практически нет, поэтому это будет работать везде.
