Porta shqipe | Mësime për JavaScript

Mësime për përdorimin e JavaScript-it

Efekte të ndryshimit për shfletuesin Internet Explorer

Vërejtje: Nuk punon me shfletuesin Firefox. Për këtë shfletues mund të përdorni këtë efekt me Flash ose me JQuery.

javascript_0301.html

vera/dimri me rrëshqitje | vera/dimri me shkrirje

Shkarkoni imazhet këtu!

Në kombinim me JavaScript dhe CSS është i mundur zbatimi i efekteve vizuale me ndryshime (ose filtra) për imazhe dhe/ose shtresa. Për të parë një ndryshim duhet të përdoret shfletuesi Internet Explorer. Shfletuesit tjerë nuk e pranojnë tregimin e tij, për arsye se ky është menduar nga kompania Microsoft dhe ata nuk pajtohen me këtë kompani. Në shfletuesit tjerë punon skripti i përdorur dhe imazhet tregohen pa probleme, por efektet nuk shihen.

Nëse e përdorni këtë mësim për faqen e uebit të sajtit tuaj largoni rreshtat që fillojnë me dy thyesa //. Këto janë vetëm sqarime për ju.

<html>
<head>
<title>Titulli i faqes</title>

// fillo caktimin e funksionit (function) me emrin "zbatoNdryshimin" ...
// për obj (objektin), ... dhe
// për lidhjen me burimin e imazhit me emrin "imazhBurimi"
function zbatoNdryshimin (obj, imazhBurimi)
{
// zbato filtrin për objektin
obj.filters(0).Apply();
// nëse imazhi i cili duhet të tregohet në fillim është minus 1
// (pra, më i poshti i mundshëm sipas renditjes)
// metoda e quajtur "indexOf" në JavaScript mundëson që të kontrollohet shkronja
// që është përdorur si lidhëz dhe e kthen pozitën e asaj shkronje
if (demoImazhi.src.indexOf(imazhiFillestar)!=-1) {
// atëherë shfaq imazhin nga VARgu ndryshues (anglisht var = variable),
// pra pas veprimit të vizitorit
demoImazhi.src = imazhiPasNdryshimit;
// zbato filtrin për objektin
obj.filters(0).Play();
}
// përndryshe (nëse kjo nuk është e vërtetë; nëse imazhi nuk është fillestar,
// nëse nuk tregohet kur ngarkohet faqja e uebit në shfletues)
else {
// burimi i imazhit duhet të jetë sipas vargut të caktuar për imazhin fillestar
demoImazhi.src = imazhiFillestar;
// zbato filtrin për objektin
obj.filters(0).Play();
// përfundo "nëse"
}
// përfundo funksionin e krijuar
}
</script>

</head>
<body>

<a href="#" onClick="demoImazhi.style.filter= 'progid:DXImageTransform.Microsoft.Slide(slidestyle=hide)'; zbatoNdryshimin(demoImazhi,'vera.gif')"> vera/dimri me rrëshqitje </a> | <a href="#" onclick="demoImazhi.style.filter= 'progid:DXImageTransform.Microsoft.RandomDissolve()'; zbatoNdryshimin(demoImazhi,'vera.gif')"> vera/dimri me shkrirje</a> <p><img id="demoImazhi" src='vera.gif' STYLE="width=375px; height=250px;"></p>

</body>
</html>

Sqarime

onClick="demoImazhi.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=hide)'; zbatoNdryshimin(demoImazhi,'vera.gif')">vera/dimri me rrëshqitje</a>

Funksioni onClick ekzekutohet kur përdoruesi klikon mbi imazh. Këtu, me këtë funksion, kërkojmë nga JavaScript që stili (style) për imazhin me identifikimin (id) i i quajtur demoImazhi të ekzekutohet me filtrin e quajtur "progid: DXImageTransform.Microsoft.Slide (slidestyle=hide)". Kliko këtu për listën e plotë të filtrave. Pas pikëpresjes ekzekutohet tregimit i imazhit tjetër (imazhit ndryshues).

Në vend të onClick mund të përdorni edhe onMouseOver dhe onMouseOut sikur në këtë mësim këtu.

Mësime për përdorimin e JavaScript-it

Efekte të ndryshimit për shfletuesin Internet Explorer

Sqarime

JavaScript

Shembuj | Voorbeelden | Examples