• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild verkleinern

Status
Für weitere Antworten geschlossen.
H

HTML 4 YOU

Neues Mitglied
Hey Leute, ich habe mit JAvascript eine Animation gemacht, wo ein Bild beim mousover sich vergrößert und beim mouseout sich wieder verkleinert. Doch iwie funktioniert das ganze nicht.

Hier mein Code:


HTML: 
<!DOCTYPE html>
<html>

<head>
    <title>Javascript-Test</title>

    <script language="javascript" type="text/javascript">
        var i = 100;
        
        
        function start_vergr() { var vergr = window.setInterval('Icon_vergr()', 10); }
        function start_verkl() { var verkl = window.setInterval('Icon_verkl()', 10); }
        
        function Icon_vergr() {
            if(i<150) {
                var img = document.getElementById('AppIcon');
                img.style.width = i + "px";
                img.style.height = i + "px";
                i++;
            } if(i==150) {
                window.clearInterval(vergr); 
            }         
        }
        
        function Icon_verkl() {
            if(i>100) {
                var img = document.getElementById('AppIcon');
                img.style.width = i + "px";
                img.style.height = i + "px";
                i--;   
            } if(i==100) {
                window.clearInterval(verkl);
            }
        }
        
        
    </script>

</head>

<body>
    <img src="iPhone App Icon Gr&uuml;n" width="100" height="100" id="AppIcon" onmouseover="start_vergr()" onmouseout="start_verkl()" />
</body>
</html>
 
Zuletzt bearbeitet:
vergr und verkl sind nur innerhalb der jeweiligen Funktion gültig, nicht aber im globalen Namensraum:

Code: 
        var i = 100,
            vergr = null,
            verkl = null;

        function start_vergr() { vergr = window.setInterval('Icon_vergr()', 10); }
        function start_verkl() { verkl = window.setInterval('Icon_verkl()', 10); }

Vielleicht kannst du es zudem so machen, dass immer nur ein Interval gleichzeitig aktiv sein kann.
 
achso ja danke, das klingt logisch.
ich habs jetzt glaub ich. ich werd auch immer beim beginn eines Intervalles, immer den anderen abschalten

(also:

HTML: 
<!DOCTYPE html>
<html>

<head>
    <title>Javascript-Test</title>

    <script language="javascript" type="text/javascript">
        var i = 100;
        var vergr = 0;           // Definiert als globale Variable
        var verkl = 0;           //      "     "     "        "
        
        function start_vergr() { window.clear Interval(verkl); var vergr = window.setInterval('Icon_vergr()', 10); }
        function start_verkl() { window.clear Interval(vergr); var verkl = window.setInterval('Icon_verkl()', 10); }
        
        function Icon_vergr() {
            if(i<150) {
                var img = document.getElementById('AppIcon');
                img.style.width = i + "px";
                img.style.height = i + "px";
                i++;
            } if(i==150) {
                window.clearInterval(vergr); 
            }         
        }
        
        function Icon_verkl() {
            if(i>100) {
                var img = document.getElementById('AppIcon');
                img.style.width = i + "px";
                img.style.height = i + "px";
                i--;   
            } if(i==100) {
                window.clearInterval(verkl);
            }
        }
        
        
    </script>

</head>

<body>
    <img src="iPhone App Icon Gr&uuml;n" width="100" height="100" id="AppIcon" onmouseover="start_vergr()" onmouseout="start_verkl()" />
</body>
</html>
)
 
Zuletzt bearbeitet:
Was denn ?

mermshaus schrieb:
vergr und verkl sind nur innerhalb der jeweiligen Funktion gültig, nicht aber im globalen Namensraum:
Code: 
        var i = 100,
            vergr = null,
             verkl = null;

        function start_vergr() { vergr =  window.setInterval('Icon_vergr()', 10); }
        function  start_verkl() { verkl = window.setInterval('Icon_verkl()', 10); }
Zum Vergrößern anklicken....

✔ durch
HTML 4 YOU schrieb:
HTML: 
        var vergr = 0;           // Definiert als globale Variable
        var verkl = 0;           //      "     "     "        "
Zum Vergrößern anklicken....



mermshaus schrieb:
Vielleicht kannst du es zudem so machen, dass immer nur ein Interval gleichzeitig aktiv sein kann.
Zum Vergrößern anklicken....
✔ durch
HTML 4 YOU schrieb:
HTML: 
        function start_vergr() { window.clear Interval(verkl); var vergr = window.setInterval('Icon_vergr()', 10); }
        function start_verkl() { window.clear Interval(vergr); var verkl = window.setInterval('Icon_verkl()', 10); }
Zum Vergrößern anklicken....

Was habe ich denn nicht beachtet ?
 
Indem du in den Funktionen start_vergr() und start_verkl() wieder das "var" vor den Variablennamen schreibst, werden die globalen Deklarationen durch lokale überschrieben, die nur innerhalb der jeweiligen Funktion gültig sind.

Genauere Erklärung etwa hier: Javascript: Das umfassende Referenzwerk - Google Books

Falls der Link nicht zur richtigen Stelle führt: Abschnitt 4.3.1 (zweiter Absatz), Seite 55.
 
Hey danke,
jetzt funktioniert es richtig, ich wusste gar nicht, das wenn man ein var davor setzt, das dann innheralb einer funktion nur noch funktioniert.

naja, jetzt weis ich es ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben