linkedin facebook linkedin facebook nod32

JavaScriptda image ob’ekti

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-04-07

JavaScriptda image ob’ekti

JavaScriptda dasturlashda ko`proq effektlarga grafika bilan ishlash orqali erishiladi.  Bunda dasturchida unchalik ko’p instrumentlar yo’q: dokumentga ichki qurilgan rasmlar, Image ob’ektini hosil qilish imkoniyati, rasmlarni gipermatnli o’tishlar va jadvallar bilar birga qo’llash. Shunga qaramasdan bu soda usullar orqali erishiladigan effektlar juda ajoyib.
JavaScriptda grafikani dasturlash quyidagi hossa, metod va hodisalar bilan xarakterlanuvchi Image ob’ektiga asoslanadi:

Hossalar

Metodlar

Hodisalar

border
complete
height
hspace
name
src
vspace
width
lowsrc

Yo’q

onAbort
onError
onLoad

Hossalarning ko’pligiga qaramasdan ularning ko’pchiligini faqatgina o’qish mumkin, lekin o’zgartirib bo’lmaydi. Bunga metodlarning yo’qligi ham guvoh bo’la oladi. Lekin baribir ikki hossani o’zgartirish mumkin: src va lowsrc. Shularning o’zi ham rasmlar bilan ko’pgina effektlarni bajarish uchun yetarli.
Image sinfining barcha ob’ektlarini ichki qurilgan va dasturchi tomonidan yaratilganlarga bo’lish mumkin. Ichki qurilganlari – bu IMG konteyneridagi rasmlar. Agar bu rasmlar nomlansa, u holda ularga nomlari bo’yicha murojaat qilish mumkin:

<A HREF="javascript:void(0);"

onClick="window.alert('Image name:'+        document.images[0].name)">

<IMG NAME=tuit SRC=images.gif BORDER=0></A>      

Rasm aktiv. Agar unga bosilsa, u holda IMG konteynerining nomini olamiz. document.images[0].name ga murojaat qilish bun omni ogohlantirsih oynasida chop qilish imkonini beradi. Bunda nomning o’zi  IMG konteynerida name=tuit kabi ko’rsatiladi.
Ichki qurilgan grafik ob’ektlarga indekslari bo’yicha ham murojaat qilish mumkin:

document.images[0];     

         bu holda images[0] – dokumentning birinchi rasmi.

src va  lowsrc

src va lowsrc hossalari dokumentning ichiga joylashtiriladigan rasmlarning URLlarini aniqlaydi. Bunda lowsrc asosiy rasm yuklanayotgan paytda tasvirlanuvchi, odatda kichkina bo’ladigan, vaqtinchalik rasmni aniqlaydi, uning URLi IMG konteynerining SRC atributi qiymatida ko’rsatiladi. src hossasi IMG konteynerining SRC atributi qiymatini qabul qiladi. Dasturchi src ni ham, lowsrc ni ham qiymatlarini o’zgartira oladi. src bilan misolni ko’ramiz:

document.i2.src="images2.gif";        

bu misoldan ko’rinib turibdiki, ichki qurilgan Image ob’ektining src hossasi qiymatini o’zgartirish hisobiga joylashtirilgan rasmni moslashtirish imkoniyati mavjud. Agar siz berilgan sahifani birinchi marta ko’rayotgan bo’lsangiz (yani rasm brauzer tomonidan keshga joylashtirilmagan), u holda rasmning asta-sekin o’zgarishi sezilarli bo’ladi. Bu o’zgarishni qanday tezlashtirishni biz keyingi bo’limda ko’rib chiqamiz.

Rasmni o’zgartirish

Rasmni o’zgartirish mumkin, faqatgina ichki qurilgan Image ob’ektining src hossasiga yangi qiymat bergan holda. “Grafikani dasturlash” sahifasida oddiy holatda buni qanday amalgam oshirish ko’rsatilgan edi. Aniqki, rasmni serverdan sekin yuklash tez varaqlab ko’rishga imkon bermaydi. Bu muammoni hal qilishga urinib ko’ramiz.
Hususan,  masalani yechimi rasmni va uning tasvirlarini vaqt bo’yicha ko’paytirib borishdir. Buning uchun Image ob’ektining konstruktoridan foydalaniladi:

<TABLE>

<TD>

<A HREF="javascript:void(0)";

onMouseover="document.m0.src=color[0].src;   return true;"

onMouseout="document.m0.src=mono[0].src;    return true;">

<IMG NAME=m0 SRC="images0.gif" border=0>

</A>

</TD>

...

</TABLE>  

Kod bo’lagi sichqoncha kursorining o’tishida rasmning almashishi va qayta tikkalanishining tipik usulini ko’rsatadi. Tabiiyki, faqat bitta emas, balki birdaniga bir nechta rasmlarni almashtirish mumkin.
Shunga qaramay asosiysi rasmlarni almashtirishda emas, balki bu qanday tezlikda amalga oshirilishidir. Kerakli natijaga erishish uchun sahifa boshida tasvirlanishidan oldin grafika yuklanadigan rasmlar massivi hosil qilinadi (sahifani yuklashda status satriga e’tibor bering):

color = new Array(32);

mono = new Array(32);

for(i=0;i<32;i++)

{

mono[i] = new Image();

color[i] = new Image();

if(i.toString().length==2)

{

mono[i].src = "images0"+i+".gif";

color[i].src = "images0"+i+".gif";

}

else

{

mono[i].src = "images00"+i+".gif";

color[i].src = "images00"+i+".gif";

}

}    

Yana bir xarakterli usul – JavaScript-kodni kechiktirib bajarish funktsiyasini qo’llanilishi (eval()):

function def()

{

for(i=0;i<32;i++)

{

eval("document.m"+i+".src=mono["+i+"].src");

}

for(i=0;i<5;i++)

{

eval("document.r"+i+".src=rm["+i+"].src");

}

}

   Berilgan holda eval() bizni o’zlashtirish operatsiyasini terishdan ozod qiladi.

676 marta o`qildi.

Foydalanuvchi ismi: 101-g/ Ergashev Safarali
Qo`shilgan sana: 2015-04-08

yaxshi

Foydalanuvchi ismi: 101-g/ Ergashev Safarali
Qo`shilgan sana: 2015-04-08

yaxshi

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений