ПРИМЕРЫ JAVASCRIPT

ПРИМЕРЫ JAVASCRIPT

ПРИМЕР-31 Меняющийся текст
Ширина и высота области с текстом задается параметрами:
var fwidth=160 var fheight=150
Задержка появления текста задается параметром: faderdelay=2000

ПРИМЕР-32 Меню с кнопкой ВЫБРАТЬ

ПРИМЕР-33 Меню раскрывается при наведении на надпись

ПРИМЕР-34 Перемещаемое меню
Работает только в IE. Очень удобное и универсальное меню. Его можно размещать в любом месте сайта, и вставлять в него все что угодно - текст, графику и скрипты. Особенность меню в том, что оно всегда остается на экране при прокрутке и его можно перемещать с помощью мыши по всему экрану.

<HTML>
<HEAD>
<style TYPE="text/css">
#superbest {
	position: absolute;
	left: 15;
	top: 150;
	width: 125;
	visibility: visible;
	z-index: 10;
</style>
</HEAD>

<BODY>
<div ID="superbest" style="width: 206; height: 194">
<dd><table BORDER="1" CELLPADDING="0" CELLSPACING="0" width="100%">
<tr>
<td bgcolor="green" size="-2"><font size="-2">меню</font>
<td bgcolor="white">
<font face="arial,helvetica" size="-1">
<font color="Green"><b>Перемещаемое</b></font><br>
<a href="http://www.eurostar.com.ua/java.htm" target="_blank">Коллекция скриптов<br></a>
<a href="http://www.eurostar.com.ua/applets.htm" target="_blank">Коллекция апплетов<br></a>
<a href="http://www.eurostar.com.ua/notes.htm" target="_blank">Архив статей-ВСЕ для Вебмастера<br></a>
<a href="http://www.eurostar.com.ua/promotion.htm" target="_blank"> Раскрутка сайта<br></a> 
<a href="http://www.eurostar.com.ua/exch.htm" target="_blank">Обмен баннерами</a></font><br>
        <script LANGUAGE="JavaScript">
	function heartBeat() {
	
		if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
	    if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
		
		if(diffY != lastScrollY) {
	                percent = .1 * (diffY - lastScrollY);
	                if(percent > 0) percent = Math.ceil(percent);
	                else percent = Math.floor(percent);
					if(IE) document.all.superbest.style.pixelTop += percent;
					if(NS) document.superbest.top += percent; 
	                lastScrollY = lastScrollY + percent;
	    }
		if(diffX != lastScrollX) {
			percent = .1 * (diffX - lastScrollX);
			if(percent > 0) percent = Math.ceil(percent);
			else percent = Math.floor(percent);
			if(IE) document.all.superbest.style.pixelLeft += percent;
			if(NS) document.superbest.left += percent;
			lastScrollX = lastScrollX + percent;
		}	
	}
	
	
	
	function checkFocus(x,y) { 
	        stalkerx = document.superbest.pageX;
	        stalkery = document.superbest.pageY;
	        stalkerwidth = document.superbest.clip.width;
	        stalkerheight = document.superbest.clip.height;
	        if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
	        else return false;
	}
	
	function grabIt(e) {
		if(IE) {
			whichIt = event.srcElement;
			while (whichIt.id.indexOf("superbest") == -1) {
				whichIt = whichIt.parentElement;
				if (whichIt == null) { return true; }
		    }
			whichIt.style.pixelLeft = whichIt.offsetLeft;
		    whichIt.style.pixelTop = whichIt.offsetTop;
			currentX = (event.clientX + document.body.scrollLeft);
	   		currentY = (event.clientY + document.body.scrollTop); 	
		} else { 
	        window.captureEvents(Event.MOUSEMOVE);
	        if(checkFocus (e.pageX,e.pageY)) { 
	                whichIt = document.superbest;
	                StalkerTouchedX = e.pageX-document.superbest.pageX;
	                StalkerTouchedY = e.pageY-document.superbest.pageY;
	        } 
		}
	    return true;
	}
	
	function moveIt(e) {
		if (whichIt == null) { return false; }
		if(IE) {
		    newX = (event.clientX + document.body.scrollLeft);
		    newY = (event.clientY + document.body.scrollTop);
		    distanceX = (newX - currentX);    distanceY = (newY - currentY);
		    currentX = newX;    currentY = newY;
		    whichIt.style.pixelLeft += distanceX;
		    whichIt.style.pixelTop += distanceY;
			if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
			if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
			if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
			if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
			event.returnValue = false;
		} else { 
			whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
	        if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
	        if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
	        if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
	        if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
	        return false;
		}
	    return false;
	}
	
	function dropIt() {
		whichIt = null;
	    if(NS) window.releaseEvents (Event.MOUSEMOVE);
	    return true;
	}
	
	
	if(NS) {
		window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
		window.onmousedown = grabIt;
	 	window.onmousemove = moveIt;
		window.onmouseup = dropIt;
	}
	if(IE) {
		document.onmousedown = grabIt;
	 	document.onmousemove = moveIt;
		document.onmouseup = dropIt;
	}
	
	if(NS || IE) action = window.setInterval("heartBeat()",1);
	
	
// --></script></td>
    </tr>
  </table>
</dd>
</div>

</BODY>
</HTML>

ПРИМЕР-35 Динамичное меню

<HTML>
<HEAD>
<script LANGUAGE="JavaScript">
function makeArray(q){
for(i=1 ; i < q ; i++){this[i]=0}}
w=1;
howmanysites=5; // Цифра 5 указывает сколько ссылок в скрипте
Sites = new makeArray(howmanysites);
Sites[1] = "http://www.eurostar.com.ua/notes.htm|Архив статей - ВСЕ для Вебмастера!";
//впишите адрес URL перед символом | а далее название ссылки.
Sites[2] = "http://www.eurostar.com.ua/java.htm|Примеры JavaScript";
Sites[3] = "http://www.eurostar.com.ua/applets.htm|Примеры апплетов";
Sites[4] = "http://www.eurostar.com.ua/promotion.htm|Раскрутка сайта";
Sites[5] = "http://www.eurostar.com.ua/a-z/a-z.htm|Cправочник морской терминологии";
function showSites() {
if (w > howmanysites) { w=1; };
var string=Sites[w] + "";
var split=string.indexOf("|");
var url=string.substring(0,split);
var word=string.substring(split + 1,string.length);
document.form.url.value=url;
document.form.word.value=word;
w+=1;
window.setTimeout('showSites()',3000); // Время переключения в милисекундах, 3000=3 секунд
}
function visitSite() {
window.location=document.form.url.value;
}
// End -->
</script>
</head>

<body>
<center>
<form name="form">
<input type="hidden" name="url" value>
<table>
<tr>
<td align="center"><input type="text" 
name="word" value onFocus="visitSite()" size="40"> 
</td>
</tr>
</table>
</form>
<script>
showSites();
</script>
</center>

</BODY>
</HTML>

ПРИМЕР-36 Меню на цветном фоне с кнопкой GO!

<form method="POST" action="--WEBBOT-SELF--" name="test">
<script>
function warp(){
window.location=document.test.test2.options[document.test.test2.selectedIndex].value
}
</script>
<center>
<select
      name="test2" size="1" style="background-color: rgb(25,238,255); font-weight: bold">
        <option selected value="http://www.eurostar.com.ua/notes.htm"> Cтатьи-ВСЕ для ВЕБМАСТЕРА!</option>
        <option value="http://www.eurostar.com.ua/java.htm">Примеры JavaScript</option>
        <option value="http://www.eurostar.com.ua/applets.htm">Примеры апплетов</option>
        <option value="http://www.eurostar.com.ua/promotion.htm">Раскрутка сайта</option>
        <option value="http://www.eurostar.com.ua/a-z/a-z.htm">Морская терминология</option>
        <option value="http://www.eurostar.com.ua/vac.htm">Открытые вакансии для моряков</option>
      </select> 
<a href="javascript:warp()" style="text-decoration:none;color:navy;">
<font face="Arial"><font size="+2">Go!</font></font></a>
</p>
    </form>
</center>

ПРИМЕР-37 Меню появляется после нажатия на картинку
(кнопку, баннер, ссылку)

var visibleVar="null";

function init(){

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

visibleVar="show";

}else{

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

visibleVar="visible";

}

function showHideLayerSwitch(layerName){

if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

hideLayer(layerName);

}else{

showLayer(layerName);

}

function showLayer(layerName){

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');

}

function hideLayer(layerName){

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');

}

function showLayer1(layerName){

if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

showLayer(layerName);

}

function hideLayer1(layerName){

if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

hideLayer(layerName);

}

</SCRIPT>

#pulldownButton {position: absolute; z-index: 59800; left: 300px; top: 50px;}

#pulldownMenu {position: absolute; z-index: 59900; visibility: hidden; left: 100px; top: 116px;}

</STYLE>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ff5555" alink="#ff0000" vlink="#999999" onload="init()">
    <div id="pulldownButton" >
        <a href="javascript:showHideLayerSwitch('pulldownMenu');">
        <IMG SRC="arrow-left.gif" BORDER=0 alt="Жми, здесь M E Н Ю"></a>
</div>
    <div id="pulldownMenu">

<tr>

<td width="200"><b><center>Все для вебмастера</center></b></td>

</tr>

<tr>

<td><a href="http://www.eurostar.com.ua/java.htm" class=linkint>Примеры JavaScript</a></td>

</tr>

<tr>

<td><a href="http://www.eurostar.com.ua/applets.htm" class=linkint>Примеры Applets</a></td>

<tr>

<td><a href="http://www.eurostar.com.ua/notes.htm" class=linkint>Архив статей</a></td>

</tr>

<tr>