Эффекты на основе Java Script

Вернуться в каталог >>>

Простой ручной переключатель информационных блоков/картинок

Блок информации Открыть информационный блок 1Закрыть информационный блок 1 WebKPB На сайте представлена большая, постоянно пополняемая, коллекция Flash всевозможного назначения. Каждую Flash можно посмотреть в работе. К каждой Flash есть fla исходник. Открыть информационный блок 2Закрыть информационный блок 2 ScriptKPB Это сайт на котором Вы находитесь. Здесь представлена огромная, постоянно пополняемая, коллекция JavaScript, jQuery, Mootools?, Prototype, CSS и т.д. Все скрипты можно посмореть в работе. К каждому скрипту есть инструкция по установке и его можно скачать. Всё, представленное на сайте, распространяется абсолютно бесплатно. Открыть информационный блок 3Закрыть информационный блок 3 KPBshablon На сайте представлены современные креативные дизайны и их шаблоны для движка UCOZ. Я оказываю всевозможные услуги по их установке, доработке конкретно под Ваши нужды, изменению, дополнению и т.д. Открыть информационный блок 4Закрыть информационный блок 4 KPBwebStudio Это моя WEBстудия. Здесь Вы можете познакомиться с некоторыми моими работами. Ознакомится с перечнем оказываемых мною услуг и ценами на них. Открыть картинку 1Закрыть картинку 1 Открыть картинку 2Закрыт картинку 2 Открыть картинку 3Закрыт картинку 3 Открыть картинку 4Закрыт картинку 4	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<style type="text/css"> /* меню переключателя / #gallery {position:relative; font:11px verdana,arial,sans-serif; line-height:20px; padding: 5px; background: #88ffff; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; border: 2px solid #0000ff;} #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 .tit {text-align: center; color: #880000; font-size: 18px; border-bottom: #0000ff 2px solid; font-weight: bold;} / информационный блок и его содержимое */ #gallery .hide {display:none;} #gallery .show {position:absolute; top:0; left:280px; display:block; width:400px; z-index:200; padding: 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; border: 2px solid #ff00ff; background: #aaa; color: #000;} #gallery .show .blok {float: left; width: 160px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; border: 1px solid #000;} #gallery .show .hide div {padding: 5px;} #gallery .show a {padding-left: 80px; color: #880000; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 0 #888;} #gallery .show a:hover {text-decoration:none; text-shadow: 1px 1px 2px #ccc;} </style> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/509/prostoj_pereklychat.js"></script>
	Всё подписано, проблем быть не должно.
	Внутри тега <BODY> - </BODY> там где у Вас будет переключатель.
<!-- сам переключатель --> <div id="gallery"> <!-- титульная часть меню переключателя --> <div class="tit">Блок информации</div> <!-- ссылка 1 меню переключателя --> <b class="switch"><span class="turn_on">Открыть информационный блок 1</span><span class="turn_off">Закрыть информационный блок 1</span></b> <!-- информационный блок 1 --> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/webkpb250.jpg" class="blok"><div><a href="http://webkpb.ucoz.ru" title="Открыть сайт" target="_blank">WebKPB</a><br>На сайте представлена большая, постоянно пополняемая, коллекция Flash всевозможного назначения. <br> Каждую Flash можно посмотреть в работе. <br> К каждой Flash есть fla исходник.</div></div> <!-- ссылка 2 меню переключателя --> <b class="switch"><span class="turn_on">Открыть информационный блок 2</span><span class="turn_off">Закрыть информационный блок 2</span></b> <!-- информационный блок 2 --> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/scriptkpb250.jpg" class="blok"><div><a href="http://skriptkpbstudio.ucoz.ru" title="Открыть сайт" target="_blank">ScriptKPB</a><br>Это сайт на котором Вы находитесь. Здесь представлена огромная, постоянно пополняемая, коллекция JavaScript, jQuery, Mootools?, Prototype, CSS и т.д. Все скрипты можно посмореть в работе. К каждому скрипту есть инструкция по установке и его можно скачать.<br> Всё, представленное на сайте, распространяется абсолютно бесплатно.</div></div> <!-- и так далее --> <b class="switch"><span class="turn_on">Открыть информационный блок 3</span><span class="turn_off">Закрыть информационный блок 3</span></b> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/kpbshablon250.jpg" class="blok"><div><a href="http://kpbshablon.ucoz.ru" title="Открыть сайт" target="_blank">KPBshablon</a><br>На сайте представлены современные креативные дизайны и их шаблоны для движка UCOZ.<br> Я оказываю всевозможные услуги по их установке, доработке конкретно под Ваши нужды, изменению, дополнению и т.д.</div></div> <b class="switch"><span class="turn_on">Открыть информационный блок 4</span><span class="turn_off">Закрыть информационный блок 4</span></b> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/webstudio250.jpg" class="blok"><div><a href="http://kpbwebstudio.narod.ru" title="Открыть сайт" target="_blank">KPBwebStudio</a><br>Это моя WEBстудия. Здесь Вы можете познакомиться с некоторыми моими работами. Ознакомится с перечнем оказываемых мною услуг и ценами на них.</div></div> <b class="switch"><span class="turn_on">Открыть картинку 1</span><span class="turn_off">Закрыть картинку 1</span></b> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb10_400x300.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть картинку 2</span><span class="turn_off">Закрыт картинку 2</span></b> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb11_400x300.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть картинку 3</span><span class="turn_off">Закрыт картинку 3</span></b> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb12_400x300.jpg" alt="" /></div> <b class="switch"><span class="turn_on">Открыть картинку 4</span><span class="turn_off">Закрыт картинку 4</span></b> <div class="hide"><img src="http://skriptkpbstudio.ucoz.ru/kartink_primery/goriz/spb13_400x300.jpg" alt="" /></div> </div>
Основное подписано. Думаю, Вы легко разберётесь. Колличество инфориационных блоков в переключателе на Ваше усмотрение. В блоки можно всиавлять любые теги, т.е. всё что Вам нужно.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.