Паролингизни унутдингизми?
Login
Left, Right, Center Left, Center, Right Center, Left, Right



11-Dars JavaScript - IMAGE ОБЪЕКТИ

IMAGE ОБЪЕКТИ

Web сахифада тасвир.

Энди Java S нинг 1.1 версиясидан бошлаб ишлаш мумкин булган Image объектини куриб чикамиз. (яъни netscape navigator 3.0 билан). Image объекти ёрдамида сиз Web сахифангизга график образлар билан узгартиришлар киритишингиз мумкин. Бу бизга кисман мультипликатция яратиш имконини беради. Шуни эслатамизки, фойдаланувчилар браузерларнинг эски версиялари оркали ушбу кисмда келтирилган скриптларда фойдалана олмайди. (Netscape Navigator ёки Internet Exproler 3.0 каби). Ёки яхши холатда хам улардан тула эффект олиб булмайди.
Келинг дастлаб Java S да Web сахифага тасвирни кандай килиб жойлаштиришни куриб чикамиз. Биз кураётган тилда тасвир массив куринишда берилади. Массив бу image деб номланади ва document объектининг асосларидан бири хисобланади. Web сахифадаги хар бир тасвир тартиб ракамига эга: 1-тасвир 0 ракамини, 2-эса 1 ва х к каби ракамларни олади. Шу тарика 1-тасвирга биз document.image[0] деб мурожат килишимиз мумкин. Html документдаги хар бир тасвир Image объекти узининг аник бир хусусиятига эгаки, кайсики Java S тилидан унга мурожат килиш мумкин. Масалан, сиз унинг хусусиятлари дан width ва height лар оркали тасвирнинг улчамини аниклашингиз мумкин. Яъни document.image[0].width ёзув оркали Web сахифадаги тасвирнинг кенглигини аниклашингиз мумкин(нукталарда). Бахтга карши, барча тасвирнинг индексларини узгартириб туриш кийин кечади, айникса агар бир сахифангизда улар етарли куп булса. Ушбу муаммо тасвирларга узининг шахсий номини белгилаш оркали хам булади. Демак, агар сиз тасвирни ушбу тег
<img src = “imj.gif” name = “myimage” width = “”100” height=”100”>
оркали киритсангиз у холда сиз унга document.myimage ёки document.images[“myimage”] деб ёзиш билан мурожат килишингиз мумкин.

§ Янги тасвирлврни юклаш.

Албатта бу биз хохлаган нарса булмаса хам Web сахифада тасвир улчамини кандай олишни билиб куйган мумкин. Бу Web сахифада тасвирлар алмашиниши жорий килишни истаймиз ва бунинг учун бизга src атрибути керак булади. <img> тегидаги холатдаги каби src атрибути келтирилган тасвирнинг манзилини саклайди. Энди сиз Java S нинг 1.1 версиясида аллакачон Web сахифага юкланган тасвирга янги адрес бериш имкониятига эгасиз. Ва натижада тасвир Web сахифага эски адресни янги адрес билан алмаштирган холда юкланади. Мисол учун ушбу ёзувни курамиз:
<img src = “img1.gif” name = “Myimg” width = 100 height = 100>
Бу ерда img1.gif тасвир юкланади ва Myimg номини олади. Навбатдаги сатрда олдинги img1.gif тасвир аллакачон яниг img2.gif билан алмашади:
Documunt.MyImages.src = “img2.gif”;
Бунда янги тасвир хар доим эски тасвир улчамини олади. Ва сиз энди унинг улчамини узлаштираолмайсиз.

§ Тасвирларни огохлантирувчи юкланиши.
Бундай харакатларимизнинг камчиликларидан бири булиб, src га янги адрес берилгандан сунг унга мос тасвир юкланиш жараёни бошланиши хисобланади. Ва бу олдиндан килинмаганлиги сабабли янги тасвир интернет оркали узатилгунча ва уз жойига боргунча бир неча вакт утади. Айрим холларда бу мумкин, лекин бундай тез – тез тухталишларга куниш мумукин эмас. Бу холат билан биз нима килишимиз керак? Албатта, ба масаланинг ечими булиб, тасвирларни огохлантирувчи юкланишдан фойдаланиш хисобланади.
Бунинг учун бу янги Image объектини яратишимиз керак. Навбатдаги сатрларни куриб чикамиз:
HiddenImg = new Images();
HiddenImg.sec = “img3.gif”;
1 – сатрда янги Image объекти яратилади. 2 – сатрда кейинчалик hiddenimg объекти ёрдамида номаён буладиган тасвир адреси курсатилади. Куриб утганимиздек, src атрибутидаги янги адрес браузерини ушбу берилган адресли тасвирни юклашга мажбур килади. Шунинг учун, бизнинг мисолимиздаги 2-сатр бажарилганда img2.gif тасвир юклана бошлайди. Лекин HiddenImg нинг уз номидан келиб чиккан холда (“яширин тасвир”) браузер юклашни тамом килгандан сунг экранда тасвир пайдо булмайди. У факат компьютернинг хотирасида келгуси фойдаланиш учун сакланган булади. Экранга тасвирни чикариш учун биз
document.myImage.src = hiddenImg.src;
сатридан фойдаланамиз:
лекин энди тасвир хотирадан дарров олинади ва экранда намоён булади. Шу тарика биз тасвирни огохлантирувчи юкланишни бошкардик.
Сиз аник бир ходисага реакция сифатида тасвирларнинг алмашинишидан фойдаланган холда ажойиб натижа олишингиз мумкин. Масалан, сичконча курсаткичи сахифанинг аник бир жойига борганда тасвирни алмаштиришингиз мумкин. Навбвтдаги мисолда оддий килиб сичконча курсаткичи тасвирга жойлаштирилганида текшириб куринг ( умуман бунда сиз агар браузерингиз факатгина Java S 1.0 ни к-кув.диган булса, хатолар хакида хабар оласиз, бундан кутилишни сунгрок куриб чикамиз ).
Хато! Рухсат килинмаган гиперматн объекти.
Ушбу мисолнинг дастлабки коди куйидаги куринишда булади:
<a href="#"
onMouseOver="document.myImage2.src='img2.gif'"
onMouseOut="document.myImage2.src='img1.gif'">
<img src="/img1.gif" name="myImage2" width=160 height=50 border=0></a>
Бунда навбатдаги муоммалар тугилиши мумкин:
• Укувчи Java S 1.1 к-кув.майдиган браузердан фойдаланяпти
• 2 чи тасвир юклатилмаган
• Бунинг учун биз Web сахифадаги хар бир тасвир учун янги командалар ёзишимиз керак
• Биз шундай скриптга эга булишни хохлар эдикки, кайсики уни Web сахифаларнинг купчилигида яна ва яна ишлатиш имкони булса.
Энди биз ушбу муоммаларни ечувчи скриптни тула вариантини куриб чикамиз. Бу скрипт узун булганига карамасдан сиз уни бир ёзиб олишингиз билан ушбу муоммалар хакида кайгурмайсиз. Ушбу скрипт узини ихчамлигини саклаб колиши учун 2 та шартни куриб чикиш керак:
<html>
<head>

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

// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
// http://rummelplatz.uni-mannheim.de/~skoch/js/
// JS-book: http://www.dpunkt.de/javascript
// You can use this code if you leave this message
// ******************************************************

// ok, у нас браузер с поддержкой JavaScript
var browserOK = false;
var pics;

// -->
</script>

<script language="JavaScript1.1">
<!-- hide

// браузер с поддержкой JavaScript 1.1!
browserOK = true;
pics = new Array();

// -->
</script>

 

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

var objCount = 0; // количество изображений на web-странице

function preload(name, first, second) {

// предварительна\я загрузка изображений и размещение их в массиве

if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}

function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {
// вернуть в исходное систо\яние все другие изображени\я
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// показывать вторую картинку, поскольку курсор пересекает данное изображение
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}

function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систо\яние все изображени\я
if (document.images[pics[i][2]] != null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}

// заранее загружаемые изображени\я - Вы должны здесь указать
// изображени\я, которые нужно загрузить заранее, а также объект Image,
// к которому они относ\ятс\я (первый аргумент). Именно эту часть
// нужно корректировать, если Вы хотите использовать скрипт
// применительно к другим изображени\ям (конечно это не освобождает
// Вас от об\язанности подредактировать в документе также и раздел body)

preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");

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

 

<body>
<a href="/link1.htm" onMouseOver="on('link1')"
onMouseOut="off()">
<img name="link1" src="/link1f.gif"
width="140" height="50" border="0"></a>

<a href="/link2.htm" onMouseOver="on('link2')"
onMouseOut="off()">
<img name="link2" src="/link2f.gif"
width="140" height="50" border="0"></a>

<a href="/link3.htm" onMouseOver="on('link3')"
onMouseOut="off()">
<img name="link3" src="/link3f.gif"
width="140" height="50" border="0"></a>
</body>
</html>

Берилган скрипт барча тасвирларни pics массивига жойлаштиради. Ушбу иассив энг дастлаб чакирилган preload ( ) функцияси ёрдамида яратилади. Preload ( ) функциясини чакируви оддийгина куйидаги куринишда булади.
Preload ( “ Link 1”, “ img1f.gif ”, “ img1f.gif ”) ;
Бу шуни англатадики, бу скрипт сервердан 2 та img1.gif ва img2.gif тасвирларини юклаши керак. Улардан биринчисини сичконча курсаткичи тасвир майдонига тушмаганда хосил буладиган тасвирдир. Фойдаланувчи сичконча курсаткичини тасвирга жойлаштирса, у холда 2 чи тасвир пайдо булади. Preload ( ) функциясини чакириш мабойнида “ link 1 ” сузини 1 чи аргумент сифатида курсатамиз ва Web сахифадаги Image объектига олдиндан юклатилган 2 та тасвирни бериб куямиз. Агар сиз бизнинг мисолимизда < body > булимини куриб чиксангиз уша link 1 ном билан аталган тасвирни топасиз. Биз тасвирни Web-сахифада хосил килиш учун скриптни ёзиб юрмасдан унинг тартиб ракамидан эмас балки унинг номидан фойдаланамиз. On ( ) ва off ( ) функцияларни иккаласи хам onMouseOver ва onMouseOut ходисаларни кайта ишлаш программаси воситасида чакирилади.Image элементининг узи MouseOver ва MouseOut ходисаларини бажариб билмагани учун биз бу тасвирларни мурожаат килишимиз керак. On ( ) функцияси курсатилган тасвирдан бошкасини дастлабки холатига келтиришни куришимиз мумкин. Акс холда дарров бир неча тасвир белгиланган булиб колади, шунинг учун буни килиш жуда зарур. ( Гап шундаки агарда фойдаланувчи дархол дарча чегарасидан курсаткични тасвирга жойлаштирса MouseOut ходисаси регистрация килинмайди ).

Share