Képkezelés

[pixi]

Köszönöm. Időközben nekem is összejött, de a tied egy kicsit rövidebb. A baj az volt, hogy a minus() függvényben a w és h értékeket nem nulláztam le.

[tomi6230i]

Kód: Javascript

1. var w = 50;
2. var h=0;
3. var obj, arany;
4. function ind(file) {
5. eredeti  = new Image();
6. eredeti.src  = file;
7. ew = eredeti.width;
8. eh = eredeti.height;
9. arany = ew/eh;
10. obj = document.getElementById('kozep');
11. obj.style.display = 'block';
12. obj.style.position = 'absolute';       
13. plus(file)
14. }
15.  
16. function plus(file) {
17. obj.src=file;
18. obj.style.width = w + 'px';
19. obj.style.height = h + 'px';   
20. if ( w<150 )  
21.         { w = w+4;      h = w / arany;  setTimeout(function()  { plus(file); }, 2); }
22. }
23.  
24. function minus(file)    {
25. if (w<0) w=0;
26. if (h<0) h=0;
27. obj.src=file;
28. obj.style.width = w + 'px';    
29. obj.style.height = h + 'px';   
30. if ( w>0) {
31.         w = w-4;        h =  w / arany; setTimeout(function()  { minus(file); }, 2);
32. }
33. else {
34. obj.style.display = 'none';
35. }
36. }

Sárgával van, amit változtattam.
Tipp: Próbáld ki úgy, hogy az egyik képnek a magassága, míg a másiknak a szélessége nagyobb.

[pixi]

A kis képre tett kurzor arányosan kinagyítja a képet, majd a nagyított képre tett kurzor eltünteti azt. Valamit igazítani kellene a kódon, mert IE-ben nem jó. A nagy képet kicsiként teszi ki, nem nagyít és kurzorral eltüntetni sem lehet:

Kód: Javascript

1.  
2. <script type='text/javascript'>
3.  var w = 50;
4.  var h;
5.  var obj, arany;
6.  function ind(file) {
7.         eredeti  = new Image();
8.         eredeti.src  = file;
9.         ew = eredeti.width;
10.         eh = eredeti.height;
11.         arany = ew/eh;
12.         obj = document.getElementById('kozep');
13.         obj.style.display = 'block';
14.         obj.style.position = 'absolute';       
15.         plus(file)
16.  }
17.  
18.  function plus(file) {
19.         obj.src=file;
20.         obj.style.width = w + 'px';
21.         obj.style.height = h + 'px';   
22.         if ( w<150 )  
23.                 { w = w+4;      h = w / arany;  setTimeout(function()  { plus(file); }, 2); }
24.  }
25.        
26.  function minus(file)   {
27.         obj.src=file;
28.         obj.style.width = w + 'px';    
29.         obj.style.height = h + 'px';   
30.         if ( w>0) {
31.                 w = w-4;        h =  w / arany; setTimeout(function()  { minus(file); }, 2);
32.         }
33.         else {
34.         obj.style.display = 'none';
35.         }
36.  }
37.  </script>

Kód: HTML

1.        
2. <img src='kep1.jpg' width='50' onmouseover='ind(this.src)' >
3. <img src='kep2.jpg' width='50' onmouseover='ind(this.src)' >
4.  
5. <img id='kozep' style='display: none; position: relative; top: 110px; left: 60px;' onmouseover='minus(this.src)' >

[ThompsoN]

Rendben.

[pixi]

Ha a kódban nem értesz valamit, akkor szólj és elmagyarázom.

Köszi, de ez a kód nekem így első - de a második - ránézésre is eléggé átláthatatlan, úgy hogy egyenlőre próbálok minél több hasonló témájú tutorialt átnézni. Ha valami nagyon nem megy, majd nyaggatlak.

[ThompsoN]

A procit sem használja annyira, csak 12%-ban. A régi kód olyan 30%-ban használta.

Azt elfelejtettem írni, hogy a RAM-ot nem teszi tele, ezért egy lassabb ram esetén nem lassul be a gép.

[ThompsoN]

Na, elkészült a kód, szerintem ez úgy működik, ahogy kell. Teszteltem, is és szépen megy. A procit sem használja annyira, csak 12%-ban. A régi kód olyan 30%-ban használta.

Kód: Javascript

