Эффекты на основе Java Script, jQuery и т.д.

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

Переключатель картинок-информационных блоков с разными режимами работы

Событие=Onclick ( по клику ) (картинки с описанием) Link 9 Link 10 Link 11	KPBshablon На сайте представлены современные креативные дизайны. Дизайны разбиты по организации и структуре. HTML - дизайны организованные c применение HTML, JavaScript и jQuery. Ко многим дизайнам есть шаблоны для движка UCOZ. HTML+Flash - тоже самое с применением Flash элементов. jQuery - дизайны орманизованные на базе jQuery галерей. Рекомендую обязательно посетить данный сайт. Открыть сайт WebKPB Библиотека Flash всевозможного назначения. Для удобства поиска и работы все Flash сведены в каталог. Каждую Flash можно посмотреть в работе. К каждой Flash есть fla исходник. Рекомендую обязательно посетить данный сайт. Открыть сайт KPBwebStudio Моя личная WEBстудия. Здесь можно посмотреть некоторые мои работы, ознакомиться с перечнем оказываемых мною услуг и ценами на них. Сайт создан полностью по Flash технологии. Обязательно посетите данный сайт. Открыть сайт ScriptKPBstudio Это сайт на котором Вы находитесь сейчас. Открыть главную страничку сайт Описание-подсказка к картинке 1, информационный блок или любая нужная Вам информация Описание-подсказка к картинке 2, информационный блок или любая нужная Вам информация Описание-подсказка к картинке 3, информационный блок или любая нужная Вам информация Описание-подсказка к картинке 4, информационный блок или любая нужная Вам информация	Событие=Onmouseover ( при наведении ) (информационные блоки) Link 0 Link 1 Link 2	Событие=Onmouseover / out (при наведении и снятии курсора) (картинки)
	Автоматический режим Включен Start Stop

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<script type="text/javascript">
auto=1 // 0 = no, 1 = yes     (1-автоматический режим; 0-ручной режим;)
elementNum=13 // number of fading elements  (колличество информационных блоков)
autoTime=5 // seconds       (интервал переключения в автоматическо режиме)

minOpac=0        // минимальная прозрачность
maxOpac=100      // максимальная прозрачность
fadeInStep=40    // скорость появления информационного блока
fadeOutStep=20   // скорость исчезновения информационного блока
autoCount=0      // номер начального элемента
awtStart = "Включен"   // текс при включенном автоматическом режиме
awtStop = "Выключен"   // текст при выключенном автоматическом режиме
</script>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/perekg_kart_inform.js"></script>

<style type=text/css>
/* информационный блок */
.rule1{
filter:alpha(opacity=0);
opacity:0;

position:absolute;
width:300px;
height:400px;
color:white;
text-align:left;
border:2px outset #c3bfa4;
}
/* фоны информационных блоков */
#fader0{background-color:#00AA00}
#fader1{background-color:#660066}
#fader2{background-color:#AA0000}
#fader3{background-color:#0000AA}

