Суреттер және тышқан оқиғасы
I бөлім
Көптеген веб-шеберлер өз парақтарының дизайнында GIF-кескіндерде салынған сурет-сілтемелерді пайдаланады. Мұндай суреттер әдетте шағын өлшемді, жүктеуі көп уақыт алмайды, бірақ парақтың эстетикалық безендірілуін жақсартуға көп пайдасы тиеді. Осындай сілтеме-суреттерді жандандыруда Web-қолданбаларды жасаушылар Java Script көмегіне жүгініп жатады.
Осыларды ұйымдастыру үшін бірдей өлшемдегі екі сурет талап етіледі, бірақ оның мазмұндары бөлек болуы қажет. Қандай болуы өз қиялыңызға байланысты. Сурет тэгін HTML-құжатқа енгізу былай жүзеге асырылады:
<img src="arrow1.gif" id="dinimg" onmouseover="change_image(2, 'http://it-mbeks.org /arrow1.gif', 'http://it-mbeks.org/arrow2.gif')" onmouseout="change_image(1, 'http://it-mbeks.org /arrow1.gif', 'http://it-mbeks.org/arrow2.gif')">
Біз id="dinimg" селекторын және оған тышқан оқиғасының onmouseover (тышқан қойылды), onmouseout (тышқан тінтуірі обьектіден алып кетілді) сияқты жауаптарын көріп отырмыз. Екі жағдайда да тышқан оқиғасына мына change_image функциясы жауап қатуы тиіс. Функцияның және HTML-құжаттың толық нұсқасы төменде келтірілген. Алайда қысқаша кейбір сәттерді талдап көрейік. Функцияның үш аргументі бар. Біріншісіне статус рөлі бөлінген. Қалған екі аргументтер – сурет файлдарының аттары. Алдымен суреттерді жадыға жүктеу керек. Ол үшін Image обьектісі қолданылады.
... imag = new Image();//Image обьектісінің экземплярын құру imag.src = img1;//суреттің функция аргументі ретіндегі көзін //көрсету ...
Ал енді статус рөлін орындайтын аргументті пайдаланатын уақыт келді:
... if(img_id == 1) // егер статус=1, dinimg.src = imag1.src; //онда бірінші суретті іске //қосамыз else dinimg.src = imag2.src; //әйтпесе -екіншісін.
Сонымен толық кодты қарайық және оны тестілейік.
<html> <head> <title>Дерево</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script> function change_image(img_id, img1, img2) { imag1 = new Image(); imag2 = new Image(); imag1.src = img1; imag2.src = img2; if(img_id == 1) dinimg.src = imag1.src; else dinimg.src = imag2.src; } </script> </head> <body> <center> <p>тышқанды суретке қойыңыз<br> <img src="arrow1.gif" id="dinimg" onmouseover="change_image(2, 'arrow1.gif', 'arrow2.gif')" onmouseout="change_image(1, 'arrow1.gif', 'arrow2.gif')"> </center> </body> </html> |
Келесіде суреттермен және тышқан оқиғасымен байланысты тағы бір тәсілді қарастырамыз.
Фотоальбом құрайық
Java Script құралдарының көмегімен суреттермен жұмыс жасауды жалғастырамыз. Кейбіріңіз төменде көрсетілгендер сияқтымен кездескен де боларсыз.
Суретті ауыстыру үшін сілтемені шертіңіз (бұл жерде олар істемейді, тек мысал үшін ғана):
|
|
1 фото 2 фото 3 фото |
Бұл фотоальбомға ұқсас нәрсе. Мұнда «1 фото», «2 фото», ... орындарына, «бұл мен Қызылордалық Дастан», «Мынау – астаналық Нұрдәулет» деуге де болады.
Мұның сұлбасын құру онша қиын емес. Мұнда бір жолды және екі бағанды кесте құрылады. Оның сол жақ бөлігіне сурет тэгі, ал оң жақ бөлігіне сілтемелер орналасады. Сурет тэгіне name атын беру керек (біздің жағдайда pht – photo сөзін білдіретін). Қалғандары <img> тэгін қолдану ережелеріне сәйкес жасалады.
<IMG border=0 name="pht" alt="Мәтін" src="catalog/fname.gif" width=100 height=50></A>
Кестенің оң бөлігіндегі сілтемелер мынадай форматта болуы тиіс:
<A href="javascript:newphoto("name","100","50","Мәтін");">1 Фото</A>
href тэгі атрибутының адресі орнына newphoto функциясын шақыруды қоямыз, ол былай сипатталады:
function newphoto(fname,wt,ht,alt)
мұнда: fname – кеңейтілімсіз файл аты (тек GIF немесе JPG файлдарды ғана қолдану); wt – сурет ені; ht – сурет биіктігі; alt – тышқан тінтуірін қойғанда көрінетін қалқыма көмексөз мәтіні.
Енді осы функцияны толық қарастырайық. Көргеніміздей оның «денесі» соншалықты қомақты емес. Онда <img> тэгінің атрибутына "pht" аты арқылы document обьектісінің көмегімен жай қатынас пайдаланылады.
<SCRIPT>
<!--
function newphoto(fname,wt,ht,alt)
{
document.pht.src="catalog/" + fname + ".gif" //каталогты //көрсетеміз және кеңейтілімді қосамыз
document.pht.width=wt; //енін енгіземіз
document.pht.height=ht; //ұзындығын көрсетеміз document.pht.alt=alt; //қалқымалы көмексөз
}
-->
</SCRIPT>
Мінекей! Енді жоғарыда айтылғанның барлығы жүзеге асырылған HTML – құжатты жай ғана қарап шығайық.
<HTML> <HEAD> <TITLE>Менің фотоальбомым</TITLE> <SCRIPT> <!-- function newphoto(fname,wt,ht,alt) { document.pht.src="lessimg/" + fname + ".gif" document.pht.width=wt; document.pht.height=ht; document.pht.alt=alt; } --> </SCRIPT> </HEAD> <BODY> <p> Java Script құралдарының көмегімен суреттермен жұмыс жасауды жалғастырамыз. Кейбіріңіз төменде көрсетілгендер сияқтымен кездескен де боларсыз. <br><br> <h4 align="center"> Суретті ауыстыру үшін сілтемені шертіңіз:</h4> <TABLE border=0 cellPadding=5 cellSpacing=10 align="center"> <TR> <TD> <IMG border=0 name="pht" alt="Мәтін" src="catalog/fname.gif" width=103 height=86></A> </TD> <TD width=50></TD> <TD> <A href="javascript:newphoto("fname1","100","50","1 Мәтін ");"><B>1 Фото</B></A><B><BR> <A href="javascript:newphoto("fname2","100","50","2 мәтін");"><B>2 Фото</B></A><B><BR> <A href="javascript:newphoto("fname3","100","50","3 мәтін");"><B>3 Фото</B></A> </TD> </TR> </TABLE> </BODY> </HTML> |
Әрине мұнда catalog орнына нақты каталог, ал fname1, fname2..., орындарына тиісті файлдар аты көрсетілуі тиіс екені түсінікті шығар. Файлдардың, суреттердің өлшемдері де мұнда шартты түрде алынған. Бұл жерде суреттердің өлшемдері соншама бірдей болуы міндетті емес, көзбен қарағанда бірдей көрінсе жетіп жатыр.