JavaScript
Урок  8
   
     
Урок 1        От HTML уроците  знаете как се вмъкват картинки 
Урок 2   в web-страница. Сега вижте как с помощта на 
Урок 3 JavaScript може да раздвижите тези картинки. 
Урок 4 Първо трябва да знаете, че картинките се представят 
Урок 5 чрез масив, който се казва images. Той е достъпен от  
Урок 6 обекта document. Първата картинка в страницата има 
Урок 7 номер 0, втората 1 и т.н. Така че, ако искате да се
обърнете към първата картинка трябва да напишете: document.images[0] 
Но ако сте дали име на картинката примерно: 
<img src="Me.jpg" name="Image1" width=50 
height=40> 
то може да се обърнете към тази картинка по име: 
document.Image1 
Може да получите информация за широчината и дължината и (в пиксели) с помощта на атрибутите height и width: 
document.Image1.width  
document.Image1.height  
Но по-интересно е  как може при някакво действие от страна на читателя да се променят картинките: 

 

 

Кода за тази програма е: 

<IMG SRC="M31.jpg" NAME="myIMG" HEIGHT=225 WIDTH=450>  
<FORM>  
<INPUT type=button value="Change image" onClick="document.myIMG.src='Mer.jpg'">  
</FORM> 
Новото е оцветено в червено, а именно използвайки атрибута src можете да смените картинката, която ще се зареди в страницата. 
А познавайки вече методите за прихващане на събитията в JavaScript, може да направите примера още по-интересен:  

  

 
A ето и кода за тази атрактивна програма: 
<a href="#"  
  onMouseOver="document.myImage2.src='M31.jpg'"  
  onMouseOut="document.myImage2.src='Mer.jpg'"> 
<img src="Mer.jpg" name="myImage2" border=0></a> 
Тук няма нищо ново за вас. Просто трябва да съобразите, че картинката е хипервръзка, която не сочи никъде, но просто се използва за прихващане на събитието- кога курсорът на мишката е върху нея. 
Ако курсорът е над картинката Mer.jpg, то чрез атрибута src зареждате другата картинка M31.jpg. 
 
      И накрая на този урок искам да ви покажа един пример, който съм сигурен, че ще ви заинтригува. Ще го предствя по начин, при който с минимални промeни ще може да бъде използван и от вас. Но за да ви стане по ясен примера първо ще кажа няколко думи за етикета <layer> 
Този етикет ви позволява да разполагате обект върху обект указвайки кой да е отгоре и кой да е отдолу т.е. един вид разполага обектите на слоеве. За да ви стане по-ясна ролята на този етикет вижте следващия пример:   
ако имате тази картинка: 

и текст:Стара планина 
Логично е да искате текста да е разположен върху самата картинка:  

 

Пример                                                                8.1
<html> 
<body bgColor="yellow"> 
<layer name=pic z-index=0 left=50 top=100> 
<img src="pln.jpg" > 
</layer> 

<layer name=txt z-index=1 left=50 top=100> 
<font size=+4> <i>----Стара планина</i> </font> 
</layer> 
</body> 
</html>

Натисни отгоре и виж!
Пример1
  
 
 Атрибутите left и top определят(в пиксели) къде ще се разположат обектите спрямо горния ляв ъгъл на прозореца на браузъра. В примера тези атрибути имат еднакви стойности, за да се получи припокриването. Но по-важния атрибут тук е z-index= определя обекта към кои слой принадлежи. Ако на картинката присвоите по- голяма стойност спрямо тази на текста, то тя ще бъде в по-горен слой:  
 
Пример                                                                8.2
<html> 
<body bgColor="yellow"> 
<layer name=pic z-index=10 left=50 top=100> 
<img src="pln.jpg" > 
</layer> 

<layer name=txt z-index=1 left=50 top=100> 
<font size=+4> <i>----Стара планина</i> </font> 
</layer> 
</body> 
</html>

Натисни отгоре и виж!
Пример2
  
Ако искаме да определим позицията на слоевете спрямо текущото положение на страницата използваме етикета <ilayer> вместо <layer>.  
Запознах ви с етикета <layer>, за да може да разберете следващия пример. Но ако ви е интересна темата и искате да получите повече информация (тук е показана минимална част от атрибутите) може да отидете на адрес: http://home.netscape.com/comprod/products/ 
communicator/index.html  
А ето и сaмият пример: 
 
Пример                                                                8.3
<html> 
<head> 

<script language="JavaScript"> 
<!-- hide 

var middleX, middleY, pos; 
 

function start() { 
  // get size of image 
  var width= document.layers["imgLayer"]. 
document.davinci.width; 
  var height= document.layers["imgLayer"]. 
document.davinci.height; 

  // calculate pixel in the middle of image 
  middleX= Math.round(width/2); 
  middleY= Math.round(height/2); 

  // starting position 
  pos= 0; 

  // start it! 
  show(); 
} 

function show() { 

  // increase size of clipping area  
  pos+= 2; // step size 
  document.layers["imgLayer"].clip.left= 
middleX- pos; 
  document.layers["imgLayer"].clip.top=  
middleY- pos; 
  document.layers["imgLayer"].clip.right=  
middleX+ pos; 
  document.layers["imgLayer"].clip.bottom= 
middleY+ pos; 

  // check if the whole image has been displayed 
  if (!((pos > middleX) && (pos > middleY)))  
    setTimeout("show()", 20);  

} 

// --> 
</script> 
</head> 

<body bgcolor="#00fffff"> 
<form> 
<input type=button value="Покажи"  
onClick="start()"> 

</form> 
<ilayer name="imgLayer" clip="0,0,0,0"> 
<img name=davinci src="WFall.jpg" > 
</ilayer> 
 
 

</body> 
</html>

Натисни отгоре и виж!
Пример3
  
 Може да използвате примера във вашите web-страници като на мястото на червено оцветения текст поставите името на желаната от вас картинка. Oпитайте се сами да разберте кода!  
Ако имате желание,  може да прочетете повече по тази тема в Voodoo's tutorial на адрес: http://rummelplatz.uni-mannheim.de/~skoch/ 

    Завършвам учебника с този хубав, но и малко сложен пример, за да ви покажа, че има още много работи по темата, които може да се  научат и прочетат. 

Урок 1       Но целта на моя учебник бе да е максимално 
Урок 2 компактен и същевременно да може човек с негова 
Урок 3 помощ да направи хубави web-страници. Надявам се 
Урок 4 да ви е бил полезен. Очаквам вашите мнения и 
Урок 5 препоръки на адрес:biser10397@yahoo.com 
Урок 6  
Урок 7   //Choose View-Encoding:Cyrillic from the menu //