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

Краткие пояснения к скрипту

Скрипт позволяет управлять объектами с помощью атрибута visibility.
При задании объектов:
объекту который будет виден изначально задаем (visibility:show; visibility:visible)
всем остальным (visibility:hide; visibility:hidden).
Далее при управлении объектами:
объекту который хотим активизировать задаем (visibility:show; visibility:visible)
а всем остальным (visibility:hide; visibility:hidden).
Это суть работы скрипта.
Используя скрипт можно создавать:
странички небольших размеров но содержаших большое колличество информации
cпранички будут не загруженными ненужной информацией тоесть прекрасно читаемыми
Применение скрипта может служить прекрасной альтернативой фреймам.
На базе скрипта можно делать галереи, книги, описания, презентации и т.д.

Sommerende auf dem Mars
27.juni 1997

Planetarischer Nebel M2-9
17.dezember 1997

Pistol Nebel und massiver Stern

Kollidierende Galaxien NGC 4038 und NGC 4039
21.oktober 1997

Galaxis ARP 220
09.juni 1997

Управление объектоми с помощью тега DIV на примере галереи с окнами пояснений

Фото 1 | Фото 2 | Фото 3 | Фото 4 | Фото 5 | Описание

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

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

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

Скрипт позволяет управлять объектами(включать их - "show" или выключать - "hide") с помощью тега div. Объектом может быть что угодно: картинка, табличка, текст и т.д.

Внутри тега <BODY> - </BODY> в любом месте.

<div id="Layer1" style="position:absolute; width:550; height:360; left: 25; top: 50;z-index:1; visibility:show; visibility:visible">
  <TABLE WIDTH="550" HEIGHT="360" BGCOLOR="#3B3B3B" BORDER=1 CELLPADDING=10><TR>
  <TD ALIGN=left VALIGN=top>
  <FONT FACE=Arial SIZE=2 COLOR="#cccccc"><B>Краткие пояснения к скрипту</B></FONT><BR>
  <IMG SRC="leer.gif" WIDTH=400 HEIGHT=1 BORDER=0><BR> <BR>
  <FONT FACE=Arial SIZE=1 COLOR="#CCCCCC"><B>Скрипт позволяет управлять объектами с помощью атрибута visibility.<br>
  <IMG SRC="leer.gif" WIDTH=20 HEIGHT=2 BORDER=0>При задании объектов:<br>
  <IMG SRC="leer.gif" WIDTH=50 HEIGHT=2 BORDER=0>объекту который будет виден изначально задаем (visibility:show; visibility:visible)<br>
  <IMG SRC="leer.gif" WIDTH=50 HEIGHT=2 BORDER=0>всем остальным (visibility:hide; visibility:hidden).<br>
  <IMG SRC="leer.gif" WIDTH=20 HEIGHT=2 BORDER=0>Далее при управлении объектами:<br>
  <IMG SRC="leer.gif" WIDTH=50 HEIGHT=2 BORDER=0>объекту который хотим активизировать задаем (visibility:show; visibility:visible)<br>
  <IMG SRC="leer.gif" WIDTH=50 HEIGHT=2 BORDER=0>а всем остальным (visibility:hide; visibility:hidden).<br>Это суть работы скрипта.<br>
  <IMG SRC="leer.gif" WIDTH=50 HEIGHT=2 BORDER=0>Используя скрипт можно создавать:<br>
  <IMG SRC="leer.gif" WIDTH=70 HEIGHT=2 BORDER=0>странички небольших размеров но содержаших большое колличество  информации<br>
  <IMG SRC="leer.gif" WIDTH=70 HEIGHT=2 BORDER=0>cпранички будут не загруженными ненужной информацией тоесть прекрасно читаемыми<br>
  <IMG SRC="leer.gif" WIDTH=100 HEIGHT=2 BORDER=0>Применение скрипта может служить прекрасной альтернативой фреймам.</B></FONT></TR></TABLE></div> 