#fader9{background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00001.jpg)}
#fader10{background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00002.jpg)}
#fader11{background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00003.jpg)}
#fader12{background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00010.jpg);}
/* стиль внутренних элементов информационных блоков */
.connto { padding: 5px;}
.connto h3 {text-align: center; margin: 0;}
.connto img {float: left; margin: 5px; border: #ff00ff 2px solid; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
.connto div a {color: #00ffff;}
.opisan {background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/title.png); /*width: 100%;*/ padding: 5px; border-bottom: #ff00ff 2px solid;}
a img {width:60px;height:40px;border: #ff00ff 1px solid; margin: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
#sp1 {color: #00ffff;}  /* цвет текста Автоматический режим - Включен-Выключен */
</style>

Всё подписано, проблем быть не должно.

В сам тег <BODY> вставляем атрибут

onload="init_fader()"

Запускаем функцию init_fader() после полной загрузки странички.

Внутри тега <BODY> - </BODY> там где у Вас будет переключатель.

<center>

<table border="0" cellspacing="10" border=1>
<tr>
<td align="center" valign="top" width="100">
Событие=Onclick <br> ( по клику )<br> (картинки с описанием)
<p><a href="#" onclick="fadeIn(9)">Link 9</a><br>
<a href="#" onclick="fadeIn(10)">Link 10</a><br>
<a href="#" onclick="fadeIn(11)">Link 11</a></p>
</td>
<td valign="top" width="300" height="400">

<div id="fader0" class="rule1"><div class="connto">
<h3>KPBshablon</h3>
	<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/2.png"> На сайте представлены современные креативные дизайны.<br> Дизайны разбиты по организации и структуре.<br> HTML - дизайны организованные c применение HTML, JavaScript и jQuery. Ко многим дизайнам есть шаблоны для движка UCOZ.<br> HTML+Flash - тоже самое с применением Flash элементов.<br> jQuery - дизайны орманизованные на базе jQuery галерей.<br> Рекомендую обязательно посетить данный сайт.
	<div style="text-align: right; margin-right: 10px;"><a href="http://kpbshablon.ucoz.ru">Открыть сайт</a></div></div>
	</div>
	
<div id="fader1" class="rule1"><div class="connto">
	<h3>WebKPB</h3>
	<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/2.png"> Библиотека Flash всевозможного назначения.<br> Для удобства поиска и работы все Flash сведены в каталог.<br> Каждую Flash можно посмотреть в работе.<br> К каждой Flash есть fla исходник. <br> Рекомендую обязательно посетить данный сайт.
	<div style="text-align: right; margin-right: 10px;"><a href="http://kpbshablon.ucoz.ru">Открыть сайт</a></div>
</div></div>

<div id="fader2" class="rule1"><div class="connto">
	<h3>KPBwebStudio</h3>
	<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/2.png"> Моя личная WEBстудия. Здесь можно посмотреть некоторые мои работы, ознакомиться с перечнем оказываемых мною услуг и ценами на них. Сайт создан полностью по Flash технологии. <br> Обязательно посетите данный сайт.
	<div style="text-align: right; margin-right: 10px;"><a href="http://kpbshablon.ucoz.ru">Открыть сайт</a></div>
</div></div>

<div id="fader3" class="rule1"><div class="connto">
	<h3>ScriptKPBstudio</h3>
	<img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/2.png"> Это сайт на котором Вы находитесь сейчас.
	<div style="text-align: right; margin-right: 10px;"><a href="http://kpbshablon.ucoz.ru">Открыть главную страничку сайт</a></div>
</div></div>
 
<img id="fader4" class="rule1" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00001.jpg">
<img id="fader5" class="rule1" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00002.jpg">
<img id="fader6" class="rule1" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00003.jpg">
<img id="fader7" class="rule1" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/1.jpg">
<img id="fader8" class="rule1" src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00010.jpg">

<div id="fader9" class="rule1"><div class="opisan">Описание-подсказка к картинке 1, информационный блок или любая нужная Вам информация</div></div>
<div id="fader10" class="rule1"><div class="opisan">Описание-подсказка к картинке 2, информационный блок или любая нужная Вам информация</div></div>
<div id="fader11" class="rule1"><div class="opisan">Описание-подсказка к картинке 3, информационный блок или любая нужная Вам информация</div></div>
<div id="fader12" class="rule1"><div class="opisan">Описание-подсказка к картинке 4, информационный блок или любая нужная Вам информация</div></div>

</td>
<td align="center" valign="top">
Событие=Onmouseover <br> ( при наведении ) <br> (информационные блоки)
<P>
<a href="#" onmouseover="fadeIn(0)">Link 0</a><br>
<a href="#" onmouseover="fadeIn(1)">Link 1</a><br>
<a href="#" onmouseover="fadeIn(2)">Link 2</a><br>
</td>
<td align="center" valign="top">
Событие=Onmouseover / out <br> (при наведении и снятии курсора) <br> (картинки)<br>

<a href="#" onmouseover="fadeIn(7)" onmouseout="fadeOut(7)"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/1.jpg"></a><br>
<a href="#" onmouseover="fadeIn(5)" onmouseout="fadeOut(5)"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00002.jpg"></a><br>
<a href="#" onmouseover="fadeIn(6)" onmouseout="fadeOut(6)"><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/perekluchat/436/00003.jpg"></a><br>
</td>
</tr>
<tr>
<td></td>
<td align="center">    
<form>
Автоматический режим <span id="sp1">Включен</span> <br>
Start <input type="radio" name="c1" onclick="aut()" checked> <input type="radio" name="c1" onclick="aut()"> Stop
</form>
</td>
<td></td>
<td></td>
</tr>
</table>
</center>

Здесь прописан вариант переключателя и 3-и варианта кнопок-ссылок для ручного переключения информационных блоков и кнопки выбора режима работы переключателя. Переключатель работает следующим образом. При открытии странички переключатель запускается в автоматическом режиме, если нужно можно задать ручной. При клике по кнопке Stop или любом ручном переключении информационного блока переключатель переходит в ручной режим. Чтобы опять запустить его в автоматическом режиме кликните по кнопке Start. Колличество информационных блоков в переключателе на Ваше усмотрение. Вариан кнопок-ссылок для ручного управления можете использовать любой или комбинировать их.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.