сейчас на сайте:
Лучшие сказки мира 03skazki.ru
Детектив и фантастика 03pressa.ru
Песни прошлых лет 03pesni.ru
Для досуга
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML><head> <title>Блок с фото (текст) открывается рядом с меню из линков</title> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <style type="text/css"> #gallery {position:relative; font:11px verdana,arial,sans-serif; line-height:20px; width:705px; padding:50px 0 0 180px; background:url(pointer.jpg) no-repeat left top; height:450px;} #gallery h3 {color:#222; font-size:13px;} #gallery h3.color {color:#000; margin:10px 25px;} #gallery .switch {display:block; cursor:pointer; color:#000; font-weight:normal;} #gallery .switch .turn_off {display:none;} #gallery .off {color:#c00;} #gallery .off .turn_off {display:inline;} #gallery .off .turn_on {display:none;} #gallery .hide {display:none;} #gallery .show {position:absolute; top:0; left:380px; display:block; width:370px; background:#fff; z-index:200;} #gallery form {width:270px; height:200px; background:url(form.jpg); padding:50px;} #gallery form fieldset {background:#fff;} #gallery .table {background:url(left.gif) no-repeat left bottom; padding:0 25px 25px; width:320px;} #gallery table, #gallery caption, #gallery table tr, #gallery table tr td {border:1px solid #000; padding:5px; background:#fff;} #gallery a, #gallery a:visited {color:#00c; line-height:30px;} #gallery textarea {width:350px; border-color:#0cc; color:#048; padding:10px;} #gallery dl {width:370px;} </style> <script type="text/javascript"> onload = function() { var e, i = 0; while (e = document.getElementById('gallery').getElementsByTagName ('B') [i++]) { if (e.className == 'switch') { e.onclick = function () { var getEls = document.getElementById('gallery').getElementsByTagName('DIV'); for (var z=0; z<getEls.length; z++) { if (getEls[z].className == 'hide') { w=getEls[z].previousSibling; while (w.nodeType!=1) { w=w.previousSibling; } w.className=w.className.replace('switch over', 'switch'); } if (getEls[z].className == 'show') { getEls[z].className=getEls[z].className.replace('show', 'hide'); w=getEls[z].previousSibling; while (w.nodeType!=1) { w=w.previousSibling; } w.className=w.className.replace('switch off', 'switch over'); } } this.className = this.className == 'switch' ? 'switch off' : 'switch'; x=this.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } x.className = this.className == 'switch off' ? 'show' : 'hide'; } } } } </script> </head> <body> <div id="gallery"> <b class="switch"><span class="turn_on">Открыть Линк 1 (текст)</span><span class="turn_off">Закрыть</span></b> <div class="hide">Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст Это текст </div> <b class="switch"><span class="turn_on">Открыть Линк 2</span><span class="turn_off">Закрыть</span></b> <div class="hide"><img src="http://www.03www.su/pic/002.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть Линк 3</span><span class="turn_off">Закрыть</span></b> <div class="hide"><img src="http://www.03www.su/pic/003.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть Линк 4</span><span class="turn_off">Закрыть</span></b> <div class="hide"><img src="http://www.03www.su/pic/004.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть Линк 5</span><span class="turn_off">Закрыть</span></b> <div class="hide"><img src="http://www.03www.su/pic/005.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть Линк 6</span><span class="turn_off">Закрыт</span></b> <div class="hide"><img src="http://www.03www.su/pic/006.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть Линк 7</span><span class="turn_off">Закрыт</span></b> <div class="hide"><img src="http://www.03www.su/pic/007.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть Линк 8</span><span class="turn_off">Закрыт</span></b> <div class="hide"><img src="http://www.03www.su/pic/008.jpg" alt="" /></div> </div> <div style=" position:absolute; bottom:+30; left:30% "><center><a style="COLOR: #000;font: 80% Verdana,Arial,sans-serif;" href=http://www.03www.su/>Библиотека JAVASCRIPT 1997- 2010 (июль 2010 г.) Дизайн и сопровождение © SE@RCHER</a></center></div></body> </html>