<div id="image1" style="position:absolute; width:550; height:360; left: 25; top: 50;z-index:5; visibility:hide; visibility:hidden">
  <TABLE WIDTH="550" HEIGHT="360" BGCOLOR="#3B3B3B" BORDER=1 CELLPADDING=10><TR>
  <TD ALIGN=center VALIGN=middle><A HREF="#" target="HAUPT" onMouseOver="show('Text1')" onMouseOut="hide('Text1')"><IMG SRC="mars.jpg" WIDTH=522 HEIGHT=326 BORDER=0></A>
  </TR></TABLE></div>
 
<div id="image2" style="position:absolute; width:550; height:360; left: 25; top: 50;z-index:5; visibility:hide; visibility:hidden">
  <TABLE WIDTH="550" HEIGHT="360" BGCOLOR="#3B3B3B" BORDER=1 CELLPADDING=10><TR>
  <TD ALIGN=center VALIGN=middle><A HREF="#" target="HAUPT" onMouseOver="show('Text2')" onMouseOut="hide('Text2')"><IMG SRC="NebelM2.jpg" WIDTH=522 HEIGHT=326 BORDER=0></A>
  </TR></TABLE></div>

<div id="image3" style="position:absolute; width:550; height:360; left: 25; top: 50;z-index:5; visibility:hide; visibility:hidden">
  <TABLE WIDTH="550" HEIGHT="360" BGCOLOR="#3B3B3B" BORDER=1 CELLPADDING=10><TR>
  <TD ALIGN=center VALIGN=middle><A HREF="#" target="HAUPT" onMouseOver="show('Text3')" onMouseOut="hide('Text3')"><IMG SRC="nebula.jpg" WIDTH=522 HEIGHT=326 BORDER=0></A>
  </TR></TABLE></div>

<div id="image4" style="position:absolute; width:550; height:360; left: 25; top: 50;z-index:5; visibility:hide; visibility:hidden">
  <TABLE WIDTH="550" HEIGHT="360" BGCOLOR="#3B3B3B" BORDER=1 CELLPADDING=10><TR>
  <TD ALIGN=center VALIGN=middle><A HREF="#" target="HAUPT" onMouseOver="show('Text4')" onMouseOut="hide('Text4')"><IMG SRC="NGC4038.jpg" WIDTH=522 HEIGHT=326 BORDER=0></A>
  </TR></TABLE>
</div>

<div id="image5" style="position:absolute; width:550; height:360; left: 25; top: 50;z-index:5; visibility:hide; visibility:hidden">
  <TABLE WIDTH="550" HEIGHT="360" BGCOLOR="#3B3B3B" BORDER=1 CELLPADDING=10><TR>
  <TD ALIGN=center VALIGN=middle><A HREF="#" target="HAUPT" onMouseOver="show('Text5')" onMouseOut="hide('Text5')"><IMG SRC="Arp220.jpg" WIDTH=522 HEIGHT=326 BORDER=0></A>
  </TR></TABLE>
</div>


<DIV ID="Text1" style="position:absolute; width:130; height:150; z-index:5; top: 100; left:550; visibility:hide; visibility:hidden;">
<TABLE WIDTH=130 HEIGHT=150 BGCOLOR="blue" BORDER=0 CELLPADDING=5><TR><TD ALIGN=left VALIGN=top>
<FONT FACE=arial Size=1 COLOR="#FFEFED">Sommerende auf dem Mars<BR>27.juni 1997
</FONT></TD></TR></TABLE></DIV>

<DIV ID="Text2" style="position:absolute; width:130; height:150; z-index:5; top: 100; left:550; visibility:hide; visibility:hidden;">
<TABLE WIDTH=130 HEIGHT=150 BGCOLOR="blue" BORDER=0 CELLPADDING=5><TR><TD ALIGN=left VALIGN=top>
<FONT FACE=arial Size=1 COLOR="#FFEFED">Planetarischer Nebel M2-9<BR>17.dezember 1997
</FONT></TD></TR></TABLE></DIV>

