Суреттерді үлкейту

Суреттермен тағы бір тәсілді қарастырайық. Мұны түрлі формада құрастырушылар пайдаланады. Бұл мәтіндік бөлігі иллюстрациялармен безендірілген парақтар үшін қолайлы. Жасақтамашы эргономиканы ескеріп, суреттің параққа жүктелу уақытын азайту мақсатымен осы суреттердің кішірейтілген көшірмелерін («иконка» деп аталатын), көлемі аз файлдарды пайдаланады. «иконканы» шерткенде оның нақты өлшемі пайда болады.

Мұны ұйымдастыру үшін <a href=... тэгіне орналастырылған Java-скрипт пайдаланылады.

Бұл скрипт өздігінше сурет файлдарының көшірмесін құра алмайды, тек алдынала дайындалған файлдардың, біздің жағдайымызда img_big (үлкен сурет) және img_small ("иконка") бар екендігін білдіреді.

Скрипт ResizeImg функциясынан тұрады, оның синтаксисі мынадай:

ResizeImg(start_img,img_small,small_ht,small_wt,img_big,big_ht,big_wt),

мұнда:

• start_img – парақты бастап жүктеген кездегі сурет (біздегі "иконка");

• img_small - "иконка" файлына жол;

• small_ht - "иконка" биіктігі;

• small_wt - "иконка" ені;

• img_big – нақты суреті бар файлға жол;

• big_ht – нақты сурет биіктігі;

• big_wt – нақты сурет ені.

Бұл функция, алдында айтқанымыздай, сілтеме тэгіне былай орналастырылады:

<a href=""

onclick="return ResizeImg(document.img_icon,"img_small.gif",50,50,"img_big.gif",100,100);"

style="cursor:hand">

<img src="img1_small.gif" width="50" height="50"

border="0" alt="Үлкейту<->Кішірейту" name="img_icon">

</a>

Скриптің өзі мына түрде көрінеді:

<SCRIPT LANGUAGE="javascript">

<!--//

function ResizeImg(start_img,img_small,small_ht,small_wt,img_big,big_ht,big_wt)

{

if (start_img.src.indexOf("_small") > 0) // егер "_small" //файл //атында табылса

{

start_img.src = img_big;

start_img.alt = "Кішірейту";

start_img.width = big_wt; // ені

start_img.height = big_ht; // биіктігі

}

else

{

start_img.src = img_small;

start_img.alt = "Үлкейту";

start_img.width = small_wt; // иконка ені

start_img.height = small_ht; // иконка биіктігі

}

return false; // сілтемені басуды бұғаттаймыз

}

//-->

</SCRIPT>

Шамасы біз Сізбенен клиенттік негіздегі суреттермен жасалатын мүмкін тәсілдердің барлығын қарастырдық-ау деймін.

<!-- <! // function ResizeImg(start_img,img_small,small_ht,small_wt,img_big,big_ht,big_wt)

{ if (start_img.src.indexOf("_small") > 0) // егер "_small" файл //атында табылса

{ start_img.src = img_big; start_img.alt = "кішірейту";

start_img.width = big_wt; // ені

start_img.height = big_ht; // биіктігі

} else { start_img.src = img_small; start_img.alt = "үлкейту";

start_img.width = small_wt; // иконка ені

start_img.height = small_ht; // иконка биіктігі

} return false; // сілтемені басуды бұғаттаймыз

}

// >

// --> 

Материалды дайындаған Мұратбек Бексарыұлы

Дереккөзі: http://programmers.kz/web/javascript/javas_lessons/