Autor Zpráva
epsík
Profil
nemohu přijít na zásadní věc. Udělal jsem si javascriptovou akci, která dynymicky zvětšuje obrázek po přejetí myší a po odjetí se opět zmenšuje až na původní vekost. Script funguje, pokud ho použiji na jeden oběkt, ale nevím, jak to udělat, aby se tento script mohl provádět najednou u více obrázku..tzn. když z jednoho odjedu na jiný, aby se ten začal zvětšovat, zatímco se původní vrací na původní rozměr. Chyba je samozřejmě v tom, že se navzájem tlučou proměnné, ale nevím jak řešit, aby se tak nedělo...

function zvetseni(){
velikost = objekt.width;
poziceX = objekt.offsetLeft;
poziceY = objekt.offsetTop;
objekt.style.width =velikost+4;
objekt.style.height =velikost+4;
objekt.style.left =poziceX-2;
objekt.style.top =poziceY-2;
if(velikost>=200){
clearInterval(akce);
}
}
function zmenseni(){
velikost = objekt.width;
poziceX = objekt.offsetLeft;
poziceY = objekt.offsetTop;
objekt.style.width =velikost-4;
objekt.style.height =velikost-4;
objekt.style.left =poziceX+2;
objekt.style.top =poziceY+2;
if(velikost<=114){
clearInterval(akce2);
}
}
function velikost(i){
nahled="nahled"+i;
objekt=document.getElementById(nahled);
akce=setInterval("zvetseni()",4);
}
function velikost_zpet(i){
clearInterval(akce);
akce2=setInterval("zmenseni()",4);
}

//a zde akci volám
<?
...

echo "<a href='./obsah.php?img=$id&pict=1' class='thickbox'><img id='nahled$i' src='./upload/$id/nahledy/nahled_vetsi.png' onmouseover='velikost($i);' onMouseOut='velikost_zpet($i);'></a>";

...

?>

podívat se můžete zde (na stránkách zrovna pracuji, takže to možná nebude zrovna fungovat) http://ouch.cz/test

Děkuji předem za odpovědi
Bronzi
Profil
Musíš to pojmout trochu globálněji. Hlavní příčina je v tom že si vyměníš jeden časovač za druhý když ten ředchozí je ještě potřeba.
Zaveď si na začátku pole
var akce = new Array();
var akce2 = new Array();

a 2 proměné

var pocetAkci = 0;
var pocetAkci2 = 0;

Pak pozměň funkce velikost(i) a velikost_zpet(i) takto

function velikost(i){
nahled="nahled"+i;
objekt=document.getElementById(nahled);
akce[pocetAkci] =setInterval("zvetseni("+pocetAkci+")",4); // funkce zvětšení se bude volat z indexem svého časovače aby se vědělo, který časovač se má odnastavit
pocetAkci++; // zvětším číslo aby se příště změnila proměná akce[pocetAkci]
}
function velikost_zpet(i){
clearInterval(akce);
akce2[pocetAkci2]=setInterval("zmenseni("+pocetAkci2+")",4);
pocetAkci2++; // totéž jako předtím
}

A funkce zvetseni() a zmenseni() takto:

function zvetseni(casovac){
velikost = objekt.width;
poziceX = objekt.offsetLeft;
poziceY = objekt.offsetTop;
objekt.style.width =velikost+4;
objekt.style.height =velikost+4;
objekt.style.left =poziceX-2;
objekt.style.top =poziceY-2;
if(velikost>=200){
clearInterval(akce[casovac]); // odnastavíme časovač
akce[casovac] = null;// proměnou vynulujem aby nežrala paměť
}
}
function zmenseni(casovac){
velikost = objekt.width;
poziceX = objekt.offsetLeft;
poziceY = objekt.offsetTop;
objekt.style.width =velikost-4;
objekt.style.height =velikost-4;
objekt.style.left =poziceX+2;
objekt.style.top =poziceY+2;
if(velikost<=114){
clearInterval(akce2[casovac]);
akce1[casovac] = null;
}
}

Snad jsem se nikde nesek.
epsík
Profil
hmm..tak bohužel mi to nefunguje...snažil jsem se najít nějaké chyby, např.

clearInterval(akce);

jsem změnil na

clearInterval(akce[pocetAkci]);

a

akce1[casovac] = null;

na

akce2[casovac] = null;

ale stále to nefunguje...jednou se provede zvětšení a zmenšení, ale poté, ať přejedu přes jakýkoli náhled, tak se ten první vždy zmenší o jednotku (velikost-4)...takže netuším...
neměl bych si ještě udělat pole pro každou proměnnou (např. velikost[pocetAkci])?..jdu to zkusit
Bronzi
Profil
Ne to je zbytečné velikost zjišťuješ až v těle té funkce ale udělej pole z proměné objekt analogicky jak s časovačema.

var objekt1 = new Array();
var objekt2 = new Array();

function velikost(i){
nahled="nahled"+i;
objekt1[pocetAkci]=document.getElementById(nahled);
akce[pocetAkci] =setInterval("zvetseni("+pocetAkci+")",4);
pocetAkci++;
}

a velikost_zpet udelj takto

function velikost_zpet(i){
//ještě jsem odtud odstranil clearInterval()
nahled="nahled"+i;
objekt2[pocetAkci2]=document.getElementById(nahled);
akce2[pocetAkci2]=setInterval("zmenseni("+pocetAkci2+")",4);
pocetAkci2++;
}

a zbytek ještě uprav takto:

function zvetseni(casovac){
var objekt = objekt1[casovac];
velikost = objekt.width;
poziceX = objekt.offsetLeft;
poziceY = objekt.offsetTop;
objekt.style.width =velikost+4;
objekt.style.height =velikost+4;
objekt.style.left =poziceX-2;
objekt.style.top =poziceY-2;
if(velikost>=200){
clearInterval(akce[casovac]); // odnastavíme časovač
akce[casovac] = null;// proměnou vynulujem aby nežrala paměť
}
}
function zmenseni(casovac){
var objekt = objekt2[casovac];
velikost = objekt.width;
poziceX = objekt.offsetLeft;
poziceY = objekt.offsetTop;
objekt.style.width =velikost-4;
objekt.style.height =velikost-4;
objekt.style.left =poziceX+2;
objekt.style.top =poziceY+2;
if(velikost<=114){
clearInterval(akce2[casovac]);
akce2[casovac] = null;
}
}

Tak snad teď
epsík
Profil
ououououou...stále mi to né a né fungovat...díky moc za pomoc, ten princip je určitě fajn a ještě ho určitě využiju, ale vždy když se provede ta první akce (velikost a velikost_zpet), tak u těch dalších už to nefunguje a zmenšují se o tu jednu jednotku....rozdíl je teď v tom, že už to reaguje správně vždy pro ten konkrétní náhled, ale něco se v tom scriptu permanentně změní po té první akci...už opravdu nevím, co s tím...lopotím se s tím od rána a opravdu už nevím..jediné co mi jakž takž fungovalo, když jsem nechal php scriptem vygenerovat pro každý náhled zvlášť tuto funkci, ale to je přecijen prasárna...
ah01
Profil
epsík
Kód, který uvádí Bronzi je zbytečně komplikovaný. Přitom se to dá řešit velice elegantně, bez jakéhokoliv „blbnutí“ s globálním polem. Nebudu ti, ale psát kompletní řešení (to je takřka už zakázková práce), musíš se také trochu snažit. Nehledě na to, že tak se to člověk nejlépe naučí. Projdi si následnou kostru kódu. Určitě to pak zvládneš doplnit na funkční celek.
function setup( img ){


var originalWidth = ...
var originalHeight = ...

var sizeUpTimer = 0;
var sizeDownTimer = 0;

function sizeUp(){

// zastavit případné zmenšování
if( sizeDownTimer != 0 ){
clearTimeout( sizeDownTimer );
}

// zvětšovací činnost
img.width += 10;
img.height += 10;

// jestli už není dosaženo maximální velikosti
if( img.width < MAX_WIDTH || img.height < MAX_HEIGHT ){
sizeUpTimer = setTimeout(sizeUp);
}

}

function sizeDown(){

// zastavit případné zvětšování
if( sizeUpTimer != 0 )
clearTimeout( sizeUpTimer );
}

// zmenšovací činnost
img.width -= 10;
img.height -= 10;

// jestli už není dosaženo minimální velikosti
if( img.width > originalWidth || img.height < originalHeight ){
sizeDownTimer = setTimeout(sizeDown);
}

}

// nastavit obsluhu událostí
img.onmouseover = sizeUp;
img.onmouseout = sizeDown;

}

// nastavení pro #obr
setup( document.getElementById("obr") );

Pokud ti nebude něco jasné, proč nebo jak to funguje, klidně se ptej.
epsík
Profil
ah01 no zdá se to jako pěkný řešení...nicméně je to pro mě trochu alchymie. znamená to tedy že do těla dokumentu vložím akorát setup( document.getElementById("obr") );? ...přiznám se ale, že vůbec nevím kam a jak..
Jinak ten zbytek poměrně chápu a přiznám se, že jsem vůbec netušil, že jde tímto způsobem nastavit obsluhu událostí...jestli to tedy dobře chápu, že to zůstává uvnitř scriptu a nevypisuji to přímo do obrázku...
...jo a pokud jde o originalWidth a originalHeight, můžu je nastavit na img.width a img.height? ...no, ale s tím si asi už poradím...spíš mě zajímá kam s tím setup...
..jo a ještě si nejsem jistý jestli je toto správně: if( img.width > originalWidth || img.height < originalHeight )
..omluv mě, jestli se ptám blbě ;)
ah01
Profil
epsík
Pokud jsi začátečník, tak na tebe tento způsob psaní kódu může působit jako alchymie. Pokud v tom tápeš úplně, tak můj příspěvek ignoruj a snaž se to vyřešit s tím, co znáš.

ad 1: fci. setup pochopitelně voláš až po načtení stránky (událost onload)
ad 2: „jestli to tedy dobře chápu, že to zůstává uvnitř scriptu a nevypisuji to přímo do obrázku“ ano přesně tak, jde o to, aby se do vlastního HTML kódu psalo co nejméně (žádný) JS a vkládal se jen do hlavičky jako externí script (tzv. unobtrusive javascript)
ad 3: to jsem jen tak střelil od boku, aby bylo vidět, co zhruba by v těch částech kódu mělo být napsané. Musíš si tam dospat kód podle toho co to má dělat.
epsík
Profil
ah01
miluju tě :)) tak po přepsání pár drobností to funguje naprosto perfektně a nemusím se bát že se ty scripty budou nějak mezi sebou bít. Tento způsob je pro mě úplná novinka a už vidím, jak přepisuji své staré zlobící scripty...děkuju moc

Rovněž děkuju Bronzi za zajímavé informace a snahu pomoci :)

...později sem ještě hodím hotový script

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0