<DIV ID="Text3" style="position:absolute; width:130; height:150; z-index:5; top: 100; left:550; visibility:hide; visibility:hidden;">
<TABLE WIDTH=130 HEIGHT=150 BGCOLOR="blue" BORDER=0 CELLPADDING=5><TR><TD ALIGN=left VALIGN=top>
<FONT FACE=arial Size=1 COLOR="#FFEFED">Pistol Nebel und massiver Stern
</FONT></TD></TR></TABLE></DIV>

<DIV ID="Text4" style="position:absolute; width:130; height:150; z-index:5; top: 100; left:550; visibility:hide; visibility:hidden;">
<TABLE WIDTH=130 HEIGHT=150 BGCOLOR="blue" BORDER=0 CELLPADDING=5><TR><TD ALIGN=left VALIGN=top>
<FONT FACE=arial Size=1 COLOR="#FFEFED">Kollidierende Galaxien NGC 4038 und NGC 4039<BR>21.oktober 1997
</FONT></TD></TR></TABLE></DIV>

<DIV ID="Text5" style="position:absolute; width:130; height:150; z-index:5; top: 100; left:550; visibility:hide; visibility:hidden;">
<TABLE WIDTH=130 HEIGHT=150 BGCOLOR="blue" BORDER=0 CELLPADDING=5><TR><TD ALIGN=left VALIGN=top>
<FONT FACE=arial Size=1 COLOR="#FFEFED">Galaxis ARP 220<BR>09.juni 1997
</FONT></TD></TR></TABLE></DIV>

Задаём сами объекты и всплывающие окна к ним(если нужно). Их размеры, местоположение, стиль и информацию в них. Впринципе всё подписано, проблем быть не должно.

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

<TABLE WIDTH="550" HEIGHT=20 BORDER=0 CELLSPACING=0 CELLPADDING=5><TR><TD VALIGN=bottom ALIGN=left style="padding-left:15"><IMG SRC="leer.gif" WIDTH=65 HEIGHT=2 BORDER=0>   
 <A HREF="Javascript:show('image1'),hide('image2'),hide('image3'),hide('image4'),hide('image5')"><FONT FACE=Arial SIZE=2 COLOR="#c1c1c1">Bild 1</FONT></A>   <FONT FACE=Arial SIZE=2 COLOR="#FF9966">|</FONT>   
 <A HREF="Javascript:show('image2'),hide('image1'),hide('image3'),hide('image4'),hide('image5')"><FONT FACE=Arial SIZE=2 COLOR="#c1c1c1">Bild 2</FONT></A>   <FONT FACE=Arial SIZE=2 COLOR="#FF9966">|</FONT>   
 <A HREF="Javascript:show('image3'),hide('image1'),hide('image2'),hide('image4'),hide('image5')"><FONT FACE=Arial SIZE=2 COLOR="#c1c1c1">Bild 3</FONT></A>   <FONT FACE=Arial SIZE=2 COLOR="#FF9966">|</FONT>   
 <A HREF="Javascript:show('image4'),hide('image1'),hide('image2'),hide('image3'),hide('image5')"><FONT FACE=Arial SIZE=2 COLOR="#c1c1c1">Bild 4</FONT></A>   <FONT FACE=Arial SIZE=2 COLOR="#FF9966">|</FONT>   
 <A HREF="Javascript:show('image5'),hide('image1'),hide('image2'),hide('image3'),hide('image4')"><FONT FACE=Arial SIZE=2 COLOR="#c1c1c1">Bild 5</FONT></A>   <FONT FACE=Arial SIZE=2 COLOR="#FF9966">|</FONT>   
 <A HREF="Javascript:hide('image5'),hide('image1'),hide('image2'),hide('image3'),hide('image4')"><FONT FACE=Arial SIZE=2 COLOR="#c1c1c1">Code</FONT></A>   <IMG SRC="leer.gif" WIDTH=65 HEIGHT=2 BORDER=0>
 </TD></TR></TABLE>

Задаём сами ссылки меню, прописываем вызов нужных функций с нужными параметрами для каждой ссылки. Как видно одним кликом можно сразу открывать и закрывать любое колличество объектов в разных местах странички.

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

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