1. <script type='text/javascript'>
2.                 var tomb = new Array('image/plugin/gallery/next.gif', 'image/plugin/gallery/prev.gif', 'image/plugin/gallery/loading.gif');
3.                 var interval = null;
4.                 var set_op = 0;
5.                
6.                 function plus(op, i){
7.                         set_op = op;
8.                         document.getElementById('kepid').style.filter = 'alpha(opacity=0)';
9.                         document.getElementById('kepid').style.opacity = 0;
10.                         document.getElementById('kepid').src = tomb[i];
11.                        
12.                         interval = setInterval(function(){
13.                                 if(op <= 100){
14.                                         document.getElementById('kepid').style.filter = 'alpha(opacity=' + op + ')';
15.                                         document.getElementById('kepid').style.opacity = op/100;
16.                                         document.getElementById('divid').innerHTML = 'op : ' + op;
17.                                        
18.                                         op = op + 2;
19.                                 }
20.                                 else{
21.                                         clearInterval(interval);
22.                                         setTimeout(function(){
23.                                                 minus(op, i);
24.                                         }, 2000);
25.                                 }
26.                         }, 40);
27.                 }
28.                
29.                 function minus(op, i){
30.                         interval = setInterval(function(){
31.                                 if(op >= 0){
32.                                         document.getElementById('kepid').style.filter = 'alpha(opacity=' + op + ')';
33.                                         document.getElementById('kepid').style.opacity = op/100;
34.                                         document.getElementById('divid').innerHTML = 'op : ' + op;
35.                                        
36.                                         op = op - 2;
37.                                 }
38.                                 else{
39.                                         clearInterval(interval);
40.                                         skip(i);
41.                                 }
42.                         }, 40);
43.                 }
44.  
45.                 function skip(i, op){
46.                         if ( i < tomb.length -1) {
47.                                 ++i;
48.                         }
49.                         else {
50.                                 i = 0;
51.                         }
52.                        
53.                         plus(set_op, i);
54.                 }
55.                 </script>

Elküldve:: 2010. December 18.  11:24:26Ha a kódban nem értesz valamit, akkor szólj és elmagyarázom.

[pixi]

1. Azt megvárom.

2. Ettől azért ctrl + Alt + del -el meg lehet szabadulni, ha nem, akkor lekapcsolom a villanyórát, oszt kész.

3. Rendben, akkor kettesével számoltatom.

4. Ez ugyan hosszabb : document.getElementById('kepid').style...., de valóban megbízhatóbb, mint a rövidített változat.

[ThompsoN]

A tömb második, ill. további bejárásánál a számláló megbolondulása alatt azt értem, hogy visszaugrál olyan értékekre, amin már egyszer túljutott, ezért lelassul. Valahol, valamit vissza kellene állítani, hogy a tömb bejárása után, az újabb futás tiszta lappal induljon.

Aha értem.. Erre szerintem tudok megoldást, de még előbb kipróbálom.

A kód - amellett hogy csak próbálkozás - lehet, hogy gonosz, de mivel a js elején elején tartok, valószínű, hogy tudok ennél rettenetesebbet is írni.

Én is tudok gonoszabbat írni.

Kód: Javascript

1. while(true){alert('Innen nem szabadulsz haver..:)');}

Szerintem egyébként ha nem 1-el, hanem mondjuk 2-vel növelnéd az opacity értékét, akkor kevesebb erőforrást emésztene fel.

A document.getElementById('kepid').style...., vagy röviden csak kepid.style.... nálam nem okoz semmi változást, minden böngészőben egyformán megy.

Ez igaz, viszont nem ajánlott így használni. Ha megnézed a FF hibakonzolját, teleírja hibaüzenettel erre.

[pixi]

A tömb második, ill. további bejárásánál a számláló megbolondulása alatt azt értem, hogy visszaugrál olyan értékekre, amin már egyszer túljutott, ezért lelassul. Valahol, valamit vissza kellene állítani, hogy a tömb bejárása után, az újabb futás tiszta lappal induljon.

A kód - amellett hogy csak próbálkozás - lehet, hogy gonosz, de mivel a js elején elején tartok, valószínű, hogy tudok ennél rettenetesebbet is írni.

A document.getElementById('kepid').style...., vagy röviden csak kepid.style.... nálam nem okoz semmi változást, minden böngészőben egyformán megy.

[ThompsoN]

Nem értem annyira a kérdésedet.Hogy érted, hogy a számláló megbolondul? Nekem tökéletesen működött, miután a kepid.-okat mnidenhol lecseréltem arra, hogy document.getElementById('kedid').

