linkedin facebook linkedin facebook nod32

Sayt uchun grafika va jadvallar

Muallif: Mengliyev SH.

Qo`shilgan sana: 2014-10-10

 Sayt uchun grafika va jadvallar

Web-tarmoqlarini yaratishning keng tarqalgan usullaridan biri bu rasmlarni qismlarga qirqib olish texnikasidir. Sahifaning navigatsion komponentalarini tashkil qilish uchun bu texnikani qo’llashning quyidagi usullarini ajratib ko’rsatish mumkin:

  • gorizontal va vertikal menyular;
  • ichma-ich qo’yilgan menyular;
  • navigatsion grafik bloklar.

Qirqish grafikasini ishlatishdagi eng asosiy muammo bu uni HTML-parser tomonidan sahifani kontekstli formatlashdan himoya qilishdir. Masala shundaki, agar ular bir satrga joylashmasa, u разметки elementlarini avtomatik ravishda yangi satrga ko’chiradi. Qirqilgan rasmning tashkil qiluvchi bo’laklari aniq bir tartibda joylashgan bo’lishi kerak, shuning uchun ularni qatorga o’tkazish istalgan natijani bermaydi:

<IMG SRC="image1.gif"><IMG

SRC="image2.gif"><IMG

SRC="image3.gif"><IMG

SRC="image4.gif">  

Elementlar yangi satrga ko’chiriladi, chunki bo’limning kengligi rasmlarning umumiy kengligidan kichikroqdir. Muammo parserdan himoya -<PRE> qo’llanilsa, yechiladi:

<PRE>

<IMG SRC="image1.gif">

<IMG SRC="image2.gif">

<IMG SRC="image3.gif">

<IMG SRC="image4.gif">

</PRE>

   

Bunday menyudan foydalanish unda gipermatnli o’tishlarni aniqlshni talab etadi va bu quyidagi natijaga olib keladi:

<PRE>

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

<IMG SRC="image1.gif"></A>

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

<IMG SRC="image2.gif"></A>

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

<IMG SRC="image3.gif"></A>

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

<IMG SRC="image4.gif"></A>

</PRE>

   

Bunga 0ga teng BORDER atributini qo’llash hisobiga erishish mumkin:

<PRE>

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

<IMG SRC="image1.gif" BORDER="0"></A>

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

<IMG SRC="image2.gif" BORDER="0"></A>

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

<IMG SRC="image3.gif" BORDER="0"></A>

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

<IMG SRC="image4.gif" BORDER="0"></A>

</PRE>

   

Endi shu usul bilan ko’p satrli menyuni hosil qilishga harakat qilamiz:

<PRE>

<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0>

<A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A>

<IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0>

<A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0>

</A><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0>

<A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0>

</A><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0>

<A HREF="javascript:void(0);"><IMG SRC="image4.gif" WIDTH=103 HEIGHT=21 BORDER=0>

</A>

</PRE>

   

To`la qoplagan rasm hosil bo’lmaydi, chunki satrning balandligi rasmning balandligiga teng emas. Bu parametrlarni qo’ish deyarli mumkin emas. Har bir foydalanuvchi brauzerni o’z hohishicha moslab oladi. Echim quyidagi jadvalni ishlatilishidadir:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>

<TR>

<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>

<TD><A HREF="javascript:void(0);"><IMG SRC="image1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>

</TR>

<TR>

<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>

<TD><A HREF="javascript:void(0);"><IMG SRC="image2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>

</TR>

<TR>

<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>

<TD><A HREF="javascript:void(0);"><IMG SRC="image3.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>

</TR>

<TR>

<TD><IMG SRC=tree.gif WIDTH=27 HEIGHT=21 BORDER=0></TD>

<TD><A HREF="javascript:void(0);"><IMG SRC="image14.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD>

</TR>

</TABLE>

   

Bu holda barcha rasmlarni o’tkazib yubormasdan birlashtirish imkoniyati bo’layapti va shu yo’l bilan navigatsion daraxtning uzuliksizligiga erishilayapti. Oraliqlarni BORDER, CELLSPACING va CELLPADDING atributlarini qo’llash hisobiga yo’qotiladi. Birinchisi yacheykalar orasidagi chegarani yo’qotadi, ikkinchisi yacheykalar orasidagi masofani 0 pikselga o’rnatadi, uchinchisi esa yacheyka chegarasi va unga joylashtirilgan element orasidagi chekinishni 0 pikselga o’rnatadi.

Grafika va hodisani qayta ishlash

Bu bo’limda IMG konteyneri hodisalar qayta ishlovchilarini qaramaymiz. Biz hodisalarni qayta ishlovchilar va grafik obrazlarni o’zgartirishlarni birgalikda ishlatishning tipik usuliga to’xtalib o’tamiz. Hususan, qirqilgan grafikani qo’llash ma’noga ega bo’lmasdi, agar tasvirning alohida qismlari o’zarishlarini qayta ishlovchilarni qo’llashning imkoniyati bo’lmaganda. Navigatsion daraxt misolini muhokama qilishda davom etib, uni sichqonchani ob’ektga tugrilash va rasmni o’zgarishlarini qayta ishlovchi bilan rivojlantirilishini ko’rsatamiz:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=center>

<TR>

<TD><IMG SRC=image.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>

<TD><IMG SRC=image1.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>

</TR>

<TR>

<TD><IMG SRC=image2.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>

<TD><A HREF="javascript:void(0);" onMouseover="document.manual.src='image3.gif';return true;" onMouseout="document.manual.src='image4.gif'; return true;">

<IMG SRC=image5.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>

</TR>

<TR>

<TD><IMG SRC=image6.gif WIDTH=20 HEIGHT=20 BORDER=0></TD>

<TD><A HREF="javascript:void(0);" onMouseover="document.desk.src='image7.gif';return true;"onMouseout="document.desk.src='image8.gif';return true;">

<IMG SRC=image9.gif BORDER=0 WIDTH=20 HEIGHT=20></A></TD>

</TR>

</TABLE>

   

Berilgan misolda sichqoncha kursori rasmlar ustidan o’rayontganda ularning menyulari o’zgaradi. Bu narsa ikki hodisani qo’llnishi hisobiga ko’ra amalga oshiriladi: onMouseover va onMouseout. Birinchi hodisada rasm pozitivdan negativga o’zgaradi, ikkinchi hodisada u o’zining dastlabki variantiga qaytadi. Shuni ta’kidlash kerakki, hodisalar yakor (A) konteynerida, IMG konteynerida emas, aniqlangan. Bu brauzerlarning mosligi nuqtai-nazaridan eng maqbul variant.

1815 marta o`qildi.

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
счетчик посещений