Методичка-справочник по веб-программированию со специально подобранными примерами
для закрепления пройденного материала.

Основные понятия:

Мини-справочник по JavaScript:

JavaScript тренажер Training Trainer:

Пример

[+] Показать код
        <html>
        <head>
		<script language="Javascript">
		<!--
		function myDate()
			{
			var date=new Date();
			var month=date.getMonth()+1;
			var dom=date.getDate();
			var year=date.getFullYear();
				if (dom<10)dom="0"+dom; 
				if (month<10)month="0"+month;
			document.write(dom+":"+month+":"+year); 
			 }
		// -->
		</script>
        </head>
        
        <body>
        	<script>myDate();</script>
        </body>
        </html>
        [-] Свернуть 
        

Изменение изображение на кнопке (RollOver):

[+] Показать код
    Пока мы не знакомы с программированием на Javascript, можно скопировать себе на страницу следущее:
   
        <a href="url" onmouseover="rover.src='knop2.gif'" onmouseout="rover.src='knop1.gif'" onclick="return false">
		<img name="rover" src="knop1.gif">
        </a>
        
    Здесь:    
    url   - адрес Веб-страницы на которую нужно перейти, например, href = "http://straushome.info".
    knop1 - первая кнопка.
    knop2 - вторая кнопка. 
    src (сокращение от source/источник) - адрес изображения.
    т. е. img name - имя самого тэга с изображением а src это то, что он показывает.
    
    Наша задача - заменить один адрес изображения на другой (и наоборот).
   
    onclick="return false" - это чтобы сейчас не переходить по ссылке URL. 
    
    В XHTML и HTML5 вместо "name" требуется указывать уникальный атрибут "id" и надо записать так:
    
    <a href="url" onmouseover="document.getElementById('rover').src='knop2.gif'"
		  onmouseout="document.getElementById('rover').src='knop1.gif'">
		 <img id="rover" src="knop1.gif">
        </a>
         
        или так:
        
    <a href="url" onmouseover="document.images['rover'].src='knop2.gif'"
		  onmouseout="document.images['rover'].src='knop1.gif'">
		 <img id="rover" src="knop1.gif">
        </a>    
        
         или эдак:
         
    <a href="url" onmouseover="over();" onmouseout="out();" onclick="return false"><img id="rover" src="knop1.gif"></a> 
        
	<script>
		function over(){document.images['rover'].src="knop2.gif"}
		function out(){document.images['rover'].src="knop1.gif"}
	</script>

   	как вариант: 

    <img src="knop1.gif" onmouseover="this.src='knop2.gif'" onmouseout="this.src='knop1.gif'"
        onclick="window.open('http://straushome.info'" />
 
 	Примечание: изображения желательно предварительно подгружать в память (кэшировать):
 		<script>
			imover=new Image(); imover.src="knop2.gif";
       			imout=new Image(); imout.src="knop1.gif";
 		</script>
 
 	и тогда вместо "knop1.gif" писать "imout.src" и, соответственно, "imover.src" вместо "knop2.gif".
          
    [-] Свернуть
 

Примерно то же самое:

  (Надо щелкать мышью).
[+] Показать код
        <script>
        	var fl=1; 
                function change(element)
				{
				if (fl > 0 )element.src = "knop2.gif";
				else element.src = "knop1.gif";
				fl = -fl;
				}
	</script>
        
        <img src="knop1.gif" onclick = "change(this);" />
    
    Другой вариант:
        
  	<script>function change(e){e.src.indexOf('knop1.gif')+1?e.src='knop2.gif':e.src='knop1.gif'}</script>  
        
		[-] Свернуть

Изменение положения:



Если постараться,  должно получиться:
[+] Показать код
    <img src="knop1.gif" onmouseover="this.style.marginLeft='200px'; this.src='knop2.gif'"
     				onclick="this.style.marginLeft=0; this.src='knop1.gif'"/>
		 [-] Свернуть
	

Кнопка на CSS:

КАК ТАК
[+] Показать код
 <style type="text/css">
 	.myType{
		font:bold 14px Verdana, Geneva, sans-serif;
		color:navy;
    		width:100px;
            	text-align:center;
        	padding:.3em 0;
        	border:2px #0a0 dashed;
        	cursor:pointer;
            /* сами пишите, что хотите */
	    	}
 </style>
   
	<p class="myType" onmouseover="this.innerHTML='СДЕЛАТЬ?'" onmouseout="this.innerHTML='КАК ТАК'">КАК ТАК</p>
    [-] Свернуть  

Прозрачность:

[+] Показать код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прозрачность</title>
</head>

<body>
<img src="knop1.gif" width="120" height="30" onmouseover="opas(this,10,50)" onmouseout="opas(this,0)" alt="" />
</body>

    <script>
    
      function opas(obj,grad,delay)
    	{
        var opas=100;
		obj.style.cursor="pointer";
		var MS=document.body.filters; // для MSIE, пусть ест; 
		var stra="opacity"; if(MS)stra="filter";
        
        if(grad)setIn=setInterval(change,delay); else {	
                                                    if(setIn)clearInterval(setIn);
                                                    MS?obj.style[stra]=100:obj.style[stra]=1;
                                                    };
		function change()
                        {
                        if(opas<=0){clearInterval(setIn)};	
                        opas-=grad;
                        MS?obj.style[stra]="alpha(opacity="+opas+")":obj.style[stra]=opas/100;	
                        }
		}
             
	</script>
</html>
[-] Свернуть

home программы экспресс автокад 3ds max фотошоп корел

Полезные веши:

loading

Сюда

Слайдшоу

Туда


[+] Показать код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
        a, a:visited{ color:#008; font-weight:bold; margin: 0 30px; text-decoration:none; }
    </style>

<script>
    var arr = new Array("beach.jpg","tai.jpg","water.jpg","dolph.jpg","couple.jpg");
    var im = new Array();
    var num = 0;
    var FL  = 1;
    var d = document;
    var dir = "picts/" // папка с картинками.
    var i=0;
    
          while(i < arr.length)
              {
              im[i] = new Image();
              im[i].src = dir+arr[i];
              i++;
              }
    	
    function vpered()
         	{
            if(FL<0){setTimeout("vpered()", 2000)}else return; 
            tuda()
          	}
    
    function tuda()
        {
        if(++num >= im.length ) num = 0;
        d.myImg.src = im[num].src
        }
    
function suda()
            {
            FL=1;
            d.getElementById('assa').style.backgroundColor =  "#fff"
            if(num <= 0 ) num = im.length;
            d.myImg.src = im[--num].src;	
            }
			
   function slide(id)
    {
    FL=-FL;
    
    if(FL<0){id.style.backgroundColor =  "green"}
        else {id.style.backgroundColor =  "#fff"}
    vpered();
    }
</script>    
</head>

<body>
    <img name="myImg" src="picts/beach.jpg" />
    <br />
    <a href="" onclick="suda(); return false;" ondblclick="suda(); return false;">Сюда</a>
    <a id="assa" href="" onclick="slide(this); return false;">Слайдшоу</a>
    <a href="" onclick="tuda(); return false;" ondblclick="tuda(); return false;">Туда</a>
</body>
</html>
[-] Свернуть

Тот же код, но с небольшой оптимизацией:

[+] Показать код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Полезные вещи</title>
    <style type="text/css">
        .knopki{margin: 0; font-weight:bold; cursor:pointer}
        	.knopki p{float:left; margin-right:.5em; border:1px #000 solid; padding: 0 3px}
    </style>
</head>

<body>
	<div>
        <img id="myImg" onclick="change(1);" alt="loading" style="margin-bottom:5px"/>
             <div class="knopki">
                <p onclick="change(-1); slide();">Сюда</p>
                <p id="sl" onclick="slide(1)">Слайдшоу</p>
                <p onclick="change(1); slide();">Туда</p>
              </div>
	</div>
	
<script>
	
	var picts = ["beach.jpg","tai.jpg","water.jpg","dolph.jpg","couple.jpg"];
	var d=document;
	var num = 0;
	var FL=1;
	var dir = "picts/" // папка с картинками.
	var si; 
	var int = 1000;
    	var assa;
		
		for(i=0; i<picts.length; i++)
			{
            		assa=picts[i];
			picts[i]=new Image();
			picts[i].src=dir+assa;
			}
    
    change(0);				
	
	function change(n)
		{
		num+=n;	
		if(num<0)num = picts.length-1;	
		if(num+1>picts.length)num=0;
		d.images["myImg"].src = picts[num].src;
			}
	
function slide(s)
	{
	if(s)FL=-FL; else FL=1;
	if(FL<0){d.getElementById("sl").style.cssText="color:white;background:green"; si=setInterval("change(1)", int)}
	else{d.getElementById("sl").style.cssText = ""; clearInterval(si); return;}
	}
</script>

</body>
</html>
[-] Свернуть

Copyright © Straus 2019. Designed by Straus.