|
Готовые для использования примеры JavaScript
ПРИМЕР-1 Баннерная системаВсе баннерооменные сети используют CGI скрипты,
но мы можем обойтись обычным Java скриптом.
Этот скрипт поможет вам организовать на своем сайте
или страничке баннерную систему.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
Первый фрагмент вы вставляете в любое
место странички. Лучше в теге <HEAD>.
<SCRIPT language="JavaScript">// <!-- Main
function banners()
{
Дальше идёт перечисление ссылок и соответствующих
им баннеров. Мы для примера берём 4 ссылки.
this[1]="http://www.eurostar.com.ua/rus.htm"; Здесь вы пишете вашу ссылку.
this[2]="http://www.eurostar.com.ua/img/banner468x60ru-1.gif"; Здесь указываете путь к графическому файлу
this[3]="http://www.eurostar.com.ua/vac.htm";
this[4]="http://www.eurostar.com.ua/img/banner468x60ru-2.gif";
this[5]="http://www.eurostar.com.ua/promotion.htm";
this[6]="http://www.eurostar.com.ua/img/banner468x60ru-3.gif";
this[7]="http://www.eurostar.com.ua/promotion.htm";
this[8]="http://www.eurostar.com.ua/img/banner468x60ru-4.gif";
Количество таких ссылок может быть любым.
Дальше идёт часть скрипта, которая как раз и отвечает
за функцию обмена баннерами. Приведём его :
if ((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0,1)) < 3)) { return(' '); }
var j=(new Date()).getSeconds() % 4;
document.write('<a href=' + this[2*j+1] + ' target=blank><img src=' +
this[2*j+2] + ' border=0 width=468 height=60></a>');
return(' ');
}
// --></SCRIPT>Следует разобрать только одну переменную VAR J.
Она должна соответствовать количеству показываемых
баннеров. У нас это "4".
Следующий фрагмент нужно разместить в том месте,
где предполагается вывод на экран баннера.
<center><SCRIPT language="JavaScript">// <!-- Main
banners();
// --></SCRIPT> ПРИМЕР-2 Изменение картинки
Изменение картинки при загрузке документа в зависимости от текущего
времени осуществляется с использованием объекта Date.
Работает во всех броузерах, поддерживающих JavaScript.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<script language="JavaScript">function ban()
{
j=(new Date()).getSeconds()%2
this[0]="file1.gif"
this[2]="file2.gif"
вставьте свои картинки вместо file1.gif и file2.gif
document.write("<img src=",this[2*j],">")
return (" ");
}
</script><SCRIPT>document.write(ban())
</SCRIPT> ПРИМЕР-3 Голосование
Если нет возможности использования CGI-скриптов,
а Вам очень важно получить от посетителей ответы
на конкретные вопросы, рекомендую нижеследующий скрипт.
Голосование построенное с использованием функции mailto.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<script LANGUAGE="JavaScript"><!--
function SendMail(){
document.forms[0].action="mailto: name@company.com?body=Vote="+
document.forms[0].menu.options[document.forms[0]. menu.selectedIndex].value;
}
//--></script><form method="post" name="form" onsubmit="SendMail()"><SELECT name="menu" size="1"> кол-во видимых полей 1-5
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select><input type="submit" value="Отправить"></form> ПРИМЕР-4 Два фрейма
Java-скрипт, при котором, кликнув на ссылку, откроется
страница с двумя фреймами.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<a
href = " javascript: loadFrames('http://www.eurostar.com.ua/',
'www.eurostar.com.ua/promotion.htm') ">
Нажмите здесь. </a>
<SCRIPT LANGUAGE = "JavaScript"><!-- Begin
function loadFrames(page1, page2) {
framecode = "<frameset rows='50%,50%'>"
+ "<frame src='" + page1 + "'>"
+ "<frame src='" + page2 + "'>"
+ "</frameset>";
page = window.open("");
page.document.open();
page.document.write(framecode);
page.document.close();
}
// End --></script> ПРИМЕР-5 Часики 02/17/2002 08:00:00
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<script language="JavaScript">function fulltime() {
var time=new Date();
document.clock.full.value=time.toLocaleString();
setTimeout('fulltime()',500)
}
</script><center><form name=clock><input type=text size=20 name=full></form><script language="JavaScript">fulltime();
</script> ПРИМЕР-6 Текущая дата
Текущая дата: Sun Feb 17 09:24:32 UTC+0300 2002
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<SCRIPT LANGUAGE="JavaScript"> current_date = new Date();
document.write("<p><i>Текуща\я дата:</i> " +
current_date + ".<p>");
</SCRIPT> ПРИМЕР-7 Дата Число: 17.1.2002.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<SCRIPT LANGUAGE="JavaScript"> current_date = new Date();
document.write("<i>Число:</i> " + current_date.getDate() +
"." + current_date.getMonth() + "." + current_date.getYear() + ".");
</SCRIPT>
ПРИМЕР-8 Графические
часы и дата
Дополнительно необходимо иметь 14 .gif файлов, общий размер всех
около 5 Kbt, разместить в одной папке с документом .html,
(var text = "Здесь можно вставить текст")
Cкачать .gif здесь
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<SCRIPT LANGUAGE="JavaScript">document.write(setClock())
function setClock() {
var text = ""
var openImage = "<IMG SRC=\"" + getPath(location.href) + "dg"
var closeImage = ".gif\" HEIGHT=21 WIDTH=16>"
var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""
if (hour >= 12) {
hour -= 12
ampm = "pm"
} else
ampm = "am"
hour = (hour == 0) ? 12 : hour
if (minute < 10)
minute = "0" + minute
// do not parse this number!
minute += ""
hour += ""
for (var i = 0; i < hour.length; ++i) {
text += openImage + hour.charAt(i) + closeImage
}
text += openImage + "c.gif\" HEIGHT=21 WIDTH=9>"
for (var i = 0; i < minute.length; ++i) {
text += openImage + minute.charAt(i) + closeImage
}
text += openImage + ampm + closeImage
return text}function getPath(url) {
lastSlash = url.lastIndexOf("/")
return url.substring(0, lastSlash + 1)}
</SCRIPT><SCRIPT LANGUAGE="JavaScript">document.write(setDate())
function setDate() {
var text = ""
var openImage = "<IMG SRC=\"" + getPath(location.href) + "dg"
var closeImage = ".gif\" HEIGHT=21 WIDTH=16>"
var now = new Date()
var date = now.getDate()
var month = now.getMonth()
var year = now.getYear()
now = null
month++
// 0 - 11 => 1 - 12
date += ""
month += ""
year += ""
for (var i = 0; i < date.length; ++i) {
text += openImage + date.charAt(i) + closeImage
}
text += openImage + "p.gif\" HEIGHT=21 WIDTH=9>"
for (var i = 0; i < month.length; ++i) {
text += openImage + month.charAt(i) + closeImage
}
text += openImage + "p.gif\" HEIGHT=21 WIDTH=9>"
for (var i = 0; i < year.length; ++i) {
text += openImage + year.charAt(i) + closeImage
}
return text}function getPath(url) {
lastSlash = url.lastIndexOf("/")
return url.substring(0, lastSlash + 1)}
</SCRIPT> ПРИМЕР-9 Бегущая строка в поле
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<script language="JavaScript">var line="Бегущая строка";
var speed=150;
var i=0;
function m_line() {
if(i++<line.length) {
document.cit.forum.value=line.substring(0,i);
}
else{
document.cit.forum.value=" ";
i=0;
}
setTimeout('m_line()',speed);
}
</script><center><form name=cit><input type=text size=20 name=forum></form></center><script language="JavaScript">m_line();
</script> ПРИМЕР-10 Бегущая строка в cтроке статуса
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<html><head><title>Бегущая строка</title><script language="javascript">function statusmessageobject(p,d) {
this.msg = message
this.out = " "
this.pos = position
this.delay = delay
this.i = 0
this.reset = clearmessage
}
function clearmessage() {
this.pos = position
}
var position = 100
var delay = 40
var message = "Бегущая строка"
+ " в строке статуса"
var scroll = new statusmessageobject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
scroll.out += " "
}
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset()
}
setTimeout ('scroller()',scroll.delay)
}
</script></head><body bgcolor="white" onLoad="scroller()"></body>
</html> ПРИМЕР-11 ПРИВЕТСТВИЕ
Cкрипт позволяющий приветствовать посетителя в зависимости от времени суток.
Этот код вставить между тегами ...
(где 18 - время, после которого наступает вечер;
Добрый вечер - фраза приветсвия, в случае, если время вечернее;
12 - время после которого наступает день;
Добрый день - фраза приветсвия днём; Доброе утро - соответственно утром.)
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 18) display = "Добрый вечер";
else if (thehour >12) display = "Добрый день";
else display = "Доброе утро";
document.write(display);
// End -->
</script> ПРИМЕР-12
Проверить включен ли JavaScript в браузере
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<script language="Javascript"><!--
document.write('Yes! JavaScript!');
// --></script><noscript>Your browser can't do JavaScript.
</noscript></script> ПРИМЕР-13 Очень практичное меню
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<html><body text=white link="#ff5555" alink="#ff0000"
vlink="#999999"><style>.menu{ position: absolute; top:0; z-index: 2;}
.submenu{ position: absolute; top: 22; z-index: 0; visibility: hide; visibility: hidden;}
</style><script><!--
var old;
var memold;
var subold;
if(document.layers)
{
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=do_out;
} else
{
document.onmouseup=do_out;
}
function show_layer(x)
{
if(document.layers)
document.layers[x].visibility="show";
else
document.all[x].style.visibility="visible";
}
function hide_layer(x)
{
if(document.layers)
document.layers[x].visibility="hide";
else
document.all[x].style.visibility="hidden";
}
function do_menu(x)
{
if(!old)
old=memold;
if(old!=x)
{
show_layer(x);
old=x;
} else
old="";
}
function do_check(x)
{
if(old && old!=x)
{
hide_layer(old);
show_layer(x);
old=x;
}
do_submenu();
}
function do_out()
{
if(old)
hide_layer(old);
memold=old; old="";
do_submenu();
}
function do_submenu(x)
{
if(subold)
{
hide_layer(subold);
subold="";
}
if(x)
{
show_layer(x);
subold=x;
}
}
// --></script><div id="m1" class="menu" style="left: 5;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="115"><tr><td><a href="javascript:do_menu('m1x')"
onmouseover="do_check('m1x')"><b>Системы</b></a></td></tr></table></code><div id="m1x" class="submenu" style="left:
5;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="115"><tr><td><a href="http://">Windows</a><br><a href="http://">Mac</a><br><a href="http://">Unix</a><br><a href="http://">BeOS</a> </td></tr></table></div><div id="m2" class="menu" style="left:
120;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="100"><tr><td><a href="javascript:do_menu('m2x')"
onmouseover="do_check('m2x')"><b>Software</b></a></td></tr></table></div><div id="m2x" class="submenu" style="left:
120;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="100"><tr><td><a href="http://"
onmouseover="do_submenu('m21x')">Work</a> >><br><a href="http://"
onmouseover="do_submenu()">Tools</a><br><a href="http://"
onmouseover="do_submenu('m22x')">Spiele</a> >>
</td></tr></table></div><div id="m21x" class="submenu" style="left: 180;
top:24; z-index:1;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="100"><tr><td><a href="http://">Star Office</a><br><a href="http://">Communicator</a><br><a href="http://">Photoshop</a><a href="http://">Freehand</a> </td></tr></table></div><div id="m22x" class="submenu" style="left: 180;
top:58; z-index:1;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="100"><tr><td><a href="http://">Tomb Raider</a><br><a href="http://">Quake</a><br><a href="http://">Swing</a> </td></tr></table></div><div id="m3" class="menu" style="left:
220;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="100"><tr><td><a href="javascript:do_menu('m3x')"
onmouseover="do_check('m3x')"><b>Hardware</b></a></td></tr></table></div><div id="m3x" class="submenu" style="left:
220;"><table bgcolor="000000" cellspacing="0" cellpadding="2"
border="1" width="100"><tr><td><a href="http://">PC</a><br><a href="http://">Mac</a><br><a href="http://">Amiga</a><br><a href="http://">UNIX</a> </td></tr></table></div></body></html></div></div><br><br><hr style="color: red;"><br><br><P><font size="+2" color="Green"><i>ПРИМЕР-14</i> <font size="+1">всплывающая подсказка</font></font><br>Следующий скрипт будет выдавать всплывающую подсказку при <br>наведении мыши на кнопку или просто на рисунок. <br><div><div class="spoiler_main2" onclick="show_hide_text(this)"><u>» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «</u></div><div class="spoiler_main3"><code><xmp> <html><head><meta content="text/html; charset=windows-1251"
http-equiv="Content-Type"><script language="JavaScript">if (parseInt(navigator.appVersion)>= 4)
{
if (navigator.appName == "Netscape")
{
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
function show(layerName)
{
if (parseInt(navigator.appVersion)>= 4)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
function cls(layerName){
if (parseInt(navigator.appVersion)>= 4)
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
}
</script><style type="text/css">#text1 {
HEIGHT: 80px; LEFT: 0px; POSITION: absolute; TOP: 50px; VISIBILITY:
hidden; WIDTH: 250px; Z-INDEX: 10
}
</style><meta content="Microsoft FrontPage 3.0" name="GENERATOR"><title>Всплывающая подсказка</title></head><body bgColor="#FFFFFF" text="#000000"><div align="center" id="text1" style="HEIGHT: 80px; LEFT:
10px; TOP: 15px; WIDTH: 250px"><table border="0" width="100%" bgcolor="#000000"
cellspacing="1" cellpadding="2"><TBODY><tr><td align="middle" bgcolor="#FFFFE1"><p
align="center"><font face="Fixedsys"
color="#FF0000">Всплывающая
подсказка</font></p><p align="left"><font face="MS Sans Serif"
size="1"> А вот
собственно и сама всплывающая подсказка...<br>Она удобна тем, что:<br>1. Она не исчезает в самый неподходящий момент
(она исчезнет только после того, как вы уберёте
курсор с ссылки);<br>2. Всплывающую подсказку можно добавлять не
только к графической ссылке, но и к обычному
тексту;<br>3. Здесь можно менять шрифты;<br>4. Можно менять цвета шрифтов;<br>5. Сюда можно вставлять рисунки и т.д.</font></td></tr></TBODY></table></code><p><a href="http://www.eurostar.com.ua/" onmouseout="cls('text1');"
onmouseover="show('text1');"><img
src="../img/banner88x31.jpg" border="0" width="88"
height="31"></a></p></body></html></div></div><br><br><hr style="color: red;"><br><br><P><font size="+2" color="Green"><i>ПРИМЕР-15</i> <font size="+1">Авто ссылка</font></font><br>Этот скрипт очень часто применяют для автоматического открытия <br>окна с ссылкой на какого-нибудь спонсора, <br>устанавливайте желаемые размеры окна<br><div><div class="spoiler_main2" onclick="show_hide_text(this)"><u>» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «</u></div><div class="spoiler_main3"><code><xmp>
<SCRIPT LANGUAGE="JavaScript">window.open('ВАША ССЫЛКА',"PROBY",'height=300,width=550');
</SCRIPT> ПРИМЕР-16 Каждый день новое сообщение
Этот скрипт будет каждый день выдавать на вашей страничке полезный совет,
а может еще что-нибудь, короче любое ваше сообщение.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<html><table border="0" width="100%" bgcolor="#E8E8E8" cellspacing="0" cellpadding="0"><tr><td width="100%"><script><!--
var today_obj=new Date()
var today_date=today_obj.getDate()
var tips=new Array()
//Можете вставить свой заголовок
var tiptitle=' <b>Совет дня</b><br>'
//Измените на свои советы
tips[1]='Совет на 1 день месяца'
tips[2]='Совет на 2 день месяца'
tips[3]='Совет на 3 день месяца'
tips[4]='Совет на 4 день месяца'
tips[5]='Совет на 5 день месяца'
tips[6]='Совет на 6 день месяца'
tips[7]='Совет на 7 день месяца'
tips[8]='Совет на 8 день месяца'
tips[9]='Совет на 9 день месяца'
tips[10]='Совет на 10 день месяца'
tips[11]='Совет на 11 день месяца'
tips[12]='Совет на 12 день месяца'
tips[13]='Совет на 13 день месяца'
tips[14]='Совет на 14 день месяца'
tips[15]='Совет на 15 день месяца'
tips[16]='Совет на 16 день месяца'
tips[17]='Совет на 17 день месяца'
tips[18]='Совет на 18 день месяца'
tips[19]='Совет на 19 день месяца'
tips[20]='Совет на 20 день месяца'
tips[21]='Совет на 21 день месяца'
tips[22]='Совет на 22 день месяца'
tips[23]='Совет на 23 день месяца'
tips[24]='Совет на 24 день месяца'
tips[25]='Совет на 25 день месяца'
tips[26]='Совет на 26 день месяца'
tips[27]='Совет на 27 день месяца'
tips[28]='Совет на 28 день месяца'
tips[29]='Совет на 29 день месяца'
tips[30]='Совет на 30 день месяца'
tips[31]='Совет на 31 день месяца'
document.write(tiptitle)
document.write(tips[today_date])
//--></script></td></tr></table></HTML> ПРИМЕР-17 Падающие снежинки
Этот скрипт создает на странице эффект падающего снега (листьев и т.д.)
Менять рисунок в этой строчке скрипта:
var snowflake = "1.gif"; (Здесь можете скачать снежинки, листья)
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<SCRIPT LANGUAGE="JavaScript1.2"><!-- Begin
var no = 35; // колличество снежинок
var speed = 6; // скорость снежинок
var snowflake = "1.gif";
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\">");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End --></script> ПРИМЕР-18 Добавляем звук и видео на страничку
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
Вы можете добавить на свою страничку звуки или видео клипы.
Они могут запускаться автоматически при загрузке странички.
Ниже находится список атрибутов которые вы можете использовать
для достижения нужной цели
(все они используются в теге <EMBED ...></EMBED>):
SRC=name.ext - имя звукового, видео клипа.
ALIGN=CENTER - расположения пульта управления (LEFT | CENTER | RIGHT).
WIDTH=X - где X ширина видео клипа в пикселах.
HEIGHT=Y - где Y высота видео клипа в пикселах.
AUTOSTART=TRUE - разрешает или запрещает браузеру запускать клип при загрузке странички (TRUE | FALSE).
REPEAT=TRUE - разрешает или запрещает повторять звуковой/видео клип (TRUE | FALSE) .
PLAY_LOOP=Z - если Вы указали REPEAT=TRUE, укажите здесь вместо Z количество повторений.
CONTROLS=SMALLCONSOLE - используйте этот атрибут если хотите, чтобы пульт управления был маленьким.
HIDDEN=TRUE - а этот атрибут необходим для того, чтобы не показывать пульт управления (TRUE | FALSE).
Они могут запускаться автоматически при загрузке странички.
Ниже находится список атрибутов которые вы можете использовать
для достижения нужной цели
(все они используются в теге <EMBED ...></EMBED>):
SRC=name.ext - имя звукового, видео клипа.
ALIGN=CENTER - расположения пульта управления (LEFT | CENTER | RIGHT).
WIDTH=X - где X ширина видео клипа в пикселах.
HEIGHT=Y - где Y высота видео клипа в пикселах.
AUTOSTART=TRUE - разрешает или запрещает браузеру запускать клип при загрузке странички (TRUE | FALSE).
REPEAT=TRUE - разрешает или запрещает повторять звуковой/видео клип (TRUE | FALSE) .
PLAY_LOOP=Z - если Вы указали REPEAT=TRUE, укажите здесь вместо Z количество повторений.
CONTROLS=SMALLCONSOLE - используйте этот атрибут если хотите, чтобы пульт управления был маленьким.
HIDDEN=TRUE - а этот атрибут необходим для того, чтобы не показывать пульт управления (TRUE | FALSE).
Вот несколько примеров использования звуковых/видео клипов
WAV файл со стандартным пультом управления:
<EMBED SRC="файл.wav" WIDTH=145 HEIGHT=55></EMBED>
MIDI файл со стандартным пультом управления:
<EMBED SRC="файл.mid" WIDTH=145 HEIGHT=55></EMBED>
AVI видео:
<EMBED SRC="файл.avi" WIDTH=300 HEIGHT=200></EMBED>
ПРИМЕР-19 Выпадающее меню
Если вы хотите использовать несколько выпадающих меню на странице,
у каждого меню должно быть индивидуальное имя, у этого оно menu.
Например, если будет два меню тогда во втором меню пропишите menu1
вместо menu.
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<form>
<select name="menu">
<option value="../notes.htm">Статьи - Все для Вебмастера
<option selected value="java1-10.htm">Примеры JavaScript1-10
<option value="../applets.htm">Примеры апплетов
<option value="../promotion.htm">Все для раскрутки сайта
</select>
<input type=button value="Ok"
onclick="top.location.href =
this.form.menu.options[this.form.menu.selectedIndex].value">
</form>
ПРИМЕР-20 Дата обновления документа
Этот скрипт предназначен для экономии вашего времени.
Используя его вам не придется менять дату обновления документа
при каждом его изменении. Он особенно полезен, если Вы обновляете
страницы очень
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<FONT SIZE="-1">Документ обновлен:
<SCRIPT LANGUAGE="JavaScript"><!--
document.writeln(document.lastModified)
// --></SCRIPT></FONT>
ПРИМЕР-21 Мигающие ссылки
Этот код вставляете между тегами <HEAD>...</HEAD>:
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<script language="JavaScript"><!--
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
// далее вы заполняете массив цветами, которые в последствии
// и будут поочередно меняться у ссылки
var colors = new initArray(
"#008000",
"green",
"#C6C68C",
"green",
"blue",
"purple",
"black",
"red");
pause_time = 0.5; // в секундах
link = 0; // начиная с этого номера в массиве
// (о котором уже говорилось выше) будут меняться цвета у ссылок
vlink = 4; // тоже самое, только для просмотренных ссылок
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance();",pause_time*1000);
}
linkDance();
// --></script> ПРИМЕР-22 Подчеркивание ссылки при наведении на нее мышки
Этот код вставляете между тегами <HEAD>...</HEAD>:
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<style type="text/css"><!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline; }
--></style> ПРИМЕР-23 Mеню с подсветкой кнопок, ссылок
Подставляйте свои .gif , ссылки и пользуйтесь!
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<HTML><HEAD> <title>меню с подсветкой кнопок, ссылок</title><script language="JavaScript1.2">function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=30
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
</script></HEAD><BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000"><H2><center>Загарающееся меню.</H2><HR><a href="#nul"><img src="name.gif" border=0 style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a><a href="#nul"><img src="name.gif" border=0 style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a><a href="#nul"><img src="name.gif" border=0 style="filter:alpha(opacity=50)" onMouseover="high(this)" onMouseout="low(this)"></a></BODY></HTML> ПРИМЕР-24 Mеню кнопкой GO
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<Form><Select Name="mymenu"> <Option Value="http://">Ваш текст - 1
<Option Value="http"//">Ваш текст - 2
<Option Value="http"//">Ваш текст - 3
<Option Value="http"//">Ваш текст - 4
</Select> <Input Type="button" Value="Go" OnClick="top.location.href=this.form.mymenu.options[this.form.mymenu.selectedIndex].value"></Form> ПРИМЕР-25 Mеню без кнопки GO
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<Form><Input Type="hidden" Name="select value"> <Select Name="sel" Size="1" OnChange="top.location.href = this.options[this.selectedIndex].value;"> <Option selected value=#>Навигация по сайту</Option> <Option value=http://>Ваш текст - 1</Option> <Option value=http://>Ваш текст - 2</Option> <Option value=http://>Ваш текст - 3</Option> <Option value=http://>Ваш текст - 4</Option></Select></Form> ПРИМЕР-26 Mеню Навигатор, в форме
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<TABLE border="2" bgcolor="black" cellspacing="0" cellpadding="1"><TD align=center><B><FONT FACE="arial" FONT SIZE="+1" COLOR="white">НАВИГАТОР</FONT><br></B></TD></tr><tr>
<script language="JavaScript"> <!-- Hide this from older browsers
function gotoPage (form) {
if (form.way.selectedIndex == 0)
parent.location="http://www.eurostar.com.ua";
if (form.way.selectedIndex == 1)
parent.location="http://";
if (form.way.selectedIndex == 2)
parent.location="http://";
if (form.way.selectedIndex == 3)
parent.location="http://";
if (form.way.selectedIndex == 4)
parent.location="http://";
if (form.way.selectedIndex == 5)
parent.location="http://";
if (form.way.selectedIndex == 6)
parent.location="http://";
if (form.way.selectedIndex == 7)
parent.location="http://";
if (form.way.selectedIndex == 8)
parent.location="http://";
if (form.way.selectedIndex == 9)
parent.location="http://";
if (form.way.selectedIndex == 10)
parent.location="http://";
if (form.way.selectedIndex == 11)
parent.location="http://";
if (form.way.selectedIndex == 12)
parent.location="http://www.eurostar.com.ua";
if (form.way.selectedIndex == 13)
parent.location="http://www.eurostar.com.ua";
}
document.write('<td valign="middle"><center><form name="WebNavigator">');
document.write('<select name="way" size="5" onChange="gotoPage(this.form)">');
document.write('<option>Евро Транс');
document.write('<option>2. Link');
document.write('<option>3. Link');
document.write('<option>4. Link');
document.write('<option>5. Link');
document.write('<option>6. Link');
document.write('<option>7. Link');
document.write('<option>8. Link');
document.write('<option>9. Link');
document.write('<option>10. Link');
document.write('<option>11. Link');
document.write('<option>12. Link');
document.write('<option>13. Link');
document.write('<option>14. Link');
document.write('</select>');
document.write('</form></td>');
// End hide --> </script></td></tr><tr><td align="center"><b><font face="arial" size="0" color="white">Выбирай и жми!</b></font></td></tr></table> ПРИМЕР-27 Mеню c комментариями
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
<HTML><HEAD> <title>Меню с комментариями</title>
<script><!--
var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='<h3><font color="Green">Java Applets</font></h3>Примеры апплетов'
content[1]='<h3><font color="Navy">Java Scripts</font></h3><br>Примеры JavaScript'
content[2]='<h3><font color="Maroon">Архив Статей</font></h3><br>Архив статей - ВСЕ для ВЕБМАСТЕРА!'
content[3]='<h3><font color="Olive">Промоушин</font></h3><br>Раскрутка сайта - самые эффективные методы'
content[4]='<h3><font color="Purple">Справочники</font></h3><br>Ваш текст.</h3>'
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}
function changetext(whichcontent){
if (document.all)
descriptions.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
else if (document.layers){
document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>')
document.d1.document.d2.document.close()
}
}
//--></script></HEAD><BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000"><center><H3><center>Меню с комментариями.</H3><HR><div id="scriptmenu" style="line-height:20px"><p><strong><font face="Verdana"> <a href="/click?http://www.eurostar.com.ua/applets.htm" onMouseover="changetext(content[0])" target="_blank"><h6><font color="Green">Java Applets</font></a> <a href="/click?http://www.eurostar.com.ua/java.htm" onMouseover="changetext(content[1])" target="_blank"><font color="Navy">Java Scripts</font></a> <a href="/click?http://www.eurostar.com.ua/notes.htm" onMouseover="changetext(content[2])" target="_blank"><font color="Maroon">Архив статей</font></a> <a href="../promotion.htm" onMouseover="changetext(content[3])" target="_blank"><font color="Olive">Промоушин</font></a> <a href="/click?http://www.eurostar.com.ua" onMouseover="changetext(content[4])" target="_blank"><font color="Purple">Справочники</font></a></h6></font></strong></p>