Viszont ez a kód kegyetlen. Egyrész a processzort irdatlan mértékben felugrasztja, másrészt telenyomja a ramot (ez utóbbi nem tudom, hogy miért). Nekem a vas szíve egy AMD Phenom II X4 965 BE, vagyis 4 mag és 3,4GHz.. RAM pedig 4GB. ÉS 2-szer bejárta a tömböt, már belassultam..

[pixi]

A script, a tömbbe rakott képeken megy végig. Az opacity értéke 0-ról felmegy 100-ra, ott áll 2 másodpercet, majd visszamegy 0-ra és jön a következő kép.
A tömb első bejárása rendben megy, de a második bejárástól kezdve a számláló megbolondul és nem találom a hibát:.

Kód: HTML

1. <html><head>
2.  
3. <script type='text/javascript'>
4.  var tomb = new Array('../Kepek/1.jpg', '../Kepek/2.jpg', '../Kepek/3.jpg');
5.  //var i;
6.  //var op;
7.        
8.  function plus(i,op) {
9.         kepid.style.filter = 'alpha(opacity=' + op + ')';
10.         kepid.style.opacity = op/100;
11.         document.getElementById('kepid').src = tomb[i];
12.         document.getElementById('divid').innerHTML = 'i erteke plus()-ban : ' + i + '<br> op : ' + op;
13.                
14.         if ( op < 100)  { ++op;  setTimeout(function()  { plus(i,op); }, 40); }      // >
15.         if ( op == 100 ) { setTimeout(function() { minus(i,op); }, 2000); }
16. }
17.        
18.  function minus(i,op) {
19.         kepid.style.filter = 'alpha(opacity=' + op + ')';
20.         kepid.style.opacity = op/100;
21.         document.getElementById('kepid').src = tomb[i];
22.         document.getElementById('divid').innerHTML = 'i erteke minus()-ban : ' + i + '<br> op : ' + op;
23.                
24.         if ( op > 0 ) { --op;  setTimeout(function() { minus(i,op); }, 40); }
25.         if ( op == 0 ) { setTimeout(function()  { skip(i); }, 0); }
26. }
27.        
28.  function skip(i) {
29.         if ( i < tomb.length -1) { ++i; } else { i = 0; }       // >
30.         setTimeout(function() { plus(i,0); }, 1);
31. }
32. </script>
33.  
34. </head><body>
35.  
36.         <img id='kepid' style='width:100px; float: left;' >            
37.         <div id='divid' style='width:250px; margin-left: 110px' > </div>
38.        
39. <script type='text/javascript'> plus(0,0); </script>
40.                        
41. </body></html>

[pixi]

Kód: HTML

1. <script language='JavaScript'>
2. function plus()
3.         {
4.         w = document.getElementById('kep').width;
5.         h = document.getElementById('kep').height;
6.         meret = w+' - '+h;
7.  
8.         //document.getElementById('kep').width = w;
9.         document.getElementById('kiir').innerHTML = meret;
10.        
11.         }      
12. </script>
13.  
14. <img id='kep' src='../Kepek/xx.jpg' width='50px' onmouseover='plus()' >
15. <div id='kiir'></div>

A script jelenleg az onmouseover-re a kép alatt kiírja a kis kép méretét.
Evvel szemben én az eredeti kép méretét szeretném kinyerni. Halvány elképzelésem szerint az eredeti képet valahogy egy új kép objectum-ba be kell tenni, és ebből kéne kinyerni a valós méretet:

 eredeti  = new Image(); 
 eredeti.src  ="../Kepek/xx.jpg";
 
A kérdésem az volna, hogy ebből az eredeti.src-ből, hogyan tudom a w és h értéket kiszedni?
Hogyan módosul a w= ....width; és a h = ....heigth; sor

[tanulo]

Sziasztok

Van egy onload  javascript eseményem amit csak akkor szeretnék futtatni  ha egy bizonyos linkről érkezik az user.
Tehát előző oldalon két link van a(link és b(link) .Ha a linkről érkezik akkor hozna magával egy változót és akkor lefuthat az onload esemény ha b linkről érkezik akkor nincsen változó és nem szabadna lefutnia az onload-nak.


Hogyan lehetne ezt megvalósítani?
Elküldve:: 2010. Október 26.  08:53:32Közben megoldottam,nem láttam a fától az erdőt!

[ThompsoN]

Sziasztok.

Azt szeretném kérdezni, hogy lehet-e javascripttel lekérdezni, hogy hány %-on áll egy kép betöltése.
A képet így töltöm be:

Kód: Javascript

1. var kep = new Image();
2. kep.onload = function(){
3. //...
4. }
5. kep.src = 'http://valami/valami.jpg';